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

Go Back   MobileRead Forums > E-Book Formats > ePub

Notices

Reply
 
Thread Tools Search this Thread
Old 09-23-2024, 01:52 PM   #1
foosion
Evangelist
foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.
 
Posts: 408
Karma: 41524
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
line-height confusion

I have a page the has one line of text. I'd like there to be only a small amount of space between the lines if it is too long to render on just one line (it wraps). I had thought setting a small line-height would help, but whatever I use for line-height I get the same distance between the lines. I've tried large and small numbers with em, unitless and %, but it always looks the same.

What obvious mistake am I making?

Code:
p.part {
  font-size: 1.4em;
  margin-top: 2em;
  line-height: 0.8em;
  text-align: center;
  text-indent: 0;
}
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
		<title>Schwarzschild’s Singularity</title>
		<link href="css/nyrb.css" rel="stylesheet" type="text/css"/>
<meta content="urn:uuid:f6153998-8e9b-4e44-bcd6-bee1e61d1b96" name="Adept.expected.resource"/>
	</head>
	<body>
		<div>
			<p class="part"><a id="uIjbHnpIXhoMvLyexvkU5BC"></a>Schwarzschild’s Singularity</p>

</div>
</body>
</html>
foosion is offline   Reply With Quote
Old 09-23-2024, 01:57 PM   #2
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: 76,049
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by foosion View Post
I have a page the has one line of text. I'd like there to be only a small amount of space between the lines if it is too long to render on just one line (it wraps). I had thought setting a small line-height would help, but whatever I use for line-height I get the same distance between the lines. I've tried large and small numbers with em, unitless and %, but it always looks the same.

What obvious mistake am I making?

Code:
p.part {
  font-size: 1.4em;
  margin-top: 2em;
  line-height: 0.8em;
  text-align: center;
  text-indent: 0;
}
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
		<title>Schwarzschild’s Singularity</title>
		<link href="css/nyrb.css" rel="stylesheet" type="text/css"/>
<meta content="urn:uuid:f6153998-8e9b-4e44-bcd6-bee1e61d1b96" name="Adept.expected.resource"/>
	</head>
	<body>
		<div>
			<p class="part"><a id="uIjbHnpIXhoMvLyexvkU5BC"></a>Schwarzschild’s Singularity</p>

</div>
</body>
</html>
What happens if you use the slider and make the line height extra large to see if this works when the line wraps?
JSWolf is offline   Reply With Quote
Advert
Old 09-23-2024, 02:01 PM   #3
foosion
Evangelist
foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.
 
Posts: 408
Karma: 41524
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
Quote:
Originally Posted by JSWolf View Post
What happens if you use the slider and make the line height extra large to see if this works when the line wraps?
I don't understand the question. The line is wrapping and there's a constant amount of space between the wrapped lines no matter what line-height I set. That's the issue.

EDIT: Perhaps the line spacing set on the device is overriding the line-height setting? But that don't make sense to me, since CSS font-size affects device font size.

Last edited by foosion; 09-23-2024 at 02:06 PM.
foosion is offline   Reply With Quote
Old 09-23-2024, 02:09 PM   #4
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: 76,049
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by foosion View Post
I don't understand the question. The line is wrapping and there's a constant amount of space between the wrapped lines no matter what line-height I set. That's the issue.
What I'm asking is for you change the line-height slider on your Kobo to make it large. When you do that, does the line-height change on your wrapped line or not? I'm wondering if the slider value is the issue or not.

The line-height slider has no effect on the font size.
JSWolf is offline   Reply With Quote
Old 09-23-2024, 02:18 PM   #5
foosion
Evangelist
foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.
 
Posts: 408
Karma: 41524
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
Quote:
Originally Posted by JSWolf View Post
What I'm asking is for you change the line-height slider on your Kobo to make it large. When you do that, does the line-height change on your wrapped line or not? I'm wondering if the slider value is the issue or not.

The line-height slider has no effect on the font size.
Yes, the line spacing slider changes the distance between the wrapped lines.
foosion is offline   Reply With Quote
Advert
Old 09-23-2024, 02:19 PM   #6
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: 76,049
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by foosion View Post
Yes, the line spacing slider changes the distance between the wrapped lines.
If you are trying this as KePub, try it as ePub and see how it works on your Kobo since KePub and ePub use different software.
JSWolf is offline   Reply With Quote
Old 09-23-2024, 02:21 PM   #7
Turtle91
A Hairy Wizard
Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.Turtle91 ought to be getting tired of karma fortunes by now.
 
Turtle91's Avatar
 
Posts: 3,212
Karma: 19000001
Join Date: Dec 2012
Location: Charleston, SC today
Device: iPhone 15/11/X/6/iPad 1,2,Air & Air Pro/Surface Pro/Kindle PW & Fire
you can see if you can override the kobo slider by including !important in the css??

p.part {line-height:.8 !important}

(no units required)
Turtle91 is offline   Reply With Quote
Old 09-23-2024, 02:21 PM   #8
foosion
Evangelist
foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.
 
