joshnh

What browser/OS? I can't replicate the issue you seem to be having.

I plan on having an option to output rem with px fallback code.

Only if you are using line-height to hack together a print baseline on the web.

Let me put it this way, if there was a semi-reasonable solution, I'm sure you would have heard about it.

Spot on. Perhaps I could have used a different term, but 'baseline' gives visitors an immediate sense of what the tool does.

The purpose is to mimic the effect of a print baseline by enforcing vertical rhythm, and while not perfect, it's often better than none at all.

Good call, I've fixed that.

Ems are more versatile. When increasing the size of all fonts at a particular breakpoint for instance. Instead of having to adjust each font-size property individually you can simply change the font-size of the root element.

Absolutely, you can hack it on a very individual basis, but this introduces some major problems. For instance, browsers and operating systems all render fonts differently, and as the web is fluid by nature, simply having a sentence break to the next line can be an issue. Also, it can be incredibly different based on the typefaces you are using.

Hi, creator here. Unfortunately that's not how CSS works. See here for more information: http://joshnh.com/2012/10/12/how-does-line-height-actually-w...

Am I the only one that simply imports hi-res photos into Instagram then?

The page shift can be fixed by using:

html { overflow-y: scroll; }

Would you mind sharing some more information on these 'elegant solutions'? I'm yet to experience them.

You could actually scale it if I had have used ems/rems instead of px. But you are right, an image is the way to go for production.

Spot on. I clearly state in the description field that it is only an experiment.

I am; Melbourne based. Thanks!

G'day, I'm the guy that made it. I agree with your comment completely, I had one pretty big constraint though; one element allowed. I'd like to think that is why it is getting upvoted.

Here is the image I used for reference: http://store.storeimages.cdn-apple.com/6442/as-images.apple....

I simply eyeballed an image rather than working to scale. As it is just an experiment, I'm not too fussed by the incorrect dimensions.

The thing to keep in mind is that the use of pseudo-elements keeps the style separate from the content. In terms of practicality, there isn't much; I did this as an experiment in semantics and the latest CSS properties and techniques.

For me, the best way to switch off, and the most rewarding, is to go cycling. Not only is it great for my health, but it is impossible to stay connected.

On the other hand, a designer that has no knowledge of HTML or CSS can open doors that you may have never considered, even if it involves more work.

I agree with you in the case of something original, but I'm not entirely sure how this qualifies?

I was merely curious as to the thought process. Thanks for offering some insight.

What would you then recommend when needing to support legacy browsers?