0

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.

Johannes
  • 64,305
  • 18
  • 73
  • 130
Lilster
  • 433
  • 1
  • 4
  • 8
  • 1
    Note: `
    ` does not use or need a closing slash and never has.     – Rob Dec 18 '17 at 23:01
  • Maybe you could let it as it is. After all, people won't see this extra space, don't you think ? (this won't help you to resolve the problem... but to reconsider if there is any) – Cedric Dec 18 '17 at 23:02
  • @Rob in XHTML, it did - hr had a closing slash. – Cedric Dec 18 '17 at 23:04
  • @Cedric Yes but this is HTML. XHTML is XML. – Rob Dec 18 '17 at 23:05
  • Sorry, error in my post the kindle ebook format does expect XHTML and hence the slash on the hr. I called this HTML as when playing to get this to work I just save as HTML. – Lilster Dec 19 '17 at 07:55

1 Answers1

1

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>
Johannes
  • 64,305
  • 18
  • 73
  • 130
  • Thanks for the suggestion, works in browser but kindle shows no separator at all with this CSS. – Lilster Dec 19 '17 at 08:00
  • Just for info I should mention, this also works OK if you add the p::after space character fudge.. So if I do live with this as being a strange kindle only issue I will use your version, thanks ;) – Lilster Dec 19 '17 at 13:38