Supported HTML/CSS for text breaks?

[MerlinMama]

If this does not belong here, my apologies.

I have been trying to get the coding right for fixing up the text breaks in my personal reads, but they don't show up in my Kobo (Sage) and I wonder if I'm making a mistake (shows up in the browser when I test, but still) or if it just isn't supported in Kobo Ereaders.

I should specify that the text appears, but the content from the '::before' and '::after' pseudo elements does not

My CSS:

Spoiler:

.pgb {
	font-family: "Cooper Black", serif;
	font-size: 110%; 
	text-align: center;
}
.pgb::before {
	display: block;
	position: relative;
	content: '*~=^;^=~*';
	font-family: Georgia, serif;
}
.pgb::after {
	display: block;
	position: relative;
	content: '*~=^;^=~*';
	font-family: Georgia, serif;
}

Don't think it's needed, but my HTML:

Spoiler:

<p class="pgb">London, England<br>
June 1873</p>

If there is a different way to do this that will show in Kobo Ereaders (other than inserting the 'content' in the text each time), I would love to hear it.

[enuddleyarbl]

The best spot for that post would be the epub forum:
https://www.mobileread.com/forums/fo...play.php?f=179
But, I just tried your CSS and it works fine in Calibre's editor and viewer. I haven't put it on my Kobo to check it there, though.

EDIT: I added it (as a kepub) to my Kobo Forma and it works there in the default reader.

[MerlinMama]

Originally Posted by enuddleyarbl

The best spot for that post would be the epub forum:
https://www.mobileread.com/forums/fo...play.php?f=179
But, I just tried your CSS and it works fine in Calibre's editor and viewer. I haven't put it on my Kobo to check it there, though.

EDIT: I added it (as a kepub) to my Kobo Forma and it works there in the default reader.

Ok thank you. Maybe it doesn't work because I have it as Epub. I'll try that forum.

[jackie_w]

As far as I know the Adobe reading app used for standard epubs on a Kobo does not support any pseudo elements. So you would need to send all your books as kepub to have any chance of it working.

I haven't tested it in kepub myself but it looks like @enuddleyarbl has. I do know from first-hand experience that kepubs support pseudo elements ::first-letter and ::first-line but they are the only ones I've ever tried.

[MerlinMama]

Originally Posted by jackie_w

As far as I know the Adobe reading app used for standard epubs on a Kobo does not support any pseudo elements. So you would need to send all your books as kepub to have any chance of it working.

I haven't tested it in kepub myself but it looks like @enuddleyarbl has. I do know from first-hand experience that kepubs support pseudo elements ::first-letter and ::first-line but they are the only ones I've ever tried.

Thank you. I had tried a pseudo element before for something else and it *seemed* to work, I'll have to see for sure now...

[Quoth]

Originally Posted by MerlinMama

I have been trying to get the coding right for fixing up the text breaks in my personal reads, but they don't show up in my Kobo (Sage) and I wonder if I'm making a mistake (shows up in the browser when I test, but still) or if it just isn't supported in Kobo Ereaders.

This is too complicated. Just have the break text in html
<p class="a-break">- o -</p>

(or * * * which is common)

The -o- can be an image (fleuron) with tag and class

in CSS
.a-break {
margin-top: <desired space>;
margin-bottom: <desired space>;
margin-left: 0;
margin-right 0;
text-align: center;
}

Any enclosed image or hr will be centred.
for the <img or <hr put class="img-break"
and then
.img-break {
height: auto;
width: <desired size>%
}

You can include a padding-top: if you want a top of new page margin.

This will work for epub and epub2 converted by Calibre to old mobi, dual mobi, azw3, kfx, epub3 and kepub.

[MerlinMama]

Originally Posted by Quoth

This is too complicated. Just have the break text in html
<p class="a-break">- o -</p>

(or * * * which is common)

The -o- can be an image (fleuron) with tag and class

