[RbnJrg]

Originally Posted by JSWolf

The eBook I mentioned and posted CSS from is simply formatted and does not need such complex code that StandardEbooks use. Also, you won't use more complex code where it's needed and not where it's not.

Yes, I can understand that, we are not going to kill a mosquito with a cannon. But even ebooks that are simply formatted, we can use advanced code with advantage. I give you an example, look at these pictures:



and after increasing the font-size:



Those pictures are taken from Kobo for Android. And they represent layouts very common. How do you code that in a simpler way? One line of text at top, one line at bottom and a perfect centered line (and the layout is retained no matter the font size). The simpler code is:

1) In the xhtml:

  <div class="block">
    <p>Line One</p>

    <p>Line Two</p>

    <p>Line Three</p>
  </div>

Simpler than that?

2) In the .css:

p {
   margin: 0;
}

.block {
   display: flex;
   flex-flow: column nowrap;
   justify-content: space-between;
   align-content: center;
   align-items: center;
   height: 99vh;
   border: 2px solid red;
   margin: 0;
}

.block p:nth-child(2n+1) {
   padding: 5% 0;
}

.block p:nth-child(2) {
   font-size: 2em;
   font-weight: bold;
}

With css2 properties you never can get the same perfect output. Even for simple layouts, you can use "advanced" (is not advanced at all) code to get optimal results.