Why the mini reset? - JayPanoz/Soma GitHub Wiki
That small part in the CSS is more of a normalize than a reset actually. I decided to call it “reset” anyway since it does reset some styles and was heavily inspired by Eric Meyer’s (web) reset—in particular the “HTML5 display-role reset for older browsers”.
This mini reset has been customized for Ulysses’ output, it by no means cover other usages. It can serve as a foundation for sure but don’t expect it to normalize/reset anything in any case.
Let’s see what this mini reset is achieving.
Block Elements
aside, figure, figcaption, nav, section {
font-size: 100%;
line-height: inherit;
display: block;
margin: 0;
padding: 0;
}
This part is:
- resetting the display-role of HTML5 tags output by Ulysses for ePub2-only Reading Systems (
display: block); - resetting some styles for those elements.
It is critical to the proper rendering of those HTML5 block elements. Whatever you do, don’t get rid of it.
If you get rid of it, styles you declare for those elements may even be completely ignored by EPUB3-compatible RS.
Navigation document
Here’s the thing: EPUB3 is using a standardized nav to render a table of contents.
While styling must be managed on the RS’ side (per spec), we never know what might happen. Consequently, we prefer to make sure spec requirements are met at the ePub file level in case anything goes wrong.
nav[epub|type~='toc'] ol li {
list-style: none !important;
}
nav[epub|type~='landmarks'],nav[epub|type~='page-list'] {
display: none;
}
Please note that part requires the epub namespace.
To sum things up :
- it strips out the
list-style-typefor the list elements (li) in the table of contents; - as a bonus, it hides the
landmarksand thepage-listby default, in case anything goes wrong and thenavdoc gets displayed in the spine of your eBook.
The landmarks and page-list may (or not) be supported at the RS level but when they are, you’ll probably find them in the dedicated menu.
Please note that if you are using those two ePub-specific semantic inflections, you can also add an hidden="hidden" attribute to your nav element if you want to hide them.