View Single Post
Old 01-21-2023, 01:09 PM   #7
MerlinMama
Evangelist
MerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beautyMerlinMama does all things with Zen-like beauty
 
MerlinMama's Avatar
 
Posts: 498
Karma: 32554
Join Date: May 2014
Location: Canada
Device: Kobo Sage
Quote:
Originally Posted by Quoth View Post
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:
Code:
<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.
MerlinMama is offline   Reply With Quote