Basics

Basic CSS

Default CSS

See CSS: non-fiction and CSS: fiction - double check that p has specified font-size 

p{
    font-size: .9em;
}

Regex fix image names

[\(\)\,éá&]

Small caps

small,
.smallcaps {
    font-size: .82em;
    text-transform:uppercase;
}

Italics: em and i

i > i,
em > i,
i > em{
    font-style: normal;
}

Strikethroughs, deletions and underlines

text-decoration: line-through;
line-through
or
<del>word marked deleted</del>
word marked deleted

text-decoration: underline;
text-decoration: underline
or
<ins>word marked as insertion</ins>
word marked as insertion
or
<u>non-textual annotation</u>
e.g. highlight spelling mistake: This is a typo
Note: should be be altered in css e.g. This is a tpyo.

Highlights

<mark>marked with yellow highlight</mark> marked with yellow highlight

Keyline / Outline

  • I think the first one is more universal
    color: #747474;
    -webkit-text-stroke-width: 1px;
    -webkit-text-fill-color: white;
    -webkit-text-stroke-color: black;

or

    text-shadow: -1px -1px 0 #000, 1px -1px 0 #000, -1px 1px 0 #000, 1px 1px 0 #000;

Ligatures

To remove unwanted ligatures

    font-variant-ligatures: none;

Font Variants

To disable all (usually on body tag):

    font-feature-settings: normal !important;

To disable individually:

    font-variant-alternates: normal;
    font-feature-settings: "swsh" 0; /* Disables swash characters. */
    font-feature-settings: "cswh" 0; /* Disables contextual swashes. */
    font-feature-settings: "calt" 0; /* Disables contextual alternates. */

or

    font-feature-settings: "swsh" 0, "cswh" 0, "calt" 0;

To disable all advanced typographic features, including ligatures, use:

font-feature-settings: normal;
font-variant-ligatures: none;

aside.sidebar{
    border-radius: 15px;
    display:block;
    margin:2em auto;
    padding: 1em;
    width:50%;
    -webkit-column-break-inside: avoid;
    page-break-inside: avoid;
    break-inside: avoid;
}

aside.sidebar-red{
    border: solid 3px #f4a39d;
    background-color: #fddfd8;
    clear: both;
}

Or with background image (must go in div or aside):

aside.sidebar{
    background: #dff8fc url("../image/darkmatter.jpg") no-repeat;
    background-position: top center;
    background-size: contain;
    margin: 0.5em;
    padding: 2em 0 5em;
    clear: both;
}

underline and strikethrough

    text-decoration: underline;
    text-decoration-style: dotted;

.strikethrough{
    text-decoration: line-through;
}

Dropshadow

Text shadow is better for text.

.dropshadow{
    text-shadow: .03em .03em 0 #000; 
}

or

