Well it might be worth seeing if the next beta fixes this for you. But for the sake of demonstrating the technique, here is how indents can be controlled more precisely.
CSS looks like a programming language with all of the brackets and semicolons, but it’s more along the lines of a JSON file in that it has some rules to follow, but the content itself is declarative rather than logical. If you’re dipping into ebook construction, it’s a very useful thing to know the basics of, as you can get quite far with a little knowledge—especially if you have a strong stylesheet to start from rather than making your own from scratch.
I’ll grant this is a slightly more complex case than changing something like the following:
h1 { color: red; }
If we want a blue heading 1, it’s a straight-forward fix. But to control certain aspects of global formatting on a per-Layout basis, you want to first give your Section Layout a CSS class name, in the Settings tab, like “scene-text”. This will cause the HTML content for this section to be inserted in a div, and to give that div a class name. This will grant us specificity in doing things with the contents of that div while leaving the rest of the formatting elsewhere in the ebook alone. To take the above simple example, if we put the h1 inside of a named div, then we could make it blue, while leaving all of the other h1 headings red:
h1 { color: red; }
.scene-text h1 { color: blue; }
Moving over to the CSS pane: what we have in the stock settings are a set of paragraph indent formatting rules that are adjusted by the settings you make in the Text Layout pane. These rules are added at the very top of the CSS in the “Default Stylesheet” column. Here is what they look like with default settings (all enabled):
.separator + p { text-indent: 0em; }
.separator + div > p:first-child { text-indent: 0em; }
.br + p { text-indent: 0em; }
.br + div > p:first-child { text-indent: 0em; }
A couple of those are rather advanced cases of selectors (what we call the part before the curly brace). In natural language, the first line means “all paragraphs following something that calls itself a separator”. How a thing calls itself something is with classes—or what we added to the Section Layout itself. The second selector means, “the first nested item within a div that is also a paragraph, where the div itself follows something calling itself a separator”. (Whew!)
Let’s take the two simpler examples first. If we want to change how paragraphs work inside of a class (which again, we’re adding to the whole Layout), then just like with our simple blue h1 example above, we tell the CSS engine to only apply the rule to matched stuff falling inside that class. Let’s take the first line as an example:
.scene-text .separator + p { text-indent: 1.5em; }
Now we are saying, “all paragraphs following something that calls itself a separator, that are both nested within something calling itself scene-text”. Note we’re also setting the text-indent here to non-zero, you’d want to match your settings with that part. Here are the rest of the lines:
.scene-text .separator + p { text-indent: 1.5em; }
.separator + div.scene-text > p:first-child { text-indent: 1.5em; }
.scene-text .br + p { text-indent: 1.5em; }
.br + div.scene-text > p:first-child { text-indent: 1.5em; }
So the only major difference between the two types of selectors here is that one set looks for how to format stuff inside the “scene-text” Layout div, and the other checks around the div for breaks, so the “scene-text” part gets added to the div selector in the middle. If we put it at the very front like the other examples, it wouldn’t work because the two different possible forms of HTML here are:
Simple case:
[code]
First line of scene…
* * *
First line of scene…
[/code]
Complex case:
[code]
* * *
[/code]
So for that second case we need “the first nested item within a div (that calls itself ‘scene-text’) that is also a paragraph, where the div follows something calling itself a separator”.
If you have multiple layouts that need this treatment, you can add multiple selectors before the curly braces, separated by commas. Here is an example (it can be on one line, but I’ve broken it out for clarity):
.scene-text .separator + p,
.other-layout .separator + p {
text-indent: 1.5em;
}
You want to put these overrides at the bottom of the “Custom Stylesheet” column in the CSS pane.
)
Scrivener puts out a much cleaner .doc.
.