Formatting chapter/title pages with offset blocks of text

[ElMiko]

I know there are some strong feelings out there about trying to simulate paperbook layouts in the context of reflowable, re-sizeable ebooks. For example, I've seen repeated calls against top margins on chapter headings or simulating text that starts "half-way" down the page, presumably because screen sizes and text sizes could potentially result in blank pages, unusual gaps between text, etc.

However...

I'm wondering how the pros here handle content that is seemingly necessary to format with various top & bottom margins and variable font sizes (see attached image). Do you assume a certain font-size (i.e. assume 1em is the size of some referent physical book, or assume a certain number of lines of text per ereader page) and screen size and hope for the best? What are these assumptions?

[Quoth]

The user can change the font size and the line spacing and side margins.
Users have very different sizes of screens from less than 4″ to more than 14″.

So you have no idea how many "lines" a page has.

In general you can't do much about bottom margins.

The only 100% way to force a page break and have a top of page spacing for a header is to have that header as the 1st item in a file. Then you need padding-top: 3em; if you want the space to be twice the size of a 1.5em font in the heading.

Many ereaders will discard a margin-top on the first item on a page.
Many ereaders will discard a margin-bottom on the last item on a page.

Windows and Orphans is a minimum of 1. That causes stuff to jump from one page to another if more than 1 on occasion.

There are page-break directives that can work, but the only sure way of knowing if something is at the top of a page is the start of a new file.

Assume the main body font is 1em (12pt). That can even be set. Then if a heading is set to 1.5em (or 18pt), then it will be 1.5x taller, if the same font. Different fonts may vary in size.

You do not set line-height. The relative line-height is automatic from the font.

So depending on the user resizing the font all the vertical margins and vertical padding and line spacing change proportionally.

The main outer margin should be zero. Then the user sets that margin as desired. It will not be zero.
Don't set left or right if an item is centred (spelled center because CSS is using American spelling only).

[Quoth]

Summary: context of reflowable, re-sizeable ebooks.

All things are relative from a main body text of 1em which can be ANY physical size
Any top padding more than a few times the heading size will fail
Any margin (heading margin-bottom) between heading and body needs to be modest, maybe not more than 2em.
Forget about trying to set outer margin for main body more than zero.
Forget about trying to set margins at the bottom of a page.

You only know that the start of a file is the top of a page.
You don't know number of lines or size of screen. Yes, there are media queries and even javascript. Neither of those work on many apps and ereaders.

Amazon has over 90% of world English Language ebook market. The upload is epub which they convert to KFX for most and azw3 for some older ereaders. The ending of Download & Transfer ended "old mobi" for the tiny number of customers with oldest ereaders. Most of their customers read on a phone app.

[RbnJrg]

Originally Posted by ElMiko

I know there are some strong feelings out there about trying to simulate paperbook layouts in the context of reflowable, re-sizeable ebooks. For example, I've seen repeated calls against top margins on chapter headings or simulating text that starts "half-way" down the page, presumably because screen sizes and text sizes could potentially result in blank pages, unusual gaps between text, etc.

However...

I'm wondering how the pros here handle content that is seemingly necessary to format with various top & bottom margins and variable font sizes (see attached image). Do you assume a certain font-size (i.e. assume 1em is the size of some referent physical book, or assume a certain number of lines of text per ereader page) and screen size and hope for the best? What are these assumptions?

Where are you going to work? Under epub2 or epub3? Do you want the epub for KDP? It's not the same Do you want the font-size to affect all elements or just the body text? For example, you can make it so that if the user increases or decreases the font size, some (or all) headings are not affected, they always remain the same size (in a title page, for example, that could be a good option).

Top and bottom margins where? Titles, paragraphs? For main titles (the titles that start a chapter) for margins I use "%" (or vh), especially for margin-top; for others titles I usually employ "em" and for paragraphs always "em". For blockquotes, for left and right margins I also employ "%" (or vw) and depending on the type of blockquote, for top and bottom margin I can use either "em" or "%".

In my stylesheet, I always (or almost always) have:

body {
  font-size: 1em;
  ...
}

so that all font sizes are referenced to body and are consistent. This way, I can also change the text size of all elements in one place.

For images, if they are not full page, I give them a specific height (in "%" or "vh") and use SVG wrappers, this way they maintain their proportions even on small screens.

And regarding the screenshot you uploaded, you can make that same layout remain unchanged, even by changing the font size, also in a reflowable epub (of course, that page alone will not change, the rest will be affected by changes in font size).

[ElMiko]

Sorry, all. Wasn't very clear in my question...

I know that in a reflowable context, I can't make fixed formatting (except as an image). And I also know that the number of lines per screen changes depending on the size of the reader and the size of the screen.

What I was wondering is, given these facts, how do you prefer formatting source text that was materially (but not critically) dependent on SOME degree of positional formatting (as in the above-attached example).

