4.x Viewer Line Spacing?

[mwexler]

Hi, longtime 3.x user who finally upgraded to 4.13. Lots of things are faster and smoother, so thanks Kovid!

The biggest struggle I'm having is with the new Viewer. I got the toolbar and scrollbar back, configured my bottom row for page depth, and put it into Page (not flow) mode so it basically looks like 3.x (I do miss my page flip, but que cera).

But my epubs all seem really tightly line spaced in the new viewer. I tried a bunch of CSS snippets from the massive CSS thread (https://www.mobileread.com/forums/sh...ad.php?t=51500) (line-spacing, line-height) but none of them seemed to impact my test books. These are DRM free baen books, so I'm sure they have some CSS of their own, but still...

So, questions:
1) With an open book in the viewer, I add body {line-height:100 !important;} to the viewer in the text box under Preferences>Styles, but I don't see any difference in the book text. I've also verified in the Inspector that these values are appearing. No linespace change. Any suggestions? I'm sure I'm doing something wrong... Perhaps some additional "selectors" or tags or something?

2) How does using the "font size" controls affect this? Will whatever spacing I create grow appropriately as I increase font size, or should I just learn to squint more?

3) Are these style edits saved per book, or is this a systemwide viewer change? Would be nice not to have to do for every book, but would also be cool to have a way to have different overrides for specific book variables (this publisher may do something bad, or this series all has odd drop caps that screw up the flow, etc.). (I know, if it's just a single problematic book, edit the CSS manually in the editor, but I'm not that good yet!)

So, thanks for any suggestions!

Michael

[theducks]

1 is very tight.
The common default is 1.2 (height of the current character space+.2

[mwexler]

Right, 1 is tight; 1.2 is the default, but 100 should make it huge. No effect.

Update: I spent more time in the Inspector, and it would appear that I'm being overridden way deep down in some p tags.

So, this appears to have some impact, copied from another thread:
p {line-height:40px !important;}

Now I just need to understand if it's going to break anything. I assume px is pixels; should I use a percentage since that's more flexible? Any "recommended" way to do this?

[theducks]

Originally Posted by mwexler

Right, 1 is tight; 1.2 is the default, but 100 should make it huge. No effect.

Update: I spent more time in the Inspector, and it would appear that I'm being overridden way deep down in some p tags.

So, this appears to have some impact, copied from another thread:
p {line-height:40px !important;}

Now I just need to understand if it's going to break anything. I assume px is pixels; should I use a percentage since that's more flexible? Any "recommended" way to do this?

Why is that there? No good reason? Remove it with the editor.

There are cases where I have reduced line-height that far. I was stitching together Image slices. But I sur can't see any other reason off the top-o-me bald head

[JSWolf]

But the thing is, in the eBook, do not set a line hight. Set it with the line height settings in the reading software.

[mwexler]

But the thing is, in the eBook, do not set a line hight. Set it with the line height settings in the reading software.

Right, I am setting line-height in the Calibre Viewer. As the original post said, I'm editing the custom CSS in the Viewer to make my collection of books look a bit better when I read them. In my ancient version of 3, the line spacing was a bit looser and easier to read than in this new v4 one, so I'm editing the Viewer to customize.

Why is that there? No good reason? Remove it with the editor.

I'd prefer not to edit the books as I don't want to break them; the publisher and author put some work in there to already. But the Calibre Viewer, that's a great place to customize with no permanent damage, well, except to my eyes (ha!).

No one (well, I don't) wants a line spacing of 1; from my tests in a browser, line-height 100 defaults to 100 pixels, an "exaggerated for effect" test to see if I was making an impact. When I finally tried it in the p tag, you could see the 100 pixels for sure! I tried the px version because I found books specifying a height of 20px.

Reading through more threads, I'm now at this:
p {line-height:140% !important;}

This makes all the lines a bit more spaced than before; I haven't tested enough with "Font Larger" to see if it makes things too big.

I also haven't figured out yet how to add "skip a line after a paragraph" but I'm sure someone's thread will help.

[theducks]

p {margin-top: .5em }
Spaces Paragraphs

I simply use Top vs Bottom because a bottom can possibly cause a blank screen for the last paragraph

[kovidgoyal]

You can read all abut how line-height works here: https://developer.mozilla.org/en-US/...SS/line-height

[mwexler]

These are great, gang! Thanks!

I've wound up with

p {line-height: 1.4 !important;
   margin-top: 0.5em !important;}

which really helps (the unitless number version is the "preferred" option for line height, suggested via Kovid's pointer). Thanks for all the guidance, I learned a lot through this process.

PS: https://developer.mozilla.org/en-US/...CSS/margin-top for info about the margin-top value, via theducks.

[theducks]

Originally Posted by mwexler

These are great, gang! Thanks!

I've wound up with

p {line-height: 1.4 !important;
   margin-top: 0.5em !important;}

which really helps (the unitless number version is the "preferred" option for line height, suggested via Kovid's pointer). Thanks for all the guidance, I learned a lot through this process.

PS: https://developer.mozilla.org/en-US/...CSS/margin-top for info about the margin-top value, via theducks.

IMHO wrapping your head around the 'HTML/CSS Box Model' will do wonders in solving many STYLE issues.

The Editor HAS an Inspector mode (View: Inspector) where it can show a visual of the Box properties for the selected code block/