CSS Styling for EPUB3 & KF8

User avatar
DavidWSnow
Posts: 97
Joined: Wed Jun 22, 2016 10:25 pm
Platform: Mac
Location: Outside Seattle Washington

Thu Dec 21, 2017 8:06 pm Post

After getting the V3 custom styling looking good for my PDF paperback version of the book, I started looking at the CSS styling options available to me. I was very pleased that my styles passed thru to the CSS with reasonable settings. However, the most important ones are missing!

My book has chapters with \<$hn> numbering and titles. <h1> seems like a reasonable choice for the "Chapter 1". It might be a good idea to use the "heading-1" style that Scrivener provides rather than H1 which isn't even defined in the Scrivener's CSS.

However, a normal paragraph <p> doesn't seem very good for the Title even though the "right-align" that I want is added. I can't see how I can easily style this with no class and no id.

As new nested docs are processed, thier binder title-names are also normal paragraphs <p>. At least they have ids (doc9) so I could create a huge list and style them---Yuk. Since they are normal paragraphs they are indented and not bolded or styled in any useful way.

I suggest that you create a handful of classes like class="chapter-with-title-page-padding">, for Title, Chapter Heading, Chapter-Title, Section Title, Page Title, etc. One each for each place that Scrivener gets content from. Then users can easily style them.

/Dave

User avatar
nontroppo
Posts: 1009
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Fri Dec 22, 2017 1:33 am Post

I'm not quite sure what the exact issue is? You can use the Styles pane to assign Heading levels to your Section Layouts; so say I have a Section Layout whose Title is given the "Title" style, and I want it to be a <h2>, then in Styles I assign it a Heading 2 level:

Screen Shot 2017-12-22 at 09.22.00.png
Screen Shot 2017-12-22 at 09.22.00.png (10.59 KiB) Viewed 943 times


Output:

Code: Select all

<h2 style="text-align: center; text-indent: 0em" id="doc1">INTRODUCTION</h2>


If you want a different <h#> heading level, then use different section layouts with different style mappings...

Regarding adding class names, this depends on the Compile format and the project. There is no universal agreement of terminology like Part/Section/Chapter, and thus their levels depend on the project. The default EBook EPub3 compile format has a set of choices with the styles already assigned for sections/chapters and so forth. In general, for EPub a top level folder is going to be split into a different HTML file, so <h1> is assumed to be that level and everything starts from <h2>, but you can easily override this. I argued during the beta that automatic heading level mapping from the binder should be the default, but Keith convinced me that this should be up to the user to ensure maximum flexibility.

Because of large number of compile format targets and the utter flexibility of the Compile mapping, I don't think Scrivener can "impose" a single set of universal section names and styles. Each compile format offers its own take, and you can create your own if that isn't sufficient...

User avatar
DavidWSnow
Posts: 97
Joined: Wed Jun 22, 2016 10:25 pm
Platform: Mac
Location: Outside Seattle Washington

Sat Dec 23, 2017 4:18 pm Post

Scrivener has the CSS style working well now that I understand that I have another dozen styles to create, load into Scrivener in two places and maybe also custom style. I still have two problems:

1. On the layout for a "Titled Section" such a "Preface" I have styled the Section Title but I never get a class assigned to it in the HTML. As a result, it looks like a centered paragraph. Since I have less than a dozen such pages I could always make them "As-IS", and add the headings by hand an style them. Not Cool.
2. The second one is that I would like "headings" in the eBook in a Sans Serif font and the text in a Serif font. At first this looks easy just add :

Code: Select all

.title, .heading-1, .heading-2, .heading-3, .heading-4, .heading-5, .ztitle, .zsubtitle,  .zsubsubtitle, .table-heading
.zchapternumber, .zchaptertitle,  .zsubsectiontitle, .zpageheading {
   font-family: sans-serif;
   font-weight: 500;  /* Value range 100, 900 -- 400=normal, 700=bold */
   margin: 0rem 0% .5rem 0rem; text-indent: 0rem; }


It actually works in Calibre's ebook-editor since it uses the fonts on my Mac. However, when I send the eBook to my iPad I wasn't expecting the font to work, but I was hoping that the "Serif / San-Serif" would work. Can I force eReaders to put headings in another font? I have read hundreds of eBooks where the author/publisher has managed to do this, so it must be possible.

User avatar
nontroppo
Posts: 1009
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Sun Dec 24, 2017 2:20 am Post

(1) I can confirm this and it looks like it may be a bug? Bu there is a simple workaround; the section layout <div> does correctly assign a style:

Code: Select all

<div class="titled-section">
<h2 style="text-align: center; text-indent: 0em" id="doc1"><strong><em>INTRODUCTION</em></strong></span></h2></div>


So you can easily target the <h2> by using div.titled-section > h2 {font-family: sans-serif!important;} as a CSS rule...

Regarding your (2), try using the !important CSS modifier and see if it helps, but each eReader can choose to override CSS as it sees fit...

User avatar
KB
Site Admin
Posts: 20005
Joined: Tue Jun 13, 2006 11:23 pm
Platform: Mac
Location: Truro, Cornwall
Contact:

Fri Jan 05, 2018 4:49 pm Post

I've found a bug whereby if a title has a prefix that will be removed (such as the <$rst> tag) this can cause the title not to be assigned the style name in the ebook HTML. However, that's the only time I can see this happening - are you seeing this in other cases? If so, can you please provide a reproduction case? Thanks.
"You can't waltz in here, use my toaster, and start spouting universal truths without qualification."

User avatar
nontroppo
Posts: 1009
Joined: Mon Mar 05, 2007 5:22 pm
Platform: Mac
Location: Airstrip One

Thu Jan 11, 2018 4:13 am Post

Hi Keith, I tried to reproduce and can indeed confirm this only happens in 3.0.1 when there is a <$rst_…> placeholder in the prefix of that section layout, if I remove the placeholder then the custom class gets correctly assigned to the <h> tag. So this should hopefully be fixed with 3.0.2…