My question regarding assuming default font sizes and screen sizes, wasn't meant to suggest that there IS a default font size or screen size, merely to wonder if (like phsyical books) ebook publishers/producers do (or should) assume an "ideal" font-size and layout. Obviously, physical publishers didn't/dont' have to worry about "screen" size as a variable, but they do have to consider user reading preferences (and accessibility) in setting their font sizes, right? And then, having done so, they select a font size, knowing it is not a one-size fits all solution: some people may need to wear glasses to comfortably read their books, while others may have to buy an entirely different version that is "large-print".

Similarly, an ebook producer might design a book with an idealized font-size/screen-size in mind, or at least a range. I mean, whether you realize it or not, you already are doing it. For example, if you have a reader who sets their font size to 500%, that's potentially going to change the readability of a given book, no matter how conservatively/simply you format it. At 500%, certain words may not fit on a screen, much less fit on it while including paragraph indents, thus making distinguishing paragraphs impossible for that reader. But I also suspect that most ebook producers are not assuming that a reader will set their font size to 500% on a 3-inch-wide screen using software that doesn't incorporate hyphenation. They are idealizing (even if its a range rather than a singular value) the reader's settings.

So, to be more explicit: given the example in the first post, what kinds of margins and font sizes would you assume for the three elements in order to maximize readability? Would you, for example, maintain some kind of left/right margins on the epigraphical text? Would you maintain a spacing difference between the main heading and subheading vs subheading and epigraphical text (not to mention font size and font family)? etc., etc., etc.

(EDIT: Oh, and regarding the epub2 vs epub3, i guess my question would be do you ever assume that it would be one or the other? or do you format for the least sophisticated format? or do you format for both?)

[phillipgessert]

I usually just consider the spacing relative to other elements, rather than spacing within a fixed page. So, in your example, how far the heading, subheading, and quotation should be from one another, not where they land on the page. I tend to crowd the top a little more than I would for print, and I might force a break if I really want to avoid weirdness.

So in your example, I'd probably drastically reduce the space above/below the subheading, and if I was feeling really fussy, I might also force a break before the quote.

[ElMiko]

@phillipgesser - Ahhh, interesting. Especially the inserted break before the epigraph. Would your fussiness be agnostic to the length of the epigraph, or would you be more likely to keep all three elements together if the epigraph were, say, half the length in the example?

Also, is there a particular reason you feel comfortable riding the upper "page" margins in ebooks? Is it a practical consideration or an aesthetic one? Or both? Or neither!?

[phillipgessert]

Originally Posted by ElMiko

@phillipgesser - Ahhh, interesting. Especially the inserted break before the epigraph. Would your fussiness be agnostic to the length of the epigraph, or would you be more likely to keep all three elements together if the epigraph were, say, half the length in the example?

Also, is there a particular reason you feel comfortable riding the upper "page" margins in ebooks? Is it a practical consideration or an aesthetic one? Or both? Or neither!?

I think that if I were concerned that the quote attribution might drift to a second page, or if the quotes were extremely variable in length throughout the book, I might kick the whole thing to a new page every time it appeared. The fussiness would be based on wanting to avoid as many weird splits as I could without having to deal with all kinds of little exceptions.

I let things sit kinda high for ebook because I want to avoid things landing south of visual center if I can. Since configurations are so variable, I figure "a little high" is a lot better than "a little low" because only the latter is more generally considered to be wrong.

[RbnJrg]

Originally Posted by ElMiko

So, to be more explicit: given the example in the first post, what kinds of margins and font sizes would you assume for the three elements in order to maximize readability? Would you, for example, maintain some kind of left/right margins on the epigraphical text? Would you maintain a spacing difference between the main heading and subheading vs subheading and epigraphical text (not to mention font size and font family)? etc., etc., etc.

(EDIT: Oh, and regarding the epub2 vs epub3, i guess my question would be do you ever assume that it would be one or the other? or do you format for the least sophisticated format? or do you format for both?)

I format for both, epub2 and epub3, but the epub3 format is richer in possibilities. Under epub3 you can achieve things that are impossible in epub2 and you can make it even easier. For example you can try to "duplicate" the layout of the image you uploaded by means of a flex-box. A freehand code (it could be much improved, it's just a hastily written draft) could be the following (the borders and colors are so you can see the blocks that make up the flex-box design; in case the user increases the font size, the text should grow only within the space of the assigned color):

1) XHTML:

  <div class="pageContainer">
    <div class="partTitle">
      <h2>PART II</h2>
    </div>

    <div class="subheadingContainer">
      <h1 class="subheading">Clever Subheading<br/>Goes Here</h1>
    </div>

    <div class="epigraphContainer">
      <p class="epigraphText">"This is a mini-epigraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat."<br/><span class="epigraphAuthor">—Ancient Dead Guy</span> <span class="epigraphBook">Book That Smart People Read</span></p>
    </div>
  </div>

2) CSS:

body {
    font-family: serif; 
    height: 90vh;
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
    border: 2px solid red;
}

.pageContainer {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    width: 100%; 
    height: 100%;
    background: orange;
}

.partTitle {
    font-size: 1.4em;
    font-weight: bold;
    text-align: center;
    height: 10%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: lightgreen;
}