.dropshadow{
    filter: drop-shadow(.03em .03em 0 #000);
}

Letter spacing

    letter-spacing: .08em;

Dropcaps

In the html: 

<p class="paragraphfirst">It was a dark and stormy night when the cowboy set out in search of adventure.</p>

This version works best https://adrianroselli.com/2019/10/accessible-drop-caps.html:

p.paragraph-first{
    text-indent:0;
}

p.paragraph-first:first-letter {
    color: #378179;
    font-family: andada, serif;
    font-size: 5rem;
    float: left;
    line-height: .6; /* from 1 */
    padding-right: 0.08em;
}

This is similar https://kb.daisy.org/publishing/docs/html/dropcaps.html

p.paragraph-first:first-letter {
  font-family: corebandi, serif;
  font-size: 5.5rem;
  float: left;
  line-height: .6; /* from 1 */
  margin-right: 0.05em;
}

You could target it like:

section[@role='doc-chapter'] p:first-child::first-letter {
   float: left;
   font-size: 3em;
   line-height: 1;
   padding-right: 0.1em;
}

alt version 1

.paragraph-first::first-letter {
    font-family: bobbyjones, sans-serif;
    font-size: 3em;
    font-style:normal;
    font-weight: normal;
    line-height: .7;
}

.first::first-letter {
    color:#737A11;
}
.second::first-letter {
    color:#A65B30;
}
.third::first-letter {
    color:#307D96;
}
.fourth::first-letter {
    color:#59547F;
}
.fifth::first-letter {
    color:#d33210;
}

Old version

https://www.accessiblepublishing.ca/accessible-publishing-best-practices/#dropcaps
Consider using a pseudo-selector. Note does not work with float images alongside that paragraph
Note 2 maybe start using the float version below recommended by Daisy?

.paragraphfirst {
    display: inline-block;
    text-indent:0;
}
.dropcap, .paragraphfirst::first-letter {
    font-size: 2.5em;
    font-weight: bold;
}

Context breaks

With image

hr.break {
    background: transparent url('../image/break.png') no-repeat center;
    background-size:contain;
    border:0;
    display:block;
    height:1em;
    margin: 2em 0;
    width: 100%;
}

In the HTML:

<hr class="break" />

With characters

hr.break {
    overflow: visible;
    border: none;
    text-align: center;
    margin:0 auto;
    width: 100%; 
}

hr:after {
    content: "* * *";
    display: inline-block;
    position: relative;
    font-size: 1em;
    padding: 1em 0;
}

@media amzn-kf8{
    /* CSS for KF8 devices */
    hr.break{
            border: none;
            margin: 1em 0;
            width: 0;
    }
}

In the HTML

<hr class="break" />
  • style links with bold (or bold-italic etc.) as well as colour and unique visual id like underline
a {
  color: inherit !important;
  font-size: inherit;
  font-weight: bold;
  text-decoration-style: dotted;
}

Figure circles

figure.circle{
    clear: both;
    margin: 2rem auto 1rem;
    text-align: center;
    width: 60%;
}

figure.circle img{
    border: 4px solid #41A69A;
    border-radius: 50%;
}

figure.circle figcaption{
    text-align:center;
}

figcaptions

  • backgrounds
figcaption{
    background: #DAE8D6;
    border-radius: 0 0 12px;
    font-family: sans-serif;
    font-size: 0.7em;
    font-style: normal;
    font-weight: normal;
    hyphens: none !important;
    -epub-hyphens: none;
    -moz-hyphens: none !important;
    -webkit-hyphens: none !important;
    line-height: 1.3;
    margin: 0 3em 0 0;
    padding: .5em 1em;
    text-align: left;
    text-indent: 0;
}

color

  • you can just inherit a color:
#myDIV {
  color: blue; /* Blue text color */
  border: 10px solid currentcolor; /* Blue border color */
}

baseline shift

    position: relative;
    bottom: .3em;

Basic Structures

Chapter icons

.chapter-title{
    background: url("../image/chapter-icon.png") no-repeat;
    background-position: top center;
    background-size: 4em;
    padding: 3em 0 0;
}

Headings

  • Add doc-subtitle?

Use <hgroup> for heading and enclose in <header> if necessary

<hgroup>
    <h1 class="chapter-title" id="CHAPTER_ID" epub:type="title"><span class="chapter-num">CHAPTER_NUM</span> MAIN_TITLE</h1>
    <p class="subtitle" role="doc-subtitle">A_SUBTITLE_FOR_THIS_CHAPTER</p>
</hgroup>

or

<header>
    <hgroup>
        <h1 class="chapter-title" id="CHAPTER_ID" epub:type="title"><span class="chapter-num">CHAPTER_NUM</span> MAIN_TITLE</h1>
        <p class="subtitle" role="doc-subtitle">A_SUBTITLE_FOR_THIS_CHAPTER</p>
    </hgroup>
    <p role="doc-epigraph">EPIGRAPH TEXT</p>

Add CSS

hgroup{
    background: url("../image/starburst.png") no-repeat;
    background-position: top center;
    background-size: contain;
    margin: 10% 0 .5em 0;
}

span.chapter-num{
    display: block;
    color: #cf5d3a; 
    font-family: sans-serif;
    font-size: 1.5rem;
    font-weight: normal;
    text-transform: initial;
}

