How to set line height for book content? - Page 2

mzso · 02-11-2018, 04:46 AM

Quote:

Originally Posted by deback

1.2 and 1.2em are the same, but 1.2 is the standard, and the "em" is not needed.

If the line-height is not included in the <body> selector (such as, in the .calibre CSS selector) or is not included in the paragraph class selectors, the line-height will not be standard (i.e., the lines will be too close together).

Everything I included in my response helps to keep the line-heights standard in all the epub files I convert and fixes several other things, such as, justifying the paragraphs, having standard indents of 1.2em, having no indents for chapter opening paragraphs, etc.

Actually the CSS didn't do anything for line height when I tried it. (Well, except ruining my custom header... )
Nothing does, but removing it by filtering the property. At least this makes them uniform...

theducks · 02-11-2018, 06:27 AM

Quote:

Originally Posted by mzso

Actually the CSS didn't do anything for line height when I tried it. (Well, except ruining my custom header... )
Nothing does, but removing it by filtering the property. At least this makes them uniform...

A CSS that fails, has a problem:
1) A code error . Some Errors in the CSS will cause some render engines to ignore the whole

2) Not linked properly to the file.

3) Another (inline?) style overrides the CSS

4) Failure of the user to understand the (HTML/CSS) code being modified

JSWolf · 02-11-2018, 06:52 AM

In a properly made eBook, the font size of the body font will be the default and the default is 1em. So 1.2em will be just fine as long as you don't do something silly and override the default font size.

mzso · 02-11-2018, 07:31 AM

Quote:

Originally Posted by JSWolf

In a properly made eBook, the font size of the body font will be the default and the default is 1em. So 1.2em will be just fine as long as you don't do something silly and override the default font size.

Well, the line height didn't change at all. I added all the CSS code you shared. Even increased the line-height values to make it more obvious. But nothing but my header changed. And some title text.

deback · 02-11-2018, 08:47 AM

Quote:

Originally Posted by mzso

Well, the line height didn't change at all. I added all the CSS code you shared. Even increased the line-height values to make it more obvious. But nothing but my header changed. And some title text.

Then something is wrong with your code or something else needs to be changed. Is there a plain .body class in your CSS file or a class at the top that is causing your changes not to take effect? Sometimes, I have to make changes in classes like .preface or something else that's in a <div> or <p> statement above everything on that page (with the ending tag at the bottom of the page).

