Calibre paragraph breaks issue

[ebookscovers]

Hi there. I’m looking for a quick ePub ebook solution. Where there is a text break the author wants a little skull symbol inserted which is an actual font to add a nice touch to the book. I don’t want to use the font as I figure there will be issues along the way on certain devices and through the conversion process etc. To avoid font issues I want to convert the skull font into a little jpg I can use on the specified text breaks throughout. But That way I would have to manually put in each skull image text break. Is there a faster way? And does the skull image break have to be a separate component with the chapter or can it be inserted within the chapter text with a wraparound ? Here’s hoping

[pdurrant]

Use a PNG, not a JPG. Better still, use a vector SVG (if we're talking about ePub only. If you're also targeting Kindle, you'll want a PNG).

As for the coding, I not quite sure what you're asking. the image would be included only once, and then referenced wherever you use it.

For use in text-breaks, presumably you already have text-break elements. It's just a question of inserting it in those.

[ebookscovers]

Thanks for reply. I’ll go with png format. Will be putting in text breaks. Like you said use once then reference wherever it’s used. What code template would I use for referencing or copying pasting throughout where required? I haven’t inserted text break elements as yet. David

[theducks]

Moderator Notice
Moving to EPUB as this has nothing to do with recipes in Calibre

Fleurons are just another Block, typically centered with top and bottom margins.

[Turtle91]

example:

HTML:
<p>Last para before text break.</p>

<div class="TxtBrk"><img alt="" src="../Images/skull.png"></div>

<p>First para after text break.</p>


CSS:
p              {text-indent:1.2em}
div.TxtBrk     {margin:2em auto; text-align:center}
div.TxtBrk img {width:10%; max-width:100px}
div.TxtBrk + p {text-indent:0}

Where you set the actual width of the image as the max-width in pixels and the width in percentage of the screen you want the image to fill.

You can style the first paragraph after the break to look different than the normal/standard paragraph by using the div.TxtBrk + p css.

Please - only put one skull.png image in your ebook...it's amazing how many books I've seen with 200+ copies of the same image just because it is used 200+ times in the book...

[theducks]

Originally Posted by Turtle91

example:

HTML:
<p>Last para before text break.</p>

<div class="TxtBrk"><img alt="" src="../Images/skull.png"></div>

<p>First para after text break.</p>


CSS:
p              {text-indent:1.2em}
div.TxtBrk     {margin:2em auto; text-align:center}
div.TxtBrk img {width:10%; max-width:100px}
div.TxtBrk + p {text-indent:0}

Where you set the actual width of the image as the max-width in pixels and the width in percentage of the screen you want the image to fill.

You can style the first paragraph after the break to look different than the normal/standard paragraph by using the div.TxtBrk + p css.

Please - only put one skull.png image in your ebook...it's amazing how many books I've seen with 200+ copies of the same image just because it is used 200+ times in the book...

Yep Very annoying to find (and it bloats file size. which might cost you for download charges)

[JSWolf]

Originally Posted by Turtle91

example:

HTML:
<p>Last para before text break.</p>

<div class="TxtBrk"><img alt="" src="../Images/skull.png"></div>

<p>First para after text break.</p>


CSS:
p              {text-indent:1.2em}
div.TxtBrk     {margin:2em auto; text-align:center}
div.TxtBrk img {width:10%; max-width:100px}
div.TxtBrk + p {text-indent:0}

Where you set the actual width of the image as the max-width in pixels and the width in percentage of the screen you want the image to fill.

You can style the first paragraph after the break to look different than the normal/standard paragraph by using the div.TxtBrk + p css.

Please - only put one skull.png image in your ebook...it's amazing how many books I've seen with 200+ copies of the same image just because it is used 200+ times in the book...

That is ugly formatted code. I cannot stand CSS code that's all on one line.

[theducks]

Originally Posted by JSWolf

That is ugly formatted code. I cannot stand CSS code that's all on one line.

But it is valid! The render engine does not care

I prefer readability over saving a couple of byte used by CR LF's

[GrannyGrump]

Just another thought about the skull decoration ---
Depending on how it displays proportionate with the font, it might be preferable to code the width in em instead of percentage of screen width. If someone is reading on a very large screen with a smallish font, 10% would be enormous in comparison the text.

I usually put this kind of decoration into a custom font, so that it is actually a font character, but when using a small image, I use ems. (except for old Mobi7, where I think you MUST set it in pixels)

div.TxtBrk img
{
width: 4em;
max-width: 100px;
}

[stumped]

beware of ( and test if possible) . moon+ reader will sometimes grotesquely enlarge such breaks IF they have been inserted as pictures.
I can't be more precise, because when it happens in books I am reading , I go in and zap the offending code !

[JSWolf]

Originally Posted by theducks

But it is valid! The render engine does not care

I prefer readability over saving a couple of byte used by CR LF's

I know it's valid. It's just not all that easy to read sometimes.

[DNSB]

Originally Posted by theducks

But it is valid! The render engine does not care

I prefer readability over saving a couple of byte used by CR LF's

Originally Posted by JSWolf

I know it's valid. It's just not all that easy to read sometimes.

So you both agree that it's valid but you prefer a more human readable layout. Add me to the list of those who agree with that PoV.

[stumped]

I hypothese that while a render engine may not "care" about over-complex code, it could slow things down when it has to decipher lots of it, via a low powered e-ink reader cpu ?

i can recall instances - back wen I had the old Sony e-readers, that they would sometimes glitch on awful code constructs, and were happier after I stripped then out.

[Turtle91]

Originally Posted by JSWolf

That is ugly formatted code. I cannot stand CSS code that's all on one line.

I will certainly add that to the list I keep of things you cannot stand...and file it appropriately...

Spoiler:

1) This was an example of inserting an image as a scene break - not as "approved by JSWolf CSS formatting".

2) If you think "{width:10%; max-width:100px} or {margin:2em auto; text-align:center}" is overly complex and unreadable, then you just need more practice...the little semi-colon thingie means there are different commands on the same line - which the computer has no issues reading whatsoever - neither do I.

3) I do not care about the minuscule number of bytes saved by not using CR/LF...it is an organizational thing for me. I use the same standard CSS file as a baseline. I know that all the CSS on the page is correct...I'm not looking to decipher what each item does...that's why I name the selectors appropriately in the first place. I don't like to scroll through page after page of css while I'm looking for something. The selectors are all nice and organized and lined up on the left side of the screen for me to quickly find the one I care about...then I can edit it as, and if, necessary. I have no trouble identifying the semicolon and realizing that it means different styles... It's a shame that you do.

4) When I am done editing I use a neat little (Sigil) plugin "cssRemoveUnusedSelectors" that ...wait for it ... Removes Unused Selectors ... AND ... Reorganizes the CSS into a format that you would approve of...because it's "pretty"??

Originally Posted by GrannyGrump

Just another thought about the skull decoration ---
Depending on how it displays proportionate with the font, it might be preferable to code the width in em instead of percentage of screen width. If someone is reading on a very large screen with a smallish font, 10% would be enormous in comparison the text.

I usually put this kind of decoration into a custom font, so that it is actually a font character, but when using a small image, I use ems. (except for old Mobi7, where I think you MUST set it in pixels)

div.TxtBrk img
{
width: 4em;
max-width: 100px;
}

That's a great idea - I'll give it a try - Thanks!