View Single Post
Old 08-05-2025, 08:08 PM   #9
RbnJrg
Wizard
RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.RbnJrg ought to be getting tired of karma fortunes by now.
 
Posts: 1,821
Karma: 8700631
Join Date: Mar 2013
Location: Rosario - Santa Fe - Argentina
Device: Kindle 4 NT
Quote:
Originally Posted by ElMiko View Post
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:

Code:
  <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:

Code:
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:

Click image for larger version

Name:	One1.jpg
Views:	14
Size:	45.2 KB
ID:	217320

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.

Last edited by RbnJrg; 08-05-2025 at 08:22 PM.
RbnJrg is offline   Reply With Quote