Check your CSS file for the <body class=???> and add line-height: 1.2; to that class (if it's not already included).

Go through the CSS file and delete all the line-heights except for the class that is the <body class>. Do a regex find and replace to delete them all.

Sometimes, you just have to keep looking to find the problem, and the problem might be found where you don't expect it to be.

deback · 02-11-2018, 08:50 AM

Quote:

Originally Posted by JSWolf

In a properly made eBook, the font size of the body font will be the default and the default is 1em. So 1.2em will be just fine as long as you don't do something silly and override the default font size.

Yes, 1.2em is fine when the font size has been coded correctly, but 1.2 is the standard and ends up working better, because the font size is not always coded correctly (quite often, actually--isn't it amazing how many ebooks are coded incorrectly?).

mzso · 02-11-2018, 09:27 AM

Quote:

Originally Posted by deback

Then something is wrong with your code or something else needs to be changed. Is there a plain .body class in your CSS file or a class at the top that is causing your changes not to take effect? Sometimes, I have to make changes in classes like .preface or something else that's in a <div> or <p> statement above everything on that page (with the ending tag at the bottom of the page).

Check your CSS file for the <body class=???> and add line-height: 1.2; to that class (if it's not already included).

Go through the CSS file and delete all the line-heights except for the class that is the <body class>. Do a regex find and replace to delete them all.

Sometimes, you just have to keep looking to find the problem, and the problem might be found where you don't expect it to be.

I don't have a CSS file I used your code directly in Calibre's Extra CSS field. It sucks that there's no generic solution to this in Calibre. (But I guess with these wretched css/html/xml based ebook formats)

Ps:
Here are the source CSS files fo the books I tested with. I guess there's a number of elements I would need changed.

Spoiler:

Code:

@font-face {
	src: url(fonts/ChaparralPro-Italic.otf);
	font-family: "Chaparral Pro";
	font-style: italic
}

@font-face {
	src: url(fonts/ChaparralPro-Regular.otf);
	font-family: "Chaparral Pro"
}
.block {
    display: block;
    line-height: 1.5;
    text-align: center;
    text-indent: 14.2pt;
    padding: 0;
    margin: 0 0 10pt
    }
.block1 {
    display: block;
    line-height: 1.5;
    text-align: justify;
    text-indent: 14.2pt;
    padding: 0;
    margin: 0 0 10pt
    }
.block3 {
    display: block;
    line-height: 1.5;
    padding: 0;
    margin: 0 0 10pt 36pt
    }
.calibre {
    color: black;
    display: block;
    font-family: "Chaparral Pro", serif;
    font-size: 1em;
    line-height: 1.5;
    padding-left: 0;
    padding-right: 0;
    margin: 0 5pt
    }
h1.subchapter {
    font-size: large;
    text-align: center;
    font-weight: bold;
    margin-bottom: 2em;
    }
span.dropcaps {
    float: left;
    font-size: 60px;
    line-height: 50px;
    padding-top: 1px;
    margin-top: -.09em;
    margin-right: .02em;

    }
.nonindent {
    text-align: justify;
    text-indent: 0;
    }

Code:

@namespace h "http://www.w3.org/1999/xhtml";
.calibre {
    display: block;
    font-size: 1em;
    margin-bottom: 0;
    margin-left: 5pt;
    margin-right: 5pt;
    margin-top: 0;
    page-break-before: always
    }
.calibre1 {
    display: block;
    font-size: 2em;
    font-variant: small-caps;
    font-weight: bold;
    margin-bottom: 1.5em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.5em;
    text-align: center
    }
.calibre10 {
    height: auto;
    width: auto
    }
.calibre11 {
    font-style: italic
    }
.calibre12 {
    display: block;
    font-size: 1em;
    font-variant: small-caps;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center
    }
.calibre13 {
    border-collapse: separate;
    border-spacing: 2px;
    display: table;
    margin-bottom: 0;
    margin-top: 0;
    text-indent: 0
    }
.calibre14 {
    display: table-row;
    vertical-align: middle
    }
.calibre15 {
    display: table-cell;
    line-height: 1.25;
    padding-bottom: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0;
    text-align: inherit;
    vertical-align: top
    }
.calibre16 {
    display: block;
    line-height: 1.25;
    margin-bottom: 0;
    margin-left: 0%;
    margin-right: 0;
    margin-top: 0;
    padding-left: 1em;
    text-indent: -1em
    }
.calibre2 {
    display: block;
    font-size: 1em;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center
    }
.calibre3 {
    display: block
    }
.calibre4 {
    display: block;
    font-size: 1.83333em;
    font-style: italic;
    font-weight: bold;
    margin-bottom: 1.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1.25em;
    text-align: center
    }
.calibre5 {
    display: block;
    font-size: 1.41667em;
    font-variant: small-caps;
    font-weight: bold;
    margin-bottom: 1em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 1em;
    text-align: center
    }
.calibre6 {
    display: block;
    margin-bottom: 0.25em;
    margin-left: 1.75em;
    margin-right: 0;
    margin-top: 0.25em
    }
.calibre7 {
    display: block;
    line-height: 1.25;
    margin-bottom: 0.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.25em;
    text-indent: 1.75em
    }
.calibre8 {
    color: blue;
    cursor: pointer;
    text-decoration: underline
    }
.calibre9 {
    display: block;
    font-size: 1em;
    font-weight: normal;
    margin-bottom: 2em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 2em;
    text-align: center
    }
.center {
    display: block;
    line-height: 1.25;
    margin-bottom: 0.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.25em;
    text-align: center;
    text-indent: 0
    }
.no-indent {
    display: block;
    line-height: 1.25;
    margin-bottom: 0.25em;
    margin-left: 0;
    margin-right: 0;
    margin-top: 0.25em;
    text-indent: 0
    }
.right {
    display: table-cell;
    line-height: 1.25;
    padding-bottom: 0;
    padding-left: 0.5em;
    padding-right: 0.5em;
    padding-top: 0;
    text-align: right;
    text-indent: 0;
    vertical-align: top
    }

sjfan · 02-11-2018, 10:36 AM

Quote:

Originally Posted by JSWolf

In a properly made eBook, the font size of the body font will be the default and the default is 1em. So 1.2em will be just fine as long as you don't do something silly and override the default font size.

Again, this is bad advice. If the body style is set to line-height 1.2em and then the blockquote style is set to a smaller font, then the blockquotes will all have huge spacing between the lines, and if the blockquote is set to a larger font you'll have overlapping lines.

If you set the body style to a line-height of 1.2 instead of 1.2em then inherited fonts will be spaced properly relative to the font used.

deback · 02-11-2018, 04:00 PM

Add the following to your .calibre entry in the .css file:

line-height: 1.2;

so that it looks like this (I deleted one line and added another):

.calibre {
display: block;
font-size: 1em;
line-height: 1.2;
margin-bottom: 0;
margin-left: 5pt;
margin-right: 5pt;
margin-top: 0;
text-align: justify;
}

Better yet, change that entry to this and see if you like it better:

.calibre {
display: block;
font-size: 1em;
line-height: 1.2;
margin-bottom: 0;
margin-left: 30pt;
margin-right: 30pt;
margin-top: 0;
text-align: justify;
}

When you're having problems with line-height, chances are that the line-height line is missing from the body class, which is .calibre in your case above. My extra CSS entries change any line-heights that aren't 1.2 to 1.2.

I would also delete all the lines for line-height in the rest of the .css file (and you really should have .css files: page_styles.css and stylesheet.css).

Just adding my extra CSS entries won't do any good, since those are extra entries to either change current entries or to add to current entries.

roger64 · 02-12-2018, 11:46 PM

Quote:

Originally Posted by JSWolf

Don't take the risk that some ePub reader won't get 1.2. Use 1.2em just to be on the safe. Plus, the code looks better that way.

Using em to set up the line-height of a book is a bad idea. And no, the code does not look better. I prefer using a 1.3 value for the body (and modify this value according to some individual styles if need be).

mzso · 02-15-2018, 05:21 AM

Quote:

Originally Posted by deback

I use Transform in Look and Feel for line-height (4 entries), plus I have some entries in Styling to add this code when it's not included in the <body class> code:

If line-height is less than or equal to 1.2, change it to 1.2.
If line-height is less than or equal to 1.2em, change it to 1.2.
If line-height is greater than or equal to 1.2, change it to 1.2.
If line-height is greater than or equal to 1.2em, change it to 1.2.

For text alignment, manually change (in the .css file) to one of the following for the CSS class:

text-align: left;
text-align: right;
text-align: justify;
text-align: center;

However, I have a bunch of entries in Styling that do this for me most of the time when converting, and I rarely have to manually change it. Here's what I have in Styling:

I also have 30pt for left and right margins in Page Setup (at the bottom right of that screen).

So. Why wouldn't this work?

If text-align is not justify change it to justify.

I imagined it would make every text justified but in reality the book doesn't change at all.

Edit:
I just realized that the same books appear justified when I view them in SumatraPDF, meanwhile they appear left aligned when viewed in Calibre and after conversion to PDF also.

DoctorOhh · 02-15-2018, 07:55 AM

Quote:

Originally Posted by mzso

If text-align is not justify change it to justify.

Why set extra CSS, if you're going to convert a book go to the conversion settings choose Look & feel - Text tab and select Justify text. This will ensure the body of the text is justified during conversion.

mzso · 02-15-2018, 08:18 AM

Quote:

Originally Posted by DoctorOhh

Why set extra CSS, if you're going to convert a book go to the conversion settings choose Look & feel - Text tab and select Justify text. This will ensure the body of the text is justified during conversion.

Thanks. I found that not long after posting, it worked fine. (Though rules not working is still a little odd.)

deback · 02-15-2018, 08:31 AM

"Why set extra CSS, if you're going to convert a book go to the conversion settings choose Look & feel - Text tab and select Justify text. This will ensure the body of the text is justified during conversion."

Doing this will justify the cover image, which means it will be off-center (in many cases).

deback · 02-15-2018, 08:33 AM

Quote:

Originally Posted by mzso

So. Why wouldn't this work?

If text-align is not justify change it to justify.

I imagined it would make every text justified but in reality the book doesn't change at all.

Edit:
I just realized that the same books appear justified when I view them in SumatraPDF, meanwhile they appear left aligned when viewed in Calibre and after conversion to PDF also.

It won't work because all "text-align" lines in the .css file will change to justify. Some text or images should be centered.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Aura H2O Line height setting is ignored	kAlvaro	Kobo Reader	6	08-09-2016 07:59 AM
Calibre - changing the line-height in the user interface book description	CynthiaBlue	Development	2	02-05-2016 12:48 AM
Set maximum height for images in reader	truth1ness	Library Management	0	10-06-2015 12:36 PM
optimal line height ?	cybmole	Sigil	6	09-05-2013 09:30 AM
Line height insanity!	Kamikuza	Conversion	6	10-24-2012 11:56 PM

02-11-2018, 06:52 AM	#18
JSWolf Resident Curmudgeon Posts: 79,792 Karma: 146391129 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	In a properly made eBook, the font size of the body font will be the default and the default is 1em. So 1.2em will be just fine as long as you don't do something silly and override the default font size.

02-11-2018, 04:00 PM	#24
deback Book E d i t o r Posts: 432 Karma: 288184 Join Date: May 2015 Device: Laptop	Add the following to your .calibre entry in the .css file: line-height: 1.2; so that it looks like this (I deleted one line and added another): .calibre { display: block; font-size: 1em; line-height: 1.2; margin-bottom: 0; margin-left: 5pt; margin-right: 5pt; margin-top: 0; text-align: justify; } Better yet, change that entry to this and see if you like it better: .calibre { display: block; font-size: 1em; line-height: 1.2; margin-bottom: 0; margin-left: 30pt; margin-right: 30pt; margin-top: 0; text-align: justify; } When you're having problems with line-height, chances are that the line-height line is missing from the body class, which is .calibre in your case above. My extra CSS entries change any line-heights that aren't 1.2 to 1.2. I would also delete all the lines for line-height in the rest of the .css file (and you really should have .css files: page_styles.css and stylesheet.css). Just adding my extra CSS entries won't do any good, since those are extra entries to either change current entries or to add to current entries.

02-15-2018, 08:31 AM	#29
deback Book E d i t o r Posts: 432 Karma: 288184 Join Date: May 2015 Device: Laptop	"Why set extra CSS, if you're going to convert a book go to the conversion settings choose Look & feel - Text tab and select Justify text. This will ensure the body of the text is justified during conversion." Doing this will justify the cover image, which means it will be off-center (in many cases).