h1.chapter-title{
    font-family: sans-serif;
    font-size: 2.5rem;
    font-weight: normal;
    line-height: 1.25;
    margin: 0 0 .5em;
    padding:1em;
    text-transform: uppercase;
}

Headers with background color

Put text in <span class="bck-ch_1"
NOTE Amazon does NOT like having the reverse color:#ffffff in the h2 css, it must be in the background css otherwise the text will appear grey

span.bkgrnd{
    background-color: #e91444;
    color:#ffffff;
    /*border-radius: 0 0 .5em .5em;*/
    padding: .05em .6em;
}

Headings Resize

/* Adjust the heading size for very small screens, such as iPhone (~375px width) */
@media (max-width: 375px) {
  h1.front-back,
  h1.chapter-title {
      font-size: 120%; /* Smaller font size for small viewports */    hyphens: auto !important;
      -epub-hyphens: auto;
      -moz-hyphens: auto !important;
      -webkit-hyphens: auto !important;
      word-break: break-word; /* Add this */
      overflow-wrap: break-word; /* Add this */
  }
}

Images and Figures

  • check resolution. Resize/crop if necessary.
    • NOTE Apple demands 1400px on short axis for cover
    • 4 million pixels = ~ 2600 x 1500

Figcaption

  • Add thinspace to photo-credit between "/": Central Press / Getty Images
    • Find /Getty Images to / Getty Images, /Shutterstock.com, /Wikimedia Commons, /CC BY-SA, /Public Domain

Index

  • one section per letter
    • use <section aria-label="A">
  • unordered list

Page numbers in <b class="index">italic</b> indicate an image caption.

        </ul>
    </section>
    <section aria-label="Letter XXX">
        <ul class="index">

Bibliography (Resources)

Technically should be using <cite> and <time>

<li class="resources">Meltzer, Brad. <cite>I Am Jane Goodall</cite>. Rocky Pond Books, <time pubdate="2016">2016</time>.</li>

Endnotes

  • <a href="endnotes.xhtml#note-1" id="noteref-1" epub:type="noteref" role="doc-noteref" class="noteref">1</a>
<ol class="endnote">
    <li id="note-1" epub:type="endnote">
        <p>TEXT_OF_THE_ENDNOTE. <a href="FILE_NAME.xhtml#noteref-1" epub:type="backlink">↩</a></p>
    </li>
</ol>

CSS

a.noteref{
    font-size: .75em;
    vertical-align: super;
}

ol.endnote > li{
    margin: 1em 0;
}

Custom Lists

Lists with no bullets - list-style-type: none;

Set ol li as one style then ol li p as another.

html 

