[Mister L]

Originally Posted by JSWolf

With no CSS, the formatting gets in the way of reading. It makes it more difficult to read. There are things I don't like and do fix. I've seen eBooks where I could read as is even though there are some things I would fix. Thing is, with no CSS, the eBook is awful and unreadable. You can lose a lot. Bold/italic, section breaks, paragraph spaces too large, no embedded font (if it's needed or looks good), chapter titles can look like body text, centers, offset text, different font types (sans-serif and/or monospace), tables can be a mess, graphics not correct on screen or sometimes run off the screen, and other issue. So please don't say that an eBook that doesn't look good without CSS is because it's incorrectly coded. It's not. It's because the CSS is not there.

If you feel so strongly that an eBook can be readable without CSS, please post an eBook without CSS that you think is formatted well enough to be readable.

Emphasis mine. You're kind of making my point for me here. Bold and italic should never be lost if you turn off the CSS. Neither should titles. Graphics are another problem but we are not talking about images, we're talking about text, so that's off topic.

I happened to have prepared a file to illustrate this for a class so here are a couple of screen shots to compare plain unstructured text and semantically structured text. If you want to do the demonstration yourself here's the code, you can paste it into Sigil and see for yourself.

No CSS, no structure:

Spoiler:

<h1>Text with no semantic structure</h1>

<p>All the text below is in p tags. There is no CSS.</p>

<p>The tags used on this page are: p, span.</p>

<p>Main title (h1)</p>

  <p>Sub title (should be h2)</p>

  <p>Here is some body text. This text has no CSS style added and has not been structured with semantic hmtl tags. <span class="italic">This sentence has a totally useless span class="italic" added to it, but you wouldn't know it to look at it.</span></p>

  
    <p>1<span class="superscript">st</span> item of an ordered list</p>

    <p>2<span class="superscript">nd</span> item</p>

    <p>3<span class="superscript">rd</span> item</p>
 

  <p>Here's another subtitle (h2)</p>

<p>This is a blockquote. Blockquotes are useful for setting off citations from the main body text for instance. The blockquote element can be further styled with CSS.</p>


    <p>An un-ordered list item</p>

    <p>Another item</p>

    <p>A last item</p>

No CSS, semantic html:

Spoiler:

<h1>Text with semantic structure, no CSS</h1>

<p><i>The text on this page has been structured using semantic hmtl tags. <b>There is no CSS.</b></i></p>

<p><b>The tags used on this page are:</b> h1, h2, p, i, b, strong, em, blockquote, ol, ul, li, sup.</p>

  <h1 id="sigil_toc_id_1">Main title h1</h1>

  <h2 id="sigil_toc_id_2">Subtitle h2</h2>

  <p>Here is some body text. This text has <em>not</em> been styled with CSS however it will display the default html styles for <b>semantic html tags,</b> which makes it easy to identify the structure of the document. For instance you can see at a glance when something is <strong>important</strong> or has been <em>emphasized</em>. Obviously it can be made prettier with CSS but at least you can see at a glance the different elements like titles, lists, pull-quotes... not to mention bold and italic text.</p>

  <ol>
    <li>1<sup>st</sup> item of an ordered list</li>

    <li>2<sup>nd</sup> item</li>

    <li>3<sup>rd</sup> item</li>
  </ol>

  <h2 id="sigil_toc_id_3">Here's another subtitle h2</h2>

<blockquote>This is a blockquote. Blockquotes are useful for setting off citations from the main body text for instance. The blockquote element can be further styled with CSS</blockquote>

<ul>
    <li>An un-ordered list item</li>

    <li>Another item</li>

    <li>A last item</li>
  </ul>

Bonus activity, add this CSS to a couple of paragraphs or spans and make some literally unreadable text:

.colourblindpeoplecantreadthis {
     color: red;
     background-color: green;
}

and try putting all your notes in this style:

.thistextiswaytoosmall {
     font-size: 0.25em;
}

Obviously, nice CSS styles on top of properly structured html are much better than plain html. But, bad CSS exists, unfortunately, and proper semantic html without CSS styles will let you immediately understand the structure of the text and be completely readable, especially since most reading apps will let you choose a font you like, adjust line-spacing and margins, etc.