font-size in html tag

AlanHK · 01-24-2018, 12:18 AM

I'm looking at an epub2. Was created by inDesign and the css looks pretty sensible.

It looks good on screen and converts to AZW3 without issue.

However, it triggers an error in epubcheck for a style in the html tag:

<html xml:lang="en" xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml" style="font-size:1.136rem;">

The body text in css has
font-size: 0.88rem;

So it looks like the print book was set in a smaller font and this html style is hack to bump it back to 1.0.

Is there a way to do this that validates?
(Aside from going through the css file and multiplying each size by the same factor.)

I tried putting the style in the <body> tag, but that had no effect.

jbacelar · 01-24-2018, 03:08 AM

What unit of measure is rem?

JSWolf · 01-24-2018, 05:00 AM

What I would do is get rid of any font size 1em or smaller in CSS. Also, if there are any rem, fix them to be em. But since it's 0.88rem, you'll be deleting it.

Check the header CSS font size and if it's too small with the new body text size, increase it to whatever you want. Also, if there is simulated smallcaps, fix the font size to 0.8em.

As for the copyright page, I set that to a font size of small so in most cases it will fit on one page.

And for the HTML line you posted, this is one that is valid with no extra rubbish.

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg">

Finally, most eBooks I've seen made with In Design the CSS is not sensible. I've seen way too much rubbish and the style names look machine generated and have no bearing to their use.

Turtle91 · 01-24-2018, 05:58 PM

Quote:

Originally Posted by AlanHK

...

Is there a way to do this that validates?
(Aside from going through the css file and multiplying each size by the same factor.)

I tried putting the style in the <body> tag, but that had no effect.

I don't think the style tag is supposed to be in the HTML tag at all??? I would have thought moving it to the <body> tag should have corrected it. You did remove it from the HTML tag when you tried, correct??

I do agree with Wolfie about getting rid of that font-size cruft in the body. Just do a search and replace to get rid of any <font> tags that are being applied to the standard/normal/everyday paragraph...put that in the css and it will apply to all of the main paragraphs:

Code:

p  {font-size:1em}
p.larger  {font-size:1.2em}
p.smaller {font-size:.8em}

<p>This is a normal paragraph.</p>
<p class="larger">This is a larger font paragraph.</p>
<p class="small">This is a smaller font paragraph.</p>

That drastically cuts down on the code bloat and makes it much easier to read/edit the code...and it makes it easier to see where those special paragraphs are located.

JSWolf · 01-24-2018, 06:08 PM

You don't need any font size in the main body text.. stick with the default font size.

This is the code I use.

Code:

body {
widows: 1;
orphans: 1;
margin-top: 0;
margin-right: 0;
margin-bottom: 0;
margin-left: 0;
text-align: justify;
}
p {
margin-top: 0;
margin-bottom: 0;
text-indent: 1.2em
}

AlanHK · 01-24-2018, 10:11 PM

Found an alternative that does validate:
removed the inline style and added this to CSS:

html{ font-size:1.136rem;}

Also, all the fontsizes in the CSS were in rem; changed these to em and the pages seem unchanged.
I believe that there is a difference if you have nested styles, e.g. applied by <div>s around slabs of text, but this book had none of those.

Throwing out an idea for a plugin: a tool that can multiply all font-sizes in the CSS by a stated amount; which would be cleaner than these hacks.

It is fairly common in ePubs converted from DTP that the base font size is small, which is easily adjusted in the reader, but when I switch to another book I have to reduce size.
A bit like when I play a video with the sound level much lower than normal, turn it up, and then get blasted when I play another with normal volume.

This book has numeric sizes, but others have stuff like
p {font-size: small;}
and other styles with x-small, xx-small, etc, making bumping everything up consistently a bit tricky.

JSWolf · 01-25-2018, 06:13 AM

Quote:

Originally Posted by AlanHK

Found an alternative that does validate:
removed the inline style and added this to CSS:

html{ font-size:1.136rem;}

Don't do that. It's a really bad idea. All font sizes should be in CSS.

Quote:

This book has numeric sizes, but others have stuff like
p {font-size: small;}
and other styles with x-small, xx-small, etc, making bumping everything up consistently a bit tricky.

