-
Notifications
You must be signed in to change notification settings - Fork 3
Which unit should I use?
Remember Internet Explorer 6?
Adobe RMSDK (up to version 11) is like IE6 but for eBooks. The ePub ecosystem being the ePub ecosystem, previous versions are still powering millions of eInk Readers, an awful lot of mobile and desktop apps–Yeah, software support is that bad, dedicated devices being hardly updated.
As a result, you must be very careful for super simple things like, say, units.
Don’t use pixels and points for font-size. If the user increases font size, font size won’t increase.
The pixel and points units may be used cleverly though. Since it won’t reflow, we adopted it for @page margins for instance.
As for the other units, they are absolute and belong to print. ‘Nuff said.
That’s a lot better. Don’t hesitate to use percentage if you feel comfortable with it.
You can even achieve some great tricks with it, like margins based on container’s width (or screen if you prefer), responsive image grids, sup & sub positioning, etc.
Note: be careful with width and padding as box-sizing: border-box is not supported in ePub2.
That’s our current champion. Though obscure at first sight, em is allowing vertical rhythm, well-proportioned reflow, visual harmony when eBook is presented on fake spreads (2 columns), &c.
On the other hand, be insanely cautious with em values for margins and paddings, especially left and right; if the user increases font-size, margins will increase accordingly. As a result, you get bigger text in a smaller container. This is the reason why we are using values in % for that (computed based on width of container).
I’m not saying you should avoid rem but the problem is you are likely to provide a fallback in px. In other words, Reading Systems that don’t support rem will use the value in pixels and the user won’t be able to increase font size.
So because you basically should use em as a fallback, the benefits of using rem are reduced to zero.
So, after extended testing, “value rem considered harmful, even in EPUB 3”. Reading System developers have broken so many things it doesn’t come as a surprise but… this is a new low.
To sum things up, use vh for image’s max-height (with a height fallback in percentage) and that’s it. Unfortunately, this one is like rem: a dream not come true yet.
inherit is a hack.
We are using this value in order to not disable the user setting for line-height in various Reading Systems, e.g. Kindle which doesn’t support it.
So don’t think keywords are safe, they are not. initial, unset and whatnot aren’t very well supported. currentColor is safe though, and we are using it for hr so if you want borders the color of text, go with it.
As for font-size keywords (e.g. medium, x-large, etc.), though the provide more preciseness for Mobi7, they may disable the font size setting in some other RS.