30 |
31 | Typography
52 | 53 |Add line-height to body
56 | 57 | 58 | 59 |body {
61 | line-height: 1.5;
62 | }
63 |
64 | body * {
65 | line-height: inherit;
66 | }
67 | Details
71 |If you add an explicit line-height to elements, your CSS may break Kobo’s – and possibly others’ – user setting. By adding it to body and letting elements inherit from it, this problem is solved.
If you are targeting Kindle, please note the Publishing Guidelines recommends against setting a line-height on body.
Don’t define a line-height value which is less than 1.2
81 | 82 | 83 | 84 |element {
86 | line-height: 1.2;
87 | }
88 | Details
92 |As stated in versions of the Kindle Publishing Guidelines prior to 2018.2, “to ensure pagination, the Kindle software does not honor line-height value less than 1.2em or 120%.”
In other words, elements for which line-height is less than 1.2 will be applied the default’s line-height, which is 1.75 on most Kindle devices.
Disable hyphens
103 | 104 | 105 | 106 |element {
108 | adobe-hyphenate: none;
109 | -webkit-hyphens: none;
110 | -moz-hyphens: none;
111 | -ms-hyphens: none;
112 | -epub-hyphens: none;
113 | hyphens: none;
114 | }
115 | Details
119 |Usually, some elements like headings, centered text, etc. are not hyphenated.
121 |Those declarations should cover all self-respecting Reading Systems.
122 |Improve hyphenation
129 | 130 | 131 | 132 |element {
134 | -webkit-hyphenate-limit-before: 3;
135 | -webkit-hyphenate-limit-after: 2;
136 | -ms-hyphenate-limit-chars: 6 3 2;
137 | hyphenate-limit-chars: 6 3 2;
138 | -webkit-hyphenate-limit-lines: 2;
139 | hyphenate-limit-lines: 2;
140 | }
141 | Details
145 |When you set hyphens to auto, extra declarations can be set to improve hyphenation for your language.
You can indeed set the minimum number of letters a word must contain to be hyphenated, and the minimum number of letters which should be before and after the hyphen.
148 |Finally, you can control the maximum number of consecutive lines for which hyphenation must happen. As Bringhurst advised, “avoid more than three consecutive hyphenated lines.”
149 |Declare text-align for elements which should be left-aligned
156 | 157 | 158 | 159 |element {
161 | text-align: left;
162 | }
163 | Details
167 |If some elements like headings should be left-aligned, make sure to declare text-align.
Indeed, those elements will be justified if you don’t and the user sets full justification. Word-spacing will then be adjusted so that the text falls flush with both margins, which can result in terrible typography.
170 |Prevent sub- and superscript from affecting line-height
177 | 178 | 179 | 180 |sub {
182 | font-size: 0.675em;
183 | line-height: 1.2;
184 | vertical-align: sub;
185 | vertical-align: -20%;
186 | }
187 |
188 | sup {
189 | font-size: 0.675em;
190 | line-height: 1.2;
191 | vertical-align: super;
192 | vertical-align: 35%;
193 | }
194 | Details
198 |Sub- and superscript will affect line-height if you just use their dedicated keyword for vertical-align.
By decreasing line-height to the minimum value Kindle supports (i.e. 1.2) and using % for vertical-align, we solve this problem and can vertically-align sub- and superscript more accurately.
Improve legibility
208 | 209 | 210 | 211 |body {
213 | font-kerning: normal;
214 | font-variant: common-ligatures oldstyle-nums proportional-nums;
215 | font-feature-settings: "kern", "liga", "clig", "onum", "pnum";
216 | }
217 |
218 | h1, h2, h3 {
219 | font-variant: common-ligatures lining-nums proportional-nums;
220 | font-feature-settings: "kern", "liga", "clig", "lnum", "pnum";
221 | }
222 |
223 | table {
224 | font-variant-numeric: lining-nums tabular-nums;
225 | font-feature-settings: "kern", "lnum", "tnum";
226 | }
227 |
228 | code {
229 | font-variant: no-common-ligatures lining-nums;
230 | font-feature-settings: "kern" 0, "liga" 0, "clig" 0, "lnum";
231 | }
232 |
233 | .fraction {
234 | font-variant-numeric: diagonal-fractions;
235 | font-feature-settings: "frac";
236 | }
237 | Details
241 |OpenType features can dramatically improve the legibility of an eBook. Although not all default fonts provided by Reading Systems support all those features, you can still benefit from them.
243 |The font-feature-settings property is a low-level feature designed to handle special cases where no other way to enable or access an OpenType font feature exists, which is why you should prefer font-variant and its associated longhand properties.
Please note font-feature-settings doesn’t inherit values from the parent element but resets them.
For a complete list of features, visit this Typekit help page.
246 |Use real small capitals
253 | 254 | 255 | 256 |element {
258 | font-variant: small-caps;
259 | }
260 |
261 | @supports not (font-variant-caps: small-caps) {
262 | element {
263 | font-variant: normal;
264 | font-feature-settings: "smcp", "onum", "pnum";
265 | }
266 | }
267 |
268 | @supports (font-variant-caps: small-caps) {
269 | element {
270 | font-variant: normal;
271 | font-variant-caps: small-caps;
272 | }
273 | }
274 | Details
278 |The font-variant:small-caps property creates fake small caps. This can turn an enjoyable book into a mediocre experience since you can tell they are fake in the blink of an eye.
By using OpenType Features, we can use real small caps the typeface designer took special care getting right.
281 |Please note that if the font doesn’t support this feature, it will fall back to fake small caps.
282 |Use semantic asterisms and make them reflowable
289 | 290 | 291 | 292 |hr.asterism {
294 | height: 1.5em;
295 | background: transparent url("../Images/asterism.svg") no-repeat center;
296 | background-size: 2.5em 1.25em;
297 | overflow: hidden;
298 | page-break-inside: avoid;
299 | break-inside: avoid;
300 | }
301 |
302 | @supports not ((page-break-inside: avoid) and (break-inside: avoid)) {
303 | hr.asterism {
304 | -webkit-column-break-inside: avoid;
305 | }
306 | }
307 | Details
311 |Asterisms are context changes, thus you should use hr.
Problem is hr can’t contain anything so the only solution is to use a background image.
Your best option is SVG since it manages transparency, reflow without a loss in quality, can be designed to be compatible with night modes, etc.
315 |Reading Systems which don’t support background-size will fall back to the width, height and viewbox attributes in your SVG so don’t get rid of them.
Fake asterisms (context change)
323 | 324 | 325 | 326 |<div class="asterism" role="separator" aria-label="Interlude">
328 | * * *
329 | </div>
330 | Details
334 |Sometimes you can’t use semantic asterisms (background-image for hr) and adding it with hr:before may prove to be problematic for accessibility.
In that case, the ARIA role and aria-label attributes may come in handy.
The separator role tells Reading Systems the div is intended to be a context change (hr) and the aria-label will override the text inside it for Text to Speech.
If you intend to mimick how hr will typically be handled for selection and copy, don’t forget to disable user’s selection though (see “Create an automated numbering system” trick).
Force the color of links to be text’s
346 | 347 | 348 | 349 |a.text-color {
351 | color: inherit;
352 | -webkit-text-fill-color: inherit;
353 | }Details
357 |Sometimes there are so many links on a page that styling them using colors may disrupt the reading experience. As long as users can tell it’s a link, you should be OK.
359 |If you want links to be the same color as text, you can inherit color. The -webkit-text-fill-color property forces iBooks to use the text’s color in night mode.
While this snippet should work OK in the Kindle Format 8, it won’t in Kindle Format X, and a blue color will be forced for links – there’s currently no known trick to get around this.
361 |Layout
368 | 369 |Make HTML5 tags behave as expected in legacy RMSDK
372 | 373 | 374 | 375 |article, aside, figure, figcaption,
377 | footer, header, main, nav, section {
378 | display: block;
379 | }
380 | Details
384 |Did you know most of HTML elements have a default display value of inline? It’s up to browsers to set some elements to block.
Since the legacy RMSDK is not supposed to support HTML5, you must set grouping elements to block in your style sheet.
Prevent horizontal margins to reflow with font-size
394 | 395 | 396 | 397 |element-1 {
399 | margin-left: {number}%;
400 | }
401 |
402 | element-2 {
403 | padding-left: {number}%;
404 | padding-right: {number}%;
405 | }
406 | Details
410 |If you use em for horizontal margins, they will increase/decrease with the font-size user setting. This implies that the bigger the text is set, the smaller its container will be – it should be the opposite.
By using % for horizontal margins and paddings, Reading Systems will use the width of the page or parent container to compute them, not the current font-size.
Center a block element in legacy RMSDK
420 | 421 | 422 | 423 |element {
425 | width: {number}%;
426 | margin-left: ((100 - {number}) / 2 )%;
427 | margin-right: ((100 - {number}) / 2 )%;
428 | }
429 | Details
433 |Legacy RMSDK doesn’t really support the auto value for margin. As a matter of fact, it maps auto to 0, which is allowed in a footnote of the ePub2 specification.
In other words, if you want to center an element, you should declare a width then substract it from 100 and divide it by 2 to get your horizontal margins.
If your element is 80% then each margin will be (100-80)/2 or 10%.
Do not rely on page-breaks
444 | 445 | 446 | 447 |element {
449 | page-break-inside: avoid;
450 | break-inside: avoid;
451 | }
452 |
453 | @supports not ((page-break-inside: avoid) and (break-inside: avoid)) {
454 | element {
455 | -webkit-column-break-inside: avoid;
456 | }
457 | }
458 | Details
462 |CSS break is a strange beast. But what’s important is that we shouldn’t only rely on paged media.
464 |Modern Reading Systems will typically use CSS multi-columns to fake pagination since browsers don’t implement paged media, which means page-break-* is not necessarily aliased to column-break-*. And page-break-* itself is destined to become an alias for break-* at some point. For maximum compatibility, we must therefore use all three.
The feature query (@supports) allows us to get around some bug in iBooks. At some point, declaring -webkit-column-break-inside in the same rule as page-break-inside would indeed result in both styles being ignored.
Prefer page-break-after to page-break-before
473 | 474 | 475 | 476 |element {
478 | page-break-after: always;
479 | break-after: always;
480 | }
481 |
482 | @supports not ((page-break-after: always) and (break-after: always)) {
483 | element {
484 | -webkit-column-break-after: always;
485 | }
486 | }
487 | Details
491 |For some reason, it looks like page-break-after:always has got slightly better support than page-break-before:always in some Reading Systems.
As stated in iBooks Asset Guide, “if you include page breaks to mark a chapter break, use page-break-after to create a break at the end of a chapter, not page-break-before to insert the break at the beginning of the chapter. This modification improves performance with the table of contents.”
In any case, don’t use both since it will create a blank page in some Reading Systems.
495 |Fix the layout of tables
502 | 503 | 504 | 505 |table {
507 | table-layout: fixed;
508 | }
509 |
510 | th.third {
511 | width: 33%;
512 | }
513 | Details
517 |By default, you can’t really tell how Reading Systems will compute the width of tables’ columns. All you know is that they will compute those widths depending on their cells’ contents.
519 |You can force a width for each column by using table-layout:fixed then declaring a width for each element in the first line of the table.
Reading Systems will now use the width specified for those elements to compute the width of each column.
521 |Create an automated numbering system
528 | 529 | 530 | 531 |parent {
533 | counter-increment: elements;
534 | }
535 |
536 | element:before {
537 | content: counter(elements);
538 | -webkit-user-select: none;
539 | -moz-user-select: none;
540 | -ms-user-select: none;
541 | user-select: none;
542 | }
543 | Details
547 |Although it won't work in legacy RMSDK, this CSS snippet can be useful for numbered lines of code, headings, poetry, etc.
549 |Make sure to disable selection in some cases; nobody wants to copy-paste code with numbers breaking it.
550 |Check this MDN tutorial for further details.
551 |Build a super simple responsive grid
558 | 559 | 560 | 561 |@supports (display: -webkit-flex) or (display: flex) {
563 | ul.grid,
564 | ol.grid {
565 | display: -webkit-flex;
566 | display: flex;
567 | -webkit-flex-wrap: wrap;
568 | flex-wrap: wrap;
569 | -webkit-flex: 1 1 15em;
570 | flex: 1 1 15em;
571 | }
572 |
573 | ul.grid li,
574 | ol.grid li {
575 | page-break-inside: avoid;
576 | break-inside: avoid;
577 | }
578 | }
579 | Details
583 |What if you could make the most of the page’s width for, say, an inline table of contents or a list of ingredients?
585 |By using flexbox, you can create a responsive grid which should behave according to a preferred width (the third value in flex e.g. 15em).
Of course you may want to provide a fallback for Reading Systems which don't support flexbox.
587 |Vertically-align elements on a page
594 | 595 | 596 | 597 |@supports (display: -webkit-flex) or (display: flex) {
599 | parent {
600 | min-height: 95vh;
601 | display: -webkit-flex;
602 | display: flex;
603 | -webkit-flex-direction: column;
604 | flex-direction: column;
605 | -webkit-justify-content: {value};
606 | justify-content: {value};
607 | }
608 | }
609 | Details
613 |Pages of an eBook don’t have a middle or a bottom, right? With flexbox, they now do.
615 |Make sure to use the min-height property so that the container’s height can grow in case the user sets a huge font-size… or else contents will collapse.
If you’re not familiar with flex properties and values, check CSS-Tricks’ complete guide to flexbox.
617 |Finally, you should provide a fallback for Reading Systems which don't support flexbox.
618 |Give text wraps a modern twist
625 | 626 | 627 | 628 |element {
630 | float: left;
631 | }
632 |
633 | @supports (-webkit-shape-outside: {value}) or (shape-outside: {value}) {
634 | element {
635 | -webkit-shape-outside: {value};
636 | shape-outside: {value};
637 | -webkit-clip-path: {value};
638 | clip-path: {value};
639 | }
640 | }
641 | Details
645 |For decades, text has wrapped around the floated element’s bouding box, which means it couldn’t wrap the object like it does in DTP software.
647 |By using shape-outside and clip-path, you can define a shape around which the text should wrap.
And there’s even a Chrome extension to help you do that.
649 |Images
656 | 657 |Force images to keep their aspect ratio
660 | 661 | 662 | 663 |img {
665 | object-fit: contain;
666 | }
667 | Details
671 |When sizing images based on width or height, you’ll probably end with distorted images in some contexts. It turns out there is a CSS property to manage that.
Get used to add object-fit:contain to img as this property prevent this distortion.
Keep an image with its caption
681 | 682 | 683 | 684 |figure {
686 | page-break-inside: avoid;
687 | break-inside: avoid;
688 | }
689 |
690 | @supports not ((page-break-inside: avoid) and (break-inside: avoid)) {
691 | figure {
692 | -webkit-column-break-inside: avoid;
693 | }
694 | }
695 | Details
699 |Readability is as important as legibility and this is why you should take care of the relationship between elements.
701 |For best comprehension, the image and its caption should be displayed on the same page so let’s avoid a page-break inside figures.
702 |Make an image responsive to its caption’s font-size
709 | 710 | 711 | 712 |@supports (height: calc(98vh - 5em)) {
714 | img {
715 | width: auto;
716 | max-width: 100%;
717 | min-height: 300px;
718 | height: calc(98vh - 5em);
719 | max-height: 95%;
720 | object-fit: contain;
721 | }
722 | }
723 | Details
727 |For images with a portrait aspect ratio, you must go the extra mile so that the image and (part of) its caption are displayed on the same page.
729 |This is where the CSS calc() function really shines. It allows you to dynamically compute the height of an image depending on the current font-size.
In this example, the image’s height should ideally be 98% of the page minus 3 lines of text (with a line-height of 1.5). Finally, min- and max-height provide a range for the image sizing.
Misc.
738 | 739 |Use text color as a variable
742 | 743 | 744 | 745 |element {
747 | border: 1px solid currentColor;
748 | }
749 |
750 | svg {
751 | fill: currentColor;
752 | }
753 | Details
757 |If you want borders, backgrounds or SVG’s fill to be the same color as text, including in night modes, currentColor is your best bet.
Indeed, currentColor sort of behaves like a variable: it inherits the current color of text.
In other words, when Reading Systems set a light color for text in night mode, currentColor will become this color.
Style epub:type
768 | 769 | 770 | 771 |@namespace epub "http://www.idpf.org/2007/ops";
773 |
774 | [epub|type~="toc"] {
775 | /* styles */
776 | }
777 | Details
781 |Problem with epub:type is that you have to escape the colon in CSS…
Unless you declare a namespace at the top of your style sheet. You can now use epub|style instead of epub\:style, which is a lot more readable and maintainable.
Prevent unsupported styles from impacting legacy RMSDK
791 | 792 | 793 | 794 |@supports ({property}: {value}) {
796 | element {
797 | {property}: {value};
798 | }
799 | }
800 | Details
804 |If you want to do progressive enhancement and don't want to risk your stylesheet being entierely ignored in legacy RMSDK, feature queries are the way to go.
806 |Besides asking Reading Systems if they support a CSS declaration, it will basically protect the nested styles from being parsed by the legacy RMSDK. It can be pretty useful with the CSS calc() function for instance.
And @supports can protect media queries too.
The only downside is that Internet Explorer 11 doesn't support feature queries and Adobe Digital Editions 4.5 is using its rendering engine (Trident) on Windows. As a consequence, those styles won't be applied even though Internet Explorer supports them.
809 |Declare specific styles for Kindle
816 | 817 | 818 | 819 |@media amzn-kf8 {
821 | /* Specific KF8 styles (new format) */
822 | }
823 |
824 | @media amzn-mobi {
825 | /* Specific Mobi7 styles (old format) */
826 | }
827 | Details
831 |If for some reason you must add or override styles for Kindle, those two media queries can help. KindleGen will indeed take them into account when converting your EPUB file.
833 |Do not ever let them empty in your EPUB file since that would crash the legacy RMSDK and all the Reading Systems using it.
834 |Style for monochrome
841 | 842 | 843 | 844 |@media (monochrome) {
846 | /* Styles */
847 | }
848 | Details
852 |Although this media query won't work with eInk devices, it can help solve accessibility issues.
854 |MacOS and iOS indeed ship with a monochrome switch in system preferences (accessibility panel) which, when enabled, will trigger the monochrome media.
In other words, you could adapt colors to improve contrast for this mode.
856 |Make sure to protect this media query from legacy RMSDK’s parsing because your entire stylesheet could be ignored or, even worse, crash some apps and devices.
857 |Style for touch or click input
864 | 865 | 866 | 867 |@media (pointer: coarse) {
869 | /* Styles for touch input */
870 | }
871 |
872 | @media (pointer: fine) {
873 | /* Styles for mouse input */
874 | }
875 | Details
879 |Footnote references styled as in print (superscript) might provide users with a mediocre experience on touch devices. Fortunately, there is a media for such a case.
881 |The pointer media returns the accuracy of the primary input mechanism of the device, which means touch will return coarse while mouse will return fine for instance.
In other words, you could increase the size of clickable elements for coarse.
Make sure to protect this media query from legacy RMSDK’s parsing because your entire stylesheet could be ignored or, even worse, crash some apps and devices.
884 |