.subheadingContainer {
    height: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    background: yellow;
}

.subheading {
    font-family: serif; 
    font-size: 2.5em;
    font-weight: bold;
    text-align: center;
    line-height: 1.1;
}

.epigraphContainer {
    height: 50%;
    width: 80%; 
    align-self: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: flex-start;
    background: lightblue;
}

.epigraphText {
    text-align: justify;
    font-size: 0.9em;
    text-align-last: left;
}

.epigraphAuthor, .epigraphBook {
    display: inline-block;
    width: 60%;
    margin-left: 40%;
    font-size: 0.9em;
}

.epigraphBook {
    font-style: italic;
}

3) THE OUTPUT:



Note that there is no single margin set (except for a margin:0 for body) and that all spacing between blocks is handled by the flex-box based on the assigned heights. There's no need for any calculations; the .css code handles everything.
Of course, you can't do this in epub2.

[ElMiko]

@RbnJrg - My limited understanding of epub3 is that if an epub2 application reads it, it will ignore epub3-specific language and render anything else that it can. How do you code for both when they have shared elements that require different values depending on whether it's being rendered in epub2 or epub3 applications?

@phillipgessert — I hadn't considered the potential impact of formatting consistency if you start breaking longer epigraphical text, but also have other similar "pages" with comparatively much shorter text blocks... Out of curiosity, would you prefer to break all the others for the sake of consistency (assuming they were all really short) or would you grit your teeth and live with the possibility-slash-likelihood that ONE of those epigraphical sections would split and run over onto the next page? Or is this kind of a game-time decision that depends on the weather and astrological alignments?

[RbnJrg]

Originally Posted by ElMiko

@RbnJrg - My limited understanding of epub3 is that if an epub2 application reads it, it will ignore epub3-specific language and render anything else that it can. How do you code for both when they have shared elements that require different values depending on whether it's being rendered in epub2 or epub3 applications?

The solutions for epub3 are better and more perfect than the solutions for epub2. So, if you only use the epub2 solution in an epub3 (this way you save yourself from writing extra code because what you include works everywhere), users whose e-readers support epub3 would have a reading experience inferior to what they could hope for.

To avoid this, I include both the epub2 and epub3 solutions in the same epub. This way, those who read on a modern device will get the best reading experience, while those whose devices only accept older code will be able to read the book satisfactorily but won't get the best out of it.

This is achieved by writing XHTML code for epub2, something like:

<div class="epub2Code>
   All the code for epub2 here...
</div>

and below XHTML code for epub3:

<div class="epub3Code>
   All the code for epub3 here...
</div>

and in the stylesheet:

.epub2Code {
   display: block;
}

.epub3Code {
   display: none;
}

@supports (display: grid) { /* Or any other property only available in epub3 */
.epub2Code {
   display: none;
}

.epub3Code {
   display: block;
}

In this way, under epub2 the code for epub3 remains hidden, while under epub3 the code for epub2 is not showed. There are other ways to add and activate code for epub3 but the above is good and generally works well (you have to be careful with ADE but, well... that's another story).

[ElMiko]

Fascinating. I didn't know about the @supports at-rule... I can see how that would be a real game changer.

EDIT: I've been rolling this around in my head for the last thirty minutes: Does your example above mean that—depending on the epub3 code you're trying to accommodate—the epub file might require having functionally the whole book duplicated inside so that it could toggle your at-rule? Or could you stack the two classes, and have the toggling still work as in:

<div class="epub3Code epub2Code">
   All the code for epub3 AND epub2 here...
</div>

[RbnJrg]

Originally Posted by ElMiko

...the epub file might require having functionally the whole book duplicated inside so that it could toggle your at-rule?

Yes, that is; mainly about how to handle images.

<div class="epub3Code epub2Code">
   All the code for epub3 AND epub2 here...
</div>

No, no of that way. But you could have:

<div class="myStyle">
    Your elements/blocks to be formated here
</div>

and in your .css stylesheet:

.myStyle { /* here the style for epub2 */
   display: block;
   margin-top: 3em;
   etc...
}

@supports(display: flex) { /* if this is true, then we are under epub3 */
   .myStyle { /* Here the style to be applied on epub3 */
       display: flex;
       margin-top: revert; /* or margin-top: 0; you'll see what is better, depends on each case */
       etc...
   }
}

So, in this case, the XHTML code is the same for both, epub2 and epub3, BUT the .css is different.

[ElMiko]

@RbnJrg — Of course... it was late. My brain had stopped working.

[Quoth]

Originally Posted by phillipgessert

I usually just consider the spacing relative to other elements, rather than spacing within a fixed page. So, in your example, how far the heading, subheading, and quotation should be from one another, not where they land on the page. I tend to crowd the top a little more than I would for print, and I might force a break if I really want to avoid weirdness.

So in your example, I'd probably drastically reduce the space above/below the subheading, and if I was feeling really fussy, I might also force a break before the quote.

Yes, you wrote that all better than I did.