Register Guidelines E-Books Search Today's Posts Mark Forums Read

Go Back   MobileRead Forums > E-Book Software > Calibre > Conversion

Notices

Reply
 
Thread Tools Search this Thread
Old 02-10-2018, 08:01 AM   #1
mzso
Enthusiast
mzso began at the beginning.
 
Posts: 26
Karma: 10
Join Date: Feb 2018
Device: PC
How to set line height for book content?

Hello!

I've been messing with this for a while now, with little success. All I managed to do is to set it to an undetermined size by adding "line-height" to the styling to be removed.
Setting the Line size in the look and feel > layout section does nothing, what's even the point of it?

Setting something like this as extra CSS only changed a few lines. (I was lucky to even notice it)
Code:
p, div,  span  {
line-height: 10;
}
So what do I need to do?

Extra question: How do I change the text from right/left aligned and justified?

Last edited by mzso; 02-10-2018 at 09:51 AM.
mzso is offline   Reply With Quote
Old 02-10-2018, 09:02 AM   #2
deback
Book E d i t o r
deback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the end
 
Posts: 279
Karma: 31930
Join Date: May 2015
Device: Laptop
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:
Spoiler:

.calibre {
margin-top: 0;
margin-bottom: 0;
text-align: justify;
line-height: 1.2;
}
body {
margin-left: 0;
margin-right: 0;
line-height: 1.2;
}
.cover {
text-align: center;
}
.level {
margin-top: 0.25em;
margin-bottom: 0.25em;
margin-left: 0;
margin-right: 0;
}
.tocsection {
margin-top: 0.25em;
margin-bottom: 0.25em;
margin-left: 0;
margin-right: 0;
}
.toc {
margin-top: 0.25em;
margin-bottom: 0.25em;
margin-left: 0;
margin-right: 0;
}
.tocchp {
margin-top: 0.25em;
margin-bottom: 0.25em;
margin-left: 0;
margin-right: 0;
}
.fmtx {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.fmtx1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.fmtx2 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.cot {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.cotx {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.chapteropenertext {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.chapteropenertext1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.chapteropenertext2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.chaptertitle {
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.chapternumber {
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.para-ind {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-ind1 {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-ind2 {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-ind3 {
margin-bottom: 0;
margin-top: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-noindent {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.para-noindent1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.para-noindent2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.paranoindent {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.paranonindent {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.partnumber {
margin-left: 0;
margin-right: 0;
}
.tni {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.co {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.tx {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.tx1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
}
.tx2 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.text {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
line-height: 1.2;
}
.text1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.text2 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-p {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-pf {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.no-ind {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.no-ind1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.no-ind2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noind {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noind1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noind2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noind3 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.no-indent {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.no-indent1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.no-indent2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noindent {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noindent1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noindent2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.noindent3 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.non-indent {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.non-indent1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.non-indent2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.nonindent {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.nonindent1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.nonindent2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.nonindent3 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.indent {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.indent1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.indent2 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.indent3 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.ind {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.ind1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.ind2 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.ind3 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.paraflush {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.paraflush1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.paraflush2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.para-flush {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.para-flush1 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.para-flush2 {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.para-indent {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-indent1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para-indent2 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.ft {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.it {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para1 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para2 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.para3 {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.x03-co-body-text {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.x04-body-text {
margin-top: 0;
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 1.2em;
}
.normal {
margin-bottom: 0;
margin-left: 0;
margin-right: 0;
text-align: justify;
text-indent: 0;
}
.booksection {
margin-left: 0;
margin-right: 0;
}
.story {
margin-left: 0;
margin-right: 0;
}
.p {
text-align: justify;
line-height: 1.2;
}
.p1 {
text-align: justify;
line-height: 1.2;
}
.p2 {
text-align: justify;
line-height: 1.2;
}
.p3 {
text-align: justify;
line-height: 1.2;
}
.p4 {
text-align: justify;
line-height: 1.2;
}
.p5 {
text-align: justify;
line-height: 1.2;
}
.p6 {
text-align: justify;
line-height: 1.2;
}
.p7 {
text-align: justify;
line-height: 1.2;
}
.p8 {
text-align: justify;
line-height: 1.2;
}
.p9 {
text-align: justify;
line-height: 1.2;
}
.p10 {
text-align: justify;
line-height: 1.2;
}
.tc {
text-align: justify;
line-height: 1.2;
}

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

Last edited by theducks; 02-10-2018 at 12:15 PM. Reason: Add Spoiler for long code paste
deback is offline   Reply With Quote
Advert
Old 02-10-2018, 09:15 AM   #3
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 52,296
Karma: 47192023
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
With most current programs/Readers, you are best to have a left/right margin of 0 and use the setting to change the margins.

Also, that is one very sloppy stylesheet.

Last edited by JSWolf; 02-10-2018 at 10:04 AM.
JSWolf is offline   Reply With Quote
Old 02-10-2018, 09:23 AM   #4
mzso
Enthusiast
mzso began at the beginning.
 
Posts: 26
Karma: 10
Join Date: Feb 2018
Device: PC
Quote:
Originally Posted by deback View Post
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:

.calibre {
margin-top: 0;
margin-bottom: 0;
text-align: justify;
line-height: 1.2;
}
[...]

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

Wow that's a long list. That transform are only applied to content, or for chapter titles and such also?
What ".calibre" stand for?

Probably a stupid question. But what does using 1.2 (no unit?) and 1.2em mean?

Last edited by mzso; 02-10-2018 at 09:27 AM.
mzso is offline   Reply With Quote
Old 02-10-2018, 09:25 AM   #5
mzso
Enthusiast
mzso began at the beginning.
 
Posts: 26
Karma: 10
Join Date: Feb 2018
Device: PC
Quote:
Originally Posted by JSWolf View Post
With most current programs/Readers, you are best to have a left/right margin of 0 and use the setting to change the margins.
I already have my margins customized. My problem now is with line height.
mzso is offline   Reply With Quote
Advert
Old 02-10-2018, 12:25 PM   #6
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 21,858
Karma: 22086630
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: K4NT, Galaxy Tab 2(RIP)
Quote:
Originally Posted by mzso View Post
Thanks.

Wow that's a long list. That transform are only applied to content, or for chapter titles and such also?
What ".calibre" stand for?

Probably a stupid question. But what does using 1.2 (no unit?) and 1.2em mean?
.calibre is a CSS 'selector' (commonly assigned to the body, BUT never the 'rule'. All it, and any containing, means is the Calibre assigned these during a conversion.
cm, in, pt, px are ABSOLUTE values and should be avoided as the do not scale.

1.2 or 120% of the current font height. 1.2 is standard.
IMHO, you only need this for the Body (font size), as the paragraphs inherit this.
The only time I found I need to use another line-height: 1.2; , is when I use a dropcap or big letter in the same paragraph block (keeps the line space the same as its neighbors)
theducks is online now   Reply With Quote
Old 02-10-2018, 12:53 PM   #7
mzso
Enthusiast
mzso began at the beginning.
 
Posts: 26
Karma: 10
Join Date: Feb 2018
Device: PC
Quote:
Originally Posted by theducks View Post
.calibre is a CSS 'selector' (commonly assigned to the body, BUT never the 'rule'. All it, and any containing, means is the Calibre assigned these during a conversion.
cm, in, pt, px are ABSOLUTE values and should be avoided as the do not scale.

1.2 or 120% of the current font height. 1.2 is standard.
IMHO, you only need this for the Body (font size), as the paragraphs inherit this.
The only time I found I need to use another line-height: 1.2; , is when I use a dropcap or big letter in the same paragraph block (keeps the line space the same as its neighbors)
Thanks for the info.
mzso is offline   Reply With Quote
Old 02-10-2018, 06:03 PM   #8
deback
Book E d i t o r
deback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the end
 
Posts: 279
Karma: 31930
Join Date: May 2015
Device: Laptop
Quote:
Originally Posted by mzso View Post
Probably a stupid question. But what does using 1.2 (no unit?) and 1.2em mean?
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.
deback is offline   Reply With Quote
Old 02-10-2018, 07:26 PM   #9
JSWolf
Resident Curmudgeon
JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.JSWolf ought to be getting tired of karma fortunes by now.
 
JSWolf's Avatar
 
Posts: 52,296
Karma: 47192023
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Aura H2O, Sony PRS-650, Sony PRS-T1, nook STR, iPad 4, iPhone 5
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.
JSWolf is offline   Reply With Quote
Old 02-10-2018, 07:56 PM   #10
deback
Book E d i t o r
deback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the end
 
Posts: 279
Karma: 31930
Join Date: May 2015
Device: Laptop
Not true, JSWolf.

https://css-tricks.com/almanac/prope...l/line-height/
https://developer.mozilla.org/en-US/...SS/line-height
deback is offline   Reply With Quote
Old 02-10-2018, 08:36 PM   #11
theducks
Well trained by Cats
theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.theducks ought to be getting tired of karma fortunes by now.
 
theducks's Avatar
 
Posts: 21,858
Karma: 22086630
Join Date: Aug 2009
Location: (The original) Silicon Valley, USA
Device: K4NT, Galaxy Tab 2(RIP)
Quote:
Originally Posted by JSWolf View Post
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.
I think that it is the other way around. LH is unitless. Some devices barf if the nit picky rules are not followed
theducks is online now   Reply With Quote
Old 02-10-2018, 09:19 PM   #12
gbm
Wizard
gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.gbm ought to be getting tired of karma fortunes by now.
 
Posts: 1,407
Karma: 5435010
Join Date: Jun 2010
Device: Windows 10 tablet,Hisence Sero 7 Pro RIP, Nook STR, jetbook lite
Quote:
Originally Posted by JSWolf View Post
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.
Quote:
Originally Posted by theducks View Post
I think that it is the other way around. LH is unitless. Some devices barf if the nit picky rules are not followed
line-height: 1.2 and line-height: 1.2em are different setting.

The first screenshot is 1.2 the second is 1.2em.

bernie
Attached Thumbnails
Click image for larger version

Name:	Screenshot from 2018-02-10 21-13-29.png
Views:	68
Size:	194.7 KB
ID:	162189   Click image for larger version

Name:	Screenshot from 2018-02-10 21-12-40.png
Views:	69
Size:	218.3 KB
ID:	162190  
gbm is offline   Reply With Quote
Old 02-10-2018, 10:07 PM   #13
GeoffR
Wizard
GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.GeoffR ought to be getting tired of karma fortunes by now.
 
GeoffR's Avatar
 
Posts: 3,619
Karma: 17413409
Join Date: Nov 2012
Location: New Ulster
Device: Kobo Glo
The difference between line-height: 1.2; and line-height: 1.2em; is that when inherited, the unitless version will apply to the font size of the inheriting element, while 1.2em will be based on the font size of the original element.

e.g.
Code:
stylesheet:
div.em-units { font-size: 1em; line-height: 1.2em; }
div.unitless { font-size: 1em; line-height: 1.2; }
p { font-size: 0.5em; }

html:
<div class="em-units">
  <p>This text has line height 2.4 times its font size.</p>
</div>

<div class="unitless">
  <p>This text has line height 1.2 times its font size.</p>
</div>
GeoffR is offline   Reply With Quote
Old 02-10-2018, 10:13 PM   #14
sjfan
Addict
sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.sjfan ought to be getting tired of karma fortunes by now.
 
Posts: 246
Karma: 7568340
Join Date: Sep 2017
Location: Bethesda, MD, USA
Device: Kobo Aura H20
1.2em is generally wrong, though in simple cases it can be the same as a plain 1.2. But the latter is inherited as a factor relative to whatever font is in use when it’s rendered, and will scale properly. The “em” version is inherited as an absolute size (calculated from the font it was originally applied to), so will be way off if your main body text style applies a font-size in a separate (more deeply nested) rule than the line-height was.

Especially in a body rule (and usually everywhere), use plain 1.2 unless you really know what you’re doing.

The Mozilla link deback posted has a good illustration of this at the bottom.

EDIT: What GeoffR just said.

Last edited by sjfan; 02-10-2018 at 10:16 PM.
sjfan is offline   Reply With Quote
Old 02-10-2018, 10:13 PM   #15
deback
Book E d i t o r
deback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the enddeback knows the complete value of PI to the end
 
Posts: 279
Karma: 31930
Join Date: May 2015
Device: Laptop
Quote:
Originally Posted by GeoffR View Post
The difference between line-height: 1.2; and line-height: 1.2em; is that when inherited, the unitless version will apply to the font size of the inheriting element, while 1.2em will be based on the font size of the original element.

e.g.
Code:
stylesheet:
div.em-units { font-size: 1em; line-height: 1.2em; }
div.unitless { font-size: 1em; line-height: 1.2; }
p { font-size: 0.5em; }

html:
<div class="em-units">
  <p>This text has line height 2.4 times its font size.</p>
</div>

<div class="unitless">
  <p>This text has line height 1.2 times its font size.</p>
</div>
This is correct. That's why I posted the links and why I said that 1.2 is the standard way to code line-height.
deback is offline   Reply With Quote
Reply

Thread Tools Search this Thread
Search this Thread:

Advanced Search

Forum Jump

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


All times are GMT -4. The time now is 11:24 AM.


MobileRead.com is a privately owned, operated and funded community.