line-height confusion

foosion · 09-23-2024, 02:52 PM

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>

JSWolf · 09-23-2024, 02:57 PM

Quote:

Originally Posted by foosion

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?

foosion · 09-23-2024, 03:01 PM

Quote:

Originally Posted by JSWolf

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.

JSWolf · 09-23-2024, 03:09 PM

Quote:

Originally Posted by foosion

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.

foosion · 09-23-2024, 03:18 PM

Quote:

Originally Posted by JSWolf

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.

JSWolf · 09-23-2024, 03:19 PM

Quote:

Originally Posted by foosion

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.

Turtle91 · 09-23-2024, 03:21 PM

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)

foosion · 09-23-2024, 03:21 PM

I changed p.part to h3.part. Now it behaves as expected - line-height affects spacing between the wrapped lines.

JSWolf · 09-23-2024, 03:22 PM

Quote:

Originally Posted by foosion

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.

foosion · 09-23-2024, 03:24 PM

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?

foosion · 09-23-2024, 03:34 PM

Quote:

Originally Posted by JSWolf

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.

JSWolf · 09-23-2024, 03:42 PM

Quote:

Originally Posted by foosion

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.

foosion · 09-23-2024, 03:44 PM

Quote:

Originally Posted by JSWolf

My guess is that the slider overrides <p> but not the headers.

I agree with your guess.

theducks · 09-24-2024, 01:04 AM

Quote:

Originally Posted by foosion

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%

DNSB · 09-24-2024, 01:22 AM

Quote:

Originally Posted by theducks

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).

09-23-2024, 02:52 PM	#1
foosion Evangelist Posts: 432 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>

09-23-2024, 03:24 PM	#10
foosion Evangelist Posts: 432 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 03:29 PM.

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Line height issue	Mercador	Kobo Reader	19	07-21-2020 03:32 PM
CSS line height vs Kobo line spacing slider?	bongoman	Kobo Reader	2	07-12-2020 02:25 PM
line height	Rellwood	Conversion	3	04-07-2018 05:34 AM
Aura H2O Line height setting is ignored	kAlvaro	Kobo Reader	6	08-09-2016 08:59 AM
Line spacing confusion	Wrongway	Kobo Reader	3	04-05-2014 08:23 AM

09-23-2024, 03:21 PM	#7
Turtle91 A Hairy Wizard Posts: 3,220 Karma: 19000635 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)

Advert

Advert