Mobileread
Letter-spacing issue
#1  HHJT 08-24-2019, 07:56 AM
Hi,

Posted this on the Kobo forum yesterday.

When I give extra letter-spacing the space between letters gets larger, but the space between two words disapears, creating:

C H A P T E R O N E

Code
<h1><span class="spacing">CHAPTER ONE</span></h1>
span.spacing {letter-spacing:5px}
I’ve tried span.spacing {letter-spacing:.25em} or including the spacing in the tag itself. Didn’t work.

Only my Kobo Glo does this, by the way. iBook and Calibre no problems...
Reply 

#2  davidfor 08-24-2019, 09:07 AM
A quick test here and the letter spacing works with kepubs, but not epubs. Different renderers are used for the two formats. The Adobe RMSDK is used for epubs. It probably means all other ereaders or apps that use it won't use it. ADE v2.0.1 doesn't use it, which is consistent with the RMSDK.
Reply 

#3  Turtle91 08-24-2019, 09:47 AM
Could you use a fall-back with greater word-spacing?
Reply 

#4  HHJT 08-24-2019, 10:03 AM
Thanx for replying.

The document was made in OO writer, and converted to epub with writer2xhtml. In Sigil I make last minute replacement when needed. I check my epubs with iBooks and ADE. You’re right: ADE doesn’t recognize letter-spacing. But Ibooks does and so does the Calibre ebook viewer. I use Calibre to upload te pub to my Kobo Glo. I do not use ADE.

I know letter-spacing works on kepub. I can see the spacing between letters. The spacebars are discarded some how.
Reply 

#5  Turtle91 08-24-2019, 10:31 AM
Multiple normal spaces are condensed into 1 space on all renderers that I'm aware of - and any whitespace between paragraph tags is ignored.
You would need to use letter-spacing and/or word-spacing in your CSS to adjust the distance.
If your renderer does not support that CSS you can use some work-arounds like adding non-breaking-spaces (&nbsp; or & #160; ).

for example:
Hello (no spaces)
H e l l o (single space)
H& #160; e& #160; l& #160; l& #160;* o (non-breaking space PLUS single space)
H&nbsp;&nbsp;&nbsp;e&nbsp;&nbsp;&nbsp;l&nbsp;&nbsp ;&nbsp;l&nbsp;&nbsp;&nbsp;o (multiple non-breaking-spaces)

edit: don't put a space between the &#...I couldn't keep the forum from converting it to an actual space even when I tried using noparse.


Of course, you could also get a different font that has larger space between the letters... but that's going a bit too far, don't you think?
Reply 

#6  RbnJrg 08-24-2019, 04:43 PM
Quote HHJT
Hi,

Posted this on the Kobo forum yesterday.

When I give extra letter-spacing the space between letters gets larger, but the space between two words disapears, creating:

C H A P T E R O N E

Code
<h1><span class="spacing">CHAPTER ONE</span></h1>
span.spacing {letter-spacing:5px}
I’ve tried span.spacing {letter-spacing:.25em} or including the spacing in the tag itself. Didn’t work.

Only my Kobo Glo does this, by the way. iBook and Calibre no problems...
On WebKit render engines, works fine. But as workaround, try using also the property "word-spacing". For example;

Code
span.spacing { letter-spacing: 5px; word-spacing: 10px;
}
But of course, ADE (under epub2) doesn't support those properties so you'll be forced to use "&nbsp;" to simulate separations.
Reply 

#7  lumpynose 08-24-2019, 04:50 PM
Quote Turtle91
edit: don't put a space between the &#...I couldn't keep the forum from converting it to an actual space even when I tried using noparse.
Put the noparse only around the & and # with the number right after the /noparse, &#160. Now if I could only remember the word noparse on the rare cases when I need to use it.
Reply 

#8  Turtle91 08-24-2019, 07:12 PM
Quote lumpynose
Put the noparse only around the & and # with the number right after the /noparse, &#160. Now if I could only remember the word noparse on the rare cases when I need to use it.
Ahh, thanks! I wouldn't have figured that out!!
Reply 

#9  lumpynose 08-24-2019, 09:34 PM
Quote Turtle91
Ahh, thanks! I wouldn't have figured that out!!
Yeah, me neither. I forget who here did it but I saw it when I quoted their message. That was also when I learned about the noparse tag.
Reply 

#10  HHJT 08-26-2019, 09:40 AM
Quote RbnJrg
On WebKit render engines, works fine. But as workaround, try using also the property "word-spacing". For example;

Code
span.spacing { letter-spacing: 5px; word-spacing: 10px;
}
But of course, ADE (under epub2) doesn't support those properties so you'll be forced to use "&nbsp;" to simulate separations.
That solved my problem!
Reply 

Today's Posts | Search this Thread | Login | Register