[hobnail]

Originally Posted by thiago.eec

Look at the screenshot. I have drop caps, indentation, ruler, headers, and just a single class for an specific case.

I use a similar style for my chapter headings.

I got this idea of using a span from Turtle91 or DNSB.
If the chapter title is a single line, just the number, or just the title, it looks like this

<h2 title="Chapter One">One</h2>

The title= stuff isn't in what I did; that's added by a saved search and replace in Sigil. Search:

<h([\d])>(.*)</h[\d]>

Replace:

<h\1 title="Chapter \2">\2</h\1>

Being fussy, anal, or whatever, I feel like the word Chapter in the chapter's title is unnecessary; it's bold and centered so yeah, it's the start of a new chapter. But just the number looks rather barren to me in the table of contents so the title= adds the word Chapter to the TOC.

If there's a chapter number and a chapter title then it's:

<h2  title="Chapter Three — A proposed expedition">Three <span>A  proposed expedition</span></h2>

Here again the title= is done with another search and replace; search:

<h([\d])>(.*)  <span>(.*)</span></h[\d]>

Replace:

<h\1  title="Chapter \2 — \3">\2  <span>\3</span></h\1>

In my main css file, stylesheet.css I have

h1, h2, h3, h4 {
     break-inside: avoid;
    break-after: avoid;
    font-weight: bold;
    hyphens: none;
    margin-bottom: 0em;
    margin-top: 1em;
    page-break-after: avoid;
    page-break-inside: avoid;
    text-align: center;
    text-indent: 0em;
}

h2 span, h3 span {
     display: block;
    font-size: larger;
    font-style: italic;
    /* overrides small-caps in 2nd .css file */
    font-variant: normal;
    font-weight: bold;
    margin-top: 1.25em;
}

Then I have another css file, stylesheetdoubleheader.css, which contains

h1, h2, h3, h4 {
    font-variant: small-caps;
    font-weight: normal;
    margin-bottom: 2em;
  }

The stylesheetdoubleheader.css file is only added to all of the chapter files when there is a subhead. (The "h2 span, h3 span" has higher precedence which is why it overrides.)

The display:block is the trick that puts it on a separate line.