Register Guidelines E-Books Today's Posts Search

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 08-07-2024, 02:31 AM   #1
AlanHK
Guru
AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.
 
AlanHK's Avatar
 
Posts: 677
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
letter-spacing and centring

I often use three asterisks to make a break between paragraphs.

At first, just

.stars {text-align:center;margin:1em 0;}
<div class="stars">***</div>


Then spaced then out with nbsps.

Then I thought to use letter-spacing:

.break0 {text-align:center; margin:1.5em 0;font-size:1.25em;letter-spacing:2em;}
<div class="break0">***</div>


But I noticed that it wasn't centred, either in Sigil preview or on Kindle after conversion.
The highlighted line in the screencap is noticeably left of page centre. (Text and page have zero margins.)
Selecting it includes a space on the right, which is not a separate character in the code. Normally, spaces at the end of a line are ignored for centring anyway.

So it seems that letter-spacing in CSS isn't really "space between letters", it's "space after letters". Or maybe they deem the EOL a letter.

I'm sure this is all perfectly correct behaviour, but it isn't what I wanted, so to nudge it back to the centre, I added padding:
.break {text-align:center; margin:1.5em 0;font-size:1.25em;letter-spacing:2em;padding-left:2em;}
That's the top line in the screencap.

Click image for larger version

Name:	letterstar.png
Views:	87
Size:	2.6 KB
ID:	210002

Offering this work-around in case anyone else is caught out.

Last edited by AlanHK; 08-07-2024 at 03:06 AM.
AlanHK is offline   Reply With Quote
Old 08-07-2024, 03:44 AM   #2
Jellby
frumious Bandersnatch
Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.Jellby ought to be getting tired of karma fortunes by now.
 
Jellby's Avatar
 
Posts: 7,539
Karma: 19001081
Join Date: Jan 2008
Location: Spaniard in Sweden
Device: Cybook Orizon, Kobo Aura
That's probably renderer-dependent. See https://stackoverflow.com/questions/...last-character (and https://www.w3.org/TR/css-text-3/#le...acing-property).

Last edited by Jellby; 08-07-2024 at 03:47 AM.
Jellby is offline   Reply With Quote
Old 08-07-2024, 04:26 AM   #3
AlanHK
Guru
AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.AlanHK ought to be getting tired of karma fortunes by now.
 
AlanHK's Avatar
 
Posts: 677
Karma: 929286
Join Date: Apr 2014
Device: PW-3, iPad, Android phone
Quote:
Originally Posted by Jellby View Post

And this from 2011: https://stackoverflow.com/questions/...element-in-css
A lot of weird workarounds there. Negative margins, indents, rtl text.

Anyway, it seems a very general effect and unlikely to be "fixed" if it has been tolerated for so long.

So take your choice of hacks to fix it.
AlanHK is offline   Reply With Quote
Old 08-07-2024, 04:46 AM   #4
Karellen
Wizard
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 1,403
Karma: 7000000
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
Also letter-spacing: is ignored in Libra2 and probably other models.
Karellen is offline   Reply With Quote
Old 08-07-2024, 06:14 AM   #5
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 76,956
Karma: 138256890
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by Karellen View Post
Also letter-spacing: is ignored in Libra2 and probably other models.
I know letter spacing is ignored in RMSDK. Is it really ignored in KePub?
JSWolf is offline   Reply With Quote
Old 08-07-2024, 06:41 AM   #6
Karellen
Wizard
Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.Karellen ought to be getting tired of karma fortunes by now.
 
Karellen's Avatar
 
Posts: 1,403
Karma: 7000000
Join Date: Sep 2021
Location: Australia
Device: Kobo Libra 2
Quote:
Originally Posted by JSWolf View Post
Is it really ignored in KePub?
I only use epub. No idea in KePub.
I'll try to remember that distinction in future.
Karellen is offline   Reply With Quote
Old 08-07-2024, 09:57 AM   #7
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,241
Karma: 19222221
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
I think letter-spacing adds that padding after each letter (not just between letters as is commonly understood) and that would be left or right of the letter based on the reading direction (rtl/ltr) of the language. The only time that is really noticeable is in this particular scenario where you are trying to center something.

When trying to control the spacing in a divider I've found that using word-spacing is more predictable than letter-spacing. You just need to add a space between each character to delineate the 'word'.
<div>*_*_*</div> ( _ means space )


However....
I would recommend using the horizontal rule <hr/> for chapter dividers, not <div>s. The accessibility standard requires the hr so that reading systems can tell when there is a break. It is really easy to style the hr... Yes I know that sounds weird but it is very simple to style the tag to show images and characters not just line height/width/thickness.

Here are a couple examples of using an image as well as characters and using word spacing for comparison:
Click image for larger version

Name:	Screenshot 2024-08-07 084017.png
Views:	70
Size:	37.3 KB
ID:	210005
Code:
CSS:
div {text-align:center; word-spacing:1.5em}

hr {border:none; margin:1em 0; text-align:center; word-spacing:1.5em}

/* using an image fleuron*/
hr.ChDiv1 {
  height:2em;
  background: transparent url("../Images/img_ChDiv.svg") no-repeat center;
  background-size: auto 100%;  
}
/* using symbols*/
hr.ChDiv2::after {content:'◆◆◆◆◆'}

hr.ChDiv3::after {content:'* * *'}

hr.ChDiv4::after {content:'♥♥♥'}
Code:
HTML:
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

  <hr class="ChDiv1"/>

  <p>Suspendisse fermentum nec mauris sit amet laoreet.</p>

  <hr class="ChDiv2"/>

  <p>Phasellus nec lorem dignissim, sodales lorem ac, luctus nulla.</p>

  <hr class="ChDiv3"/>

  <p>Donec viverra ut sem at ornare. Fusce neque augue, dignissim.</p>

  <hr class="ChDiv4"/>

  <p>Sed vehicula massa id vulputate mollis.</p>

  <div>♥ ♥ ♥</div>
edit: added colors to make it pretty

Last edited by Turtle91; 08-07-2024 at 10:06 AM.
Turtle91 is offline   Reply With Quote
Old 08-07-2024, 02:29 PM   #8
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 76,956
Karma: 138256890
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
I use a 40% 2px wide line for my section breaks.

Code:
hr {
  margin-top: 0.9em;
  margin-right: 40%;
  margin-bottom: 0.9em;
  margin-left: 40%;
  border-top: 2px solid;
}
JSWolf is offline   Reply With Quote
Reply


Forum Jump

Similar Threads
Thread Thread Starter Forum Replies Last Post
Letter-spacing kamanza ePub 18 08-12-2024 12:48 PM
Letter-spacing issue HHJT ePub 9 08-26-2019 10:40 AM
letter spacing errors JeremyBenson Kindle Formats 24 02-20-2013 08:04 PM
'letter-spacing' in Mobi hkdorama Kindle Formats 4 07-26-2010 07:35 AM


All times are GMT -4. The time now is 09:19 AM.


MobileRead.com is a privately owned, operated and funded community.