View Single Post
Old 08-07-2024, 01: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: 681
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:	124
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 02:06 AM.
AlanHK is offline   Reply With Quote