in CSS
.a-break {
margin-top: <desired space>;
margin-bottom: <desired space>;
margin-left: 0;
margin-right 0;
text-align: center;
}

Any enclosed image or hr will be centred.
for the <img or <hr put class="img-break"
and then
.img-break {
height: auto;
width: <desired size>%
}

You can include a padding-top: if you want a top of new page margin.

This will work for epub and epub2 converted by Calibre to old mobi, dual mobi, azw3, kfx, epub3 and kepub.

Thank you, but not what I'm hoping for. If I can't figure out something similar to what I was trying with the pseudo elements, I'll just keep on with how I'm currently doing it in HTML:

Spoiler:

<p class="center">*~ =^;^= ~*<br/>
<span class="pgb">London, England<br/>
June 1973</span><br/>
*~ =^;^= ~*</p>

Not the most elegant, but it works, and I'm still learning.

[Karellen]

FWIW, this is what I use.

I prefer a cleaner look without fleurons and other break type images. I know some users don't like this because "it does not convert well to text files"... but to that I say... why would I ever want to convert to text or other file types

Spoiler:

PHP Code:

.scene {
  padding-bottom: 0.01em;
  padding-top: 2em;
  text-indent: 0;
}
.firstletterscene {
  font-size: 1.5em;
  line-height: 1em;
} 


In the body it looks like this...

Spoiler:

PHP Code:

  <p class="scene"><span class="firstletterscene">B</span>obbie sat in the galley, 


[DNSB]

Personally, I use something very similar to what Quoth posted. It works on pretty much every renderer which the majority of the people I've formatted ebooks for prefer. All too often, simple is better than better.

“Simplicity is the ultimate sophistication.” — Leonardo da Vinci

[enuddleyarbl]

One other thing about your OP:

<p class="pgb">London, England<br>
June 1873</p>

You're missing a closing "/" on that <br> (should be <br/>). Again, it all works on all my stuff. But, I'm wondering if that could be giving you issues on the Kobo with an epub. Unless it's just a typo here, you might try fixing that and trying it on the Kobo again.

Sorry I didn't notice it earlier. I was playing with the same document and ran across it when I did a Check Book.

[Quoth]

I'd only use a <br /> in multiline headings, like chapters, that otherwise would wrap badly. Then the multiple lines are one line/entry in any system TOC building.

You might be tempted to use <br/> between lines in a verse of a poem etc, but a "poem first line of verse", "poem body line" and optionally a "poem end of verse" set of styles is better idea.

[JSWolf]

Originally Posted by enuddleyarbl

The best spot for that post would be the epub forum:
https://www.mobileread.com/forums/fo...play.php?f=179
But, I just tried your CSS and it works fine in Calibre's editor and viewer. I haven't put it on my Kobo to check it there, though.

EDIT: I added it (as a kepub) to my Kobo Forma and it works there in the default reader.

There is no default Reader on Kobo. There are two different programs for reading eBooks and neither is the default.

[JSWolf]

The topic is incorrect. This is not a text break or a page break. This is a marker for a section break.

This is what I use to denote a section break. It works in ePub and KePub.

CSS

hr {
  margin-top: 1em;
  margin-right: 40%;
  margin-bottom: 0.9em;
  margin-left: 40%;
  border-top: 2px solid;
}
.noindent {
  text-indent: 0;
}

HTML

<p>Last paragraph of this section.</p>
<hr/>
<p class="noindent">This is the first paragraph of the this section.</p>

[Quoth]

Yes, it's a section break or scene break and need not have text or image. The CSS for a first paragraph at a scene/section break can have no indent and a top margin and top padding instead of explicit text or image to show a break.

[JSWolf]

Originally Posted by Quoth

Yes, it's a section break or scene break and need not have text or image. The CSS for a first paragraph at a scene/section break can have no indent and a top margin and top padding instead of explicit text or image to show a break.

Before I switched how I did section breaks, I used a padding-top: 2em; That worked very well. It even carried over to the next page. Then the next paragraph had no indent.