get rid of the font-size: small from p and any place else it doesn't need to be. If x-small is in copyright classes, change those to small. If you have any smallcaps type classes, change them to 0.8em. You want to use the default font size in the main text. Also, you may not want offset text to be a smaller size. I have it all the same size. You can decide if chapter titles and subtitles need to be made larger or left as is.

Make things as simple as possible. A lot of publishers make mistakes that are easily fixed. Use the Calibre editor to remove all unused CSS classes and what's left, you can fix easier.

01-24-2018, 12:18 AM	#1
AlanHK Guru Posts: 668 Karma: 929286 Join Date: Apr 2014 Device: PW-3, iPad, Android phone	font-size in html tag I'm looking at an epub2. Was created by inDesign and the css looks pretty sensible. It looks good on screen and converts to AZW3 without issue. However, it triggers an error in epubcheck for a style in the html tag: <html xml:lang="en" xmlns:epub="http://www.idpf.org/2007/ops" xmlns="http://www.w3.org/1999/xhtml" style="font-size:1.136rem;"> The body text in css has font-size: 0.88rem; So it looks like the print book was set in a smaller font and this html style is hack to bump it back to 1.0. Is there a way to do this that validates? (Aside from going through the css file and multiplying each size by the same factor.) I tried putting the style in the <body> tag, but that had no effect.

01-24-2018, 05:00 AM	#3
JSWolf Resident Curmudgeon Posts: 73,965 Karma: 128903250 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	What I would do is get rid of any font size 1em or smaller in CSS. Also, if there are any rem, fix them to be em. But since it's 0.88rem, you'll be deleting it. Check the header CSS font size and if it's too small with the new body text size, increase it to whatever you want. Also, if there is simulated smallcaps, fix the font size to 0.8em. As for the copyright page, I set that to a font size of small so in most cases it will fit on one page. And for the HTML line you posted, this is one that is valid with no extra rubbish. <html xmlns="http://www.w3.org/1999/xhtml" xmlns:svg="http://www.w3.org/2000/svg"> Finally, most eBooks I've seen made with In Design the CSS is not sensible. I've seen way too much rubbish and the style names look machine generated and have no bearing to their use. Last edited by JSWolf; 01-24-2018 at 05:02 AM.

01-24-2018, 06:08 PM	#5
JSWolf Resident Curmudgeon Posts: 73,965 Karma: 128903250 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	You don't need any font size in the main body text.. stick with the default font size. This is the code I use. Code: body { widows: 1; orphans: 1; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; text-align: justify; } p { margin-top: 0; margin-bottom: 0; text-indent: 1.2em }

01-24-2018, 10:11 PM	#6
AlanHK Guru Posts: 668 Karma: 929286 Join Date: Apr 2014 Device: PW-3, iPad, Android phone	Found an alternative that does validate: removed the inline style and added this to CSS: html{ font-size:1.136rem;} Also, all the fontsizes in the CSS were in rem; changed these to em and the pages seem unchanged. I believe that there is a difference if you have nested styles, e.g. applied by <div>s around slabs of text, but this book had none of those. Throwing out an idea for a plugin: a tool that can multiply all font-sizes in the CSS by a stated amount; which would be cleaner than these hacks. It is fairly common in ePubs converted from DTP that the base font size is small, which is easily adjusted in the reader, but when I switch to another book I have to reduce size. A bit like when I play a video with the sound level much lower than normal, turn it up, and then get blasted when I play another with normal volume. This book has numeric sizes, but others have stuff like p {font-size: small;} and other styles with x-small, xx-small, etc, making bumping everything up consistently a bit tricky. Last edited by AlanHK; 01-24-2018 at 10:20 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Problem changing font size using font size key	Waylander	Conversion	0	10-02-2013 03:30 PM
How to change the font-size in the body tag in css?	naisren	Conversion	2	10-01-2012 05:52 PM
Wide margins in html to epub; font size mngmt; PDF metadata	dementrio	Calibre	2	08-01-2009 01:33 AM
change html font size ssh	nwsco	iRex	0	04-26-2009 03:17 AM
HTML font size for sony 505	RayMorgan	Sony Reader	7	04-29-2008 11:01 PM

01-24-2018, 03:08 AM	#2
jbacelar Interested in the matter Posts: 421 Karma: 426094 Join Date: Dec 2011 Location: Spain, south coast Device: Pocketbook InkPad 3	What unit of measure is rem?

Advert

Advert