CODEWITHSUNDEEP
csskindle
Lilster
Lilster

Reputation: 433

CSS for fiction ebook

I am creating a fiction ebook using plain html as the source files for the chapters of the book. I would like to keep the html as vanilla as possible and use CSS for the formatting. Most of the book just needs an indent for any paragraph following a paragraph and every <hr /> tag should display as a scene break, e.g. 3 * center-aligned.

This all works fine in JSFiddle and in chrome.

p {
  margin: 0rem;
  text-indent: 0rem;
}

p + p {
  text-indent: 1.5rem;
}

hr {
  visibility: hidden;
  text-align: center;
  overflow: visible;
  margin-top: 2em;
  margin-bottom: 2em;
}

hr::after {
  visibility: visible;
  content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>

but when I copy this to the Amazon ebook preview app I need this extra redundant looking CSS for the ***'s to appear ?

p::after { 
    content: " "
}

Can anyone help identify why this might be needed in the ebook ? I don't want to have to tag a useless space on to the end of every paragraph to make this work. Thanks in advance.

Upvotes: 0

Views: 232

Answers (1)

Johannes
Johannes

Reputation: 67748

I would avoid the visibility: visible vs. hidden combination in the hr and its pseudo element: You can simply apply border: none; to the hr to avoid the display of the horizontal line itself. This might also help with your other problem.

p {
  margin: 0rem;
  text-indent: 0rem;
}

p + p {
  text-indent: 1.5rem;
}

hr {
  text-align: center;
  border: none;
  margin-top: 2em;
  margin-bottom: 2em;
}

hr::after {
  content: "* * *";
}
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>
<hr />
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean a nunc sit amet ipsum consectetur blandit. Donec vehicula commodo ante vel luctus. Aenean at lobortis velit, quis ultrices orci.</p>

Upvotes: 1

Related Questions