<ol>
    <li><p>This is a list item.</p></li>`
</ol>

css 

ul li,
ol li {
font-family: sans-serif;
font-weight: bold;
color: #666;
font-size: 105%;
}

li p {
font-family:serif;
font-weight: normal;
font-size: 1 em;
color: initial;
}

Alternating Lists

/* Customize for items 1, 4, 7, ... */
ul.alternate li:nth-child(3n - 2){
    color: #71BD9D;
    content: "➤"; 
}

/* Customize for items 2, 5, 8, ... */
ul.alternate li:nth-child(3n - 1){
    color: #52BFD9;
    content: "●"; 
}

/* Customize  for items 3, 6, 9, ... */
ul.alternate li:nth-child(3n){
    color: #D35A4D;
    content: "■"; 
}

Lists with characters

ul {
    list-style: none;
    margin-left: 0;
    padding-left: 1.5em;
}

ul li {
    text-indent: -1.5em;
    padding-left: 1.5em;
}

ul li::before {
    content: '★ ';
}

Glossary (Definition lists) 

dl{
    font-size: .9rem;
}

dt {
    float: left;
    clear: left;
    margin-left: .5em;
    font-weight: bold;
} 

dt::after {
    content: "—"; 
} 

dd {
    margin:0 2em;
    padding:0 0em .5em;
}

<dl>
    <dt id="abstract-noun">abstract noun</dt>
        <dd>a noun that refers to a concept or an intangible object, such as <i>jealousy</i>, <i>integrity</i>, <i>fear</i>, or <i>modesty</i> <a href="chapter-1.xhtml#noteref-abstract-noun" role="doc-backlink" epub:type="backlink">↩</a></dd>

    <dt id="acronym">acronym</dt>
        <dd>an abbreviation that is pronounced like a word <a href="chapter-11.xhtml#noteref-acronym" role="doc-backlink" epub:type="backlink">↩</a></dd>
</dl>

Tables

Consider using table captions for labels

<table class="table-1">
  <caption><b>Funny Stories</b> Table 1.1</caption>
    <thead>
        <tr class="table-1">
            <th>12 stories</th>
            <th>31 stories</th>
        </tr>
    </thead>
    <tbody>
        <tr class="table-1">
            <td>1885<br/>
            Home Insurance Building<br/>
            Chicago</td>
            <td>1889<br/>
            Park Row Building<br/>
            New&#160;York City</td>
        </tr>
    </tbody>
</table>

Row heads vs col heads

 
<table>
  <caption>Capital cities</caption>
  <tr>
    <th scope="row">Belgium</th>
    <td>Brussels</td>
  </tr>
  <tr>
    <th scope="row">France</th>
    <td>Paris</td>
  </tr>
  <tr>
    <th scope="row">Holland</th> 
    td>Amsterdam</td>
  </tr>
</table>

Table CSS

tr.table-1{
    font-family: suti, sans-serif;
    font-size: 0.9em;
    font-style: normal;
    font-variant: normal;
    font-weight: normal;
    text-indent: 0;
}

table.table-1,
td{
    hyphens: none !important;
    -epub-hyphens: none;
    -moz-hyphens: none !important;
    -webkit-hyphens: none !important;
    table-layout: fixed;
    text-align: center;
    vertical-align: top;
    width: 100%;
}

Media Queries

Shrinking Type

NOTE @media (max-width: does not work on Kobo's because they have very strict CSS parsers that reject the entire stylesheet if they encounter any CSS feature they don't fully support.

So I have removed the @media (max-width: 375px) on fiction books' h1.front-back.

@media (max-width: 300px) {
    aside.question h2.fact {
        font-size: .75em; /* Smaller font size for small viewports */
    }
    aside.question{
        padding: 0.5em;
    }
}

Kindle/Amazon

@media amzn-kf8 {
    /* CSS for KF8 devices */
    aside.sidebar-2 {
        background: #DBC299;
    }

    aside.sidebar-2 > h2.sidebar{
        background: #7DE354 url("../image/shutterstock_green.png") no-repeat;
        background-size: cover;
        margin: 1em 0 .5em 0em;
    }

    /* To reverse type in Kindle */
    h2.challenges{
        color: white !important;
        text-shadow: 0 0 0.5em #000;
    }
}

Reverse queries

h1.titlepage {
  color: #1B653D; /* Default for all readers */
    font-family: fonseca, sans-serif;
    font-size: 5em;
    font-style: normal;
    font-variant: normal;
    font-weight: bold;
    line-height: 0.9;
    margin: .1em auto 0;
    text-align: center;
    text-transform: uppercase;
}

/* Only apply gradient if supported */
@supports (background-clip: text) or (-webkit-background-clip: text) {
  h1.titlepage {
    background-image: linear-gradient(25deg, #c66b22, #9a406e);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
  }
}
Mobi (deprecated)
@media amzn-mobi{
    img.cover-image:only-of-type{
        height: 98%;
    }
}

Dark Mode

@media (prefers-color-scheme: dark) {
    aside.sidebar-1,
    aside.sidebar-brain{
        background: none;
        border: 2px solid white;
        padding-bottom: 1em;
    }
    aside.quote{
        border: 1px solid #FFF082;
    }
}

synth.css

@media speech {
  .digits {
    -epub-speak-as: digits;
  }
  .spell {
    -epub-speak-as: spell-out;
  }
}

Delivers:

<span class="digits">123</span> <!-- Read aloud as "one two three" -->
<span class="spell">hello</span> <!-- Read aloud as "H-E-L-L-O" -->