How to get font size working in ePub?

JSWolf · 12-12-2014, 11:25 AM

I've created a test ePub so I can see different font sizes so I can better customize the font slider to what I prefer. The ePub displays as expected with ADE. But on the Kobo, it is all the same font size. How can I get it to actually display with different font sizes? How can I get the font size slider to stop overriding my styles?

I've attached the ePub in case anyone can help. Thanks.

GeoffR · 12-12-2014, 01:21 PM

There is no way to turn off the font-size slider, it is always set to something, so I think all you can do is set it to a known font size and calculate your pixel font sizes relative to the known base size.

For example, if you set the slider to size 50, then a base font size of 200% will corespond to 100 pixels, and so a paragraph font size of 1% should correspond to a of size of 1px.

Code:

<body style="font-size:200%;">
<p style="font-size:10%;">10 pixel font.</p>
<p style="font-size:20%;">20 pixel font.</p>

(On the unpatched firmware, size 50 is position 20 on the 24-position slider. Edit: I'm assuming the slider sizes are in pixels, but I'm not certain of that.)

JSWolf · 12-12-2014, 01:32 PM

Well, that sucks. There needs to be a way to specify font sizes other then relative to the current font size.

pdurrant · 12-12-2014, 03:09 PM

Quote:

Originally Posted by JSWolf

Well, that sucks. There needs to be a way to specify font sizes other then relative to the current font size.

Why? Why do you think an ebook creator knows better than me about how big the fonts displayed on my ebook reader should be in absolute terms?

DNSB · 12-12-2014, 03:18 PM

Quote:

Originally Posted by JSWolf

Well, that sucks. There needs to be a way to specify font sizes other then relative to the current font size.

You used to be able to specify absolute font sizes using pixels (px) or points (pt) to specify them. CSS3 redefined those two to proportional as well so when you zoomed a page in your browser, they changed proportionately. Though I have to wonder why you started at 1px -- it's a bit hard to display text when you have 1 pixel to draw the entire character.

DNSB · 12-12-2014, 03:20 PM

Quote:

Originally Posted by pdurrant

Why? Why do you think an ebook creator knows better than me about how big the fonts displayed on my ebook reader should be in absolute terms?

I've owned two ebooks that used pixels to define font size. Looked okay on my original Kobo ereader but too small on my Glo and way too small on my Aura HD.

JSWolf · 12-12-2014, 03:41 PM

Quote:

Originally Posted by pdurrant

Why? Why do you think an ebook creator knows better than me about how big the fonts displayed on my ebook reader should be in absolute terms?

But one issue will be pseudo small-caps. A lot of CSS for small caps is specifying a font size of 7em or .8em. Also, I've seen a lot of CSS code that uses .8em instead of small for a font size and if I'm not mistaken, the Kobo will display these CSS styles in the same size as the body font.

JSWolf · 12-12-2014, 03:46 PM

Quote:

Originally Posted by DNSB

You used to be able to specify absolute font sizes using pixels (px) or points (pt) to specify them. CSS3 redefined those two to proportional as well so when you zoomed a page in your browser, they changed proportionately. Though I have to wonder why you started at 1px -- it's a bit hard to display text when you have 1 pixel to draw the entire character.

I started at 1px because I was just curious to see how it looked. I was wondering how small I could get before I could actually read the text (though probably not all that comfortably).

The thing is, I cannot get any absolute font size to work. px, em, pt all fail to show a different font size. Kobo has gone too far in overriding the font size.

I see a lot of code that uses a p with a style like and in .chapter is a font size of say 1.5em which might not display as 1.5em and thus, the chapter titles will look and be off.

jackie_w · 12-12-2014, 04:53 PM

Quote:

Originally Posted by JSWolf

But one issue will be pseudo small-caps. A lot of CSS for small caps is specifying a font size of 7em or .8em. Also, I've seen a lot of CSS code that uses .8em instead of small for a font size and if I'm not mistaken, the Kobo will display these CSS styles in the same size as the body font.

I've found I get the best, most predictable results on all the readers I've used (Kobo, Sony, Pocketbook, Android apps) by:

only specify font-size in em units (% should also work)
if the main paragraph class contains a font-size, remove it. Also remove font-size from any other css class which shares that particular font-size value. This results in the font-size slider properly controlling normal body text
only ever allow font-size css in classes which are supposed to be different from the normal body text, e.g.
- headings (font-size: 1.5em)
- pseudo smallcaps (font-size: 0.75em)
I do always add font-size:1em to whatever class corresponds to the <body...> tag, to normalise all the sizes lower down the hierarchy

It works fine. Whenever I change the font-size slider everything scales in proportion.

Have you really been editing your Sony epubs in hard-coded px units, like this test epub, all these years?

JSWolf · 12-12-2014, 05:12 PM

Quote:

Originally Posted by jackie_w

I've found I get the best, most predictable results on all the readers I've used (Kobo, Sony, Pocketbook, Android apps) by:

only specify font-size in em units (% should also work)
if the main paragraph class contains a font-size, remove it. Also remove font-size from any other css class which shares that particular font-size value. This results in the font-size slider properly controlling normal body text
only ever allow font-size css in classes which are supposed to be different from the normal body text, e.g.
- headings (font-size: 1.5em)
- pseudo smallcaps (font-size: 0.75em)
I do always add font-size:1em to whatever class corresponds to the <body...> tag, to normalise all the sizes lower down the hierarchy

It works fine. Whenever I change the font-size slider everything scales in proportion.

Have you really been editing your Sony epubs in hard-coded px units, like this test epub, all these years?

I created that ePub so I can decide if I want to change the values of the font size slider in the patch. I use mostly font sizes by name i.e., small, large, x-large, etc. But when the publisher specifies a size and it's not a problem with the size, I usually leave it as is and its usually in em.

I'll give your recommendations a try. Thanks.

pdurrant · 12-12-2014, 05:16 PM

Quote:

Originally Posted by JSWolf

But one issue will be pseudo small-caps. A lot of CSS for small caps is specifying a font size of 7em or .8em. Also, I've seen a lot of CSS code that uses .8em instead of small for a font size and if I'm not mistaken, the Kobo will display these CSS styles in the same size as the body font.

Pseudo SMALL-CAPS is surely an example where a relative size is essential! If the Kobo renderer fails to work with fractional em sizes, that is a fault with the renderer, not with the Epub specification.

jackie_w · 12-12-2014, 05:27 PM

Quote:

Originally Posted by JSWolf

I created that ePub so I can decide if I want to change the values of the font size slider in the patch. I use mostly font sizes by name i.e., small, large, x-large, etc. But when the publisher specifies a size and it's not a problem with the size, I usually leave it as is and its usually in em.

I'll give your recommendations a try. Thanks.

The main thing with font-size in the Patcher is to make sure that the 24 values you pick increment in steps of 1, so you get fine control - no nasty jumps in all the wrong places like the unpatched fw. In case it helps I've started mine at 22 and finished at 45. In reality I probably only use a few of them to allow for the fact that some fonts are bigger than others. If you're always using Charis you probably need even less.

Regarding using small, large etc. I'm not sure how this works in a nested hierarchy. I noticed very early in my ereader life that calibre conversions always changed them to ems and I thought Kovid normally takes line-of-least-pain-choices, who am I to argue

murg · 12-12-2014, 08:12 PM

Quote:

Originally Posted by JSWolf

But one issue will be pseudo small-caps. A lot of CSS for small caps is specifying a font size of 7em or .8em. Also, I've seen a lot of CSS code that uses .8em instead of small for a font size and if I'm not mistaken, the Kobo will display these CSS styles in the same size as the body font.

I think you are mistaken. I have my set to .7em in the CSS and it displays properly.

JSWolf · 12-12-2014, 08:40 PM

Quote:

Originally Posted by murg

I think you are mistaken. I have my set to .7em in the CSS and it displays properly.

SOME TEXT will display at a smaller size even if the .7em you've defined doesn't work.

Try the following and see if it works...

CSS

Code:

.small {
font-size: .7em;
}

XML

Code:

<p>Some text. <span class="small">SOME MORE TEXT</span>. Even more text.</p>

I have a feeling it won't work.

jackie_w · 12-12-2014, 09:04 PM

Quote:

Originally Posted by JSWolf

SOME TEXT will display at a smaller size even if the .7em you've defined doesn't work.

Try the following and see if it works...

CSS

Code:

.small {
font-size: .7em;
}

XML

Code:

<p>Some text. <span class="small">SOME MORE TEXT</span>. Even more text.</p>

I have a feeling it won't work.

I use code similar to this all the time. It does work. Are you sure you've actually tried it?

BTW I think murg may have meant he uses the ... tags rather than the ... tags. But both should work exactly the same on the Kobo if the css is

Code:

small, .small {font-size: 0.7em}

12-12-2014, 01:21 PM	#2
GeoffR Wizard Posts: 3,821 Karma: 19162882 Join Date: Nov 2012 Location: Te Riu-a-Māui Device: Kobo Glo	There is no way to turn off the font-size slider, it is always set to something, so I think all you can do is set it to a known font size and calculate your pixel font sizes relative to the known base size. For example, if you set the slider to size 50, then a base font size of 200% will corespond to 100 pixels, and so a paragraph font size of 1% should correspond to a of size of 1px. Code: <body style="font-size:200%;"> <p style="font-size:10%;">10 pixel font.</p> <p style="font-size:20%;">20 pixel font.</p> (On the unpatched firmware, size 50 is position 20 on the 24-position slider. Edit: I'm assuming the slider sizes are in pixels, but I'm not certain of that.) Last edited by GeoffR; 12-12-2014 at 01:24 PM. Reason: Assuming slider sizes are in pixels

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
CSS not working (specifically bold & font size)	kaonevar	Editor	10	10-10-2014 12:47 AM
Epub > Epub conversion changes font size.. why?	OllieDixon	Conversion	2	03-31-2014 02:30 AM
Determine font and font size on incoming epub?	peaceridge	Calibre	4	01-30-2012 03:35 PM
More on working around the font-size issue	billingd	Kobo Reader	13	06-25-2010 08:49 PM
Base Font Size not Working	Colaveare	Calibre	0	05-06-2009 02:09 AM

12-12-2014, 01:32 PM	#3
JSWolf Resident Curmudgeon Posts: 73,987 Karma: 128903378 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	Well, that sucks. There needs to be a way to specify font sizes other then relative to the current font size.

Advert

Advert