Posts: 408
Karma: 41524
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
I changed p.part to h3.part. Now it behaves as expected - line-height affects spacing between the wrapped lines.
foosion is offline   Reply With Quote
Old 09-23-2024, 02:22 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: 76,049
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by foosion View Post
I changed p.part to h3.part. Now it behaves as expected - line-height affects spacing between the wrapped lines.
I've never tested something like this as I've always removed the line-height from CSS.
JSWolf is offline   Reply With Quote
Old 09-23-2024, 02:24 PM   #10
foosion
Evangelist
foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.
 
Posts: 408
Karma: 41524
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
I find this behavior very odd.

Epub in calibre and kepub on a Kobo Clara BW.

EDIT: Is there any good reason line-height in CSS would matter for an h3 tag but not a p tag?

Last edited by foosion; 09-23-2024 at 02:29 PM.
foosion is offline   Reply With Quote
Old 09-23-2024, 02:34 PM   #11
foosion
Evangelist
foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.
 
Posts: 408
Karma: 41524
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
Quote:
Originally Posted by JSWolf View Post
I've never tested something like this as I've always removed the line-height from CSS.
I don't use line-height for normal text.

I have been using it in headings precisely to deal with the issue of excess space between wrapped headings when the font-size of the headings is greater than 1em.

Which is why I thought to change p to h3 - it had worked with headings. But it doesn't make sense to me that the Kobo renderer on a kepub would honor line-height for one tag but not another.
foosion is offline   Reply With Quote
Old 09-23-2024, 02:42 PM   #12
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: 76,049
Karma: 134368292
Join Date: Nov 2006
Location: Roslindale, Massachusetts
Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3
Quote:
Originally Posted by foosion View Post
I find this behavior very odd.

Epub in calibre and kepub on a Kobo Clara BW.

EDIT: Is there any good reason line-height in CSS would matter for an h3 tag but not a p tag?
My guess is that the slider overrides <p> but not the headers.
JSWolf is offline   Reply With Quote
Old 09-23-2024, 02:44 PM   #13
foosion
Evangelist
foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.foosion is an enigma wrapped up in a mystery.
 
Posts: 408
Karma: 41524
Join Date: Sep 2011
Device: Kobo Libra 2 & Clara BW
Quote:
Originally Posted by JSWolf View Post
My guess is that the slider overrides <p> but not the headers.
I agree with your guess.
foosion is offline   Reply With Quote
Old 09-24-2024, 12:04 AM   #14
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: 30,407
Karma: 58055234
Join Date: Aug 2009
Location: The Central Coast of California
Device: Kobo Libra2,Kobo Aura2v1, K4NT(Fixed: New Bat.), Galaxy Tab A
Quote:
Originally Posted by foosion View Post
I have a page the has one line of text. I'd like there to be only a small amount of space between the lines if it is too long to render on just one line (it wraps). I had thought setting a small line-height would help, but whatever I use for line-height I get the same distance between the lines. I've tried large and small numbers with em, unitless and %, but it always looks the same.

What obvious mistake am I making?

Code:
p.part {
  font-size: 1.4em;
  margin-top: 2em;
  line-height: 0.8em;
  text-align: center;
  text-indent: 0;
}
Code:
<?xml version='1.0' encoding='utf-8'?>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
		<title>Schwarzschild’s Singularity</title>
		<link href="css/nyrb.css" rel="stylesheet" type="text/css"/>
<meta content="urn:uuid:f6153998-8e9b-4e44-bcd6-bee1e61d1b96" name="Adept.expected.resource"/>
	</head>
	<body>
		<div>
			<p class="part"><a id="uIjbHnpIXhoMvLyexvkU5BC"></a>Schwarzschild’s Singularity</p>

</div>
</body>
</html>
line-height does not get a unit of measurement .
Code:
line-height: 1.2   /* (a normal default) */
line-height: 120%
theducks is online now   Reply With Quote
Old 09-24-2024, 12:22 AM   #15
DNSB
Bibliophagist
DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.DNSB ought to be getting tired of karma fortunes by now.
 
DNSB's Avatar
 
Posts: 39,828
Karma: 154147706
Join Date: Jul 2010
Location: Vancouver
Device: Kobo Sage, Libra Colour, Lenovo M8 FHD, Paperwhite 4, Tolino epos
Quote:
Originally Posted by theducks View Post
line-height does not get a unit of measurement .
Code:
line-height: 1.2   /* (a normal default) */
line-height: 120%
Actually line-height can use units of measure such em, %, px, etc. The issue is that you have to be a lot more careful when doing so especially when using em so using a unitless line height is a safer way to go.

I have unfond memories of one ePub where the misbegotten formatter used pc (pica) line heights along with Q, px and pt. It likely looked great on whatever device they used to read it but it was a total pain to generalize so it looked good on multiple devices.

For those who are wondering what the heck a Q is, it was/is a standard used in the Japanese typesetting industry being 0.25mm (Q (級) for quarter).
DNSB 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
Line height issue Mercador Kobo Reader 19 07-21-2020 02:32 PM
CSS line height vs Kobo line spacing slider? bongoman Kobo Reader 2 07-12-2020 01:25 PM
line height Rellwood Conversion 3 04-07-2018 04:34 AM
Aura H2O Line height setting is ignored kAlvaro Kobo Reader 6 08-09-2016 07:59 AM
Line spacing confusion Wrongway Kobo Reader 3 04-05-2014 07:23 AM


All times are GMT -4. The time now is 12:52 PM.


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