superfluous blank lines between paragraphs - Page 2

JSWolf · 10-21-2025, 07:58 AM

Quote:

Originally Posted by Karellen

Yep, that is exactly what I mean. In addition you will also need the <title> tag.

So, at the top of the page you would add...

PHP Code:


			
<head>

  <title>page title goes here</title>

  <link rel="stylesheet" type="text/css" href="../Styles/stylesheet.css"/>

</head>

Strange that the books have that missing. Some sort of conversion gone wrong, maybe?

That should be <title>book title goes here</title>

JSWolf · 10-21-2025, 08:07 AM

Quote:

Originally Posted by franklekens

Now that OUP book is a different kettle of fish. The css link is there, but I get the impression that the css actually... doesn't contain any style *for* the paragraphs.

Consider this: the text in the xhtml looks like this:

But the CSS (which I attach here, as a txt-file since it won't work for me otherwise) doesn't actually contain any style defining the characteristics of the para class, does it?
Or is there something else wrong?

I'm not sure it's easy to remedy. If I added something to the css in order to make paragraphs behave more book-like (no blank spaces and indentation for paragraphs), probably some paragraphs that *are* actually suppoed to have blank lines in between will suddenly also be glued together. I think this entire e-book was just not correctly set up from the get go.

Forget giving a class to p for the most commonly used paragraph style. This is what I use.

Code:

p {
  margin-top: 0;
  margin-bottom: 0;
  widows: 1;
  orphans: 1;
  text-indent: 1.2em;
}

Also, it gets rid of widows and orphans for all . When you need a class to not have an indent, just use text-indent: 0; like with a center.

JSWolf · 10-21-2025, 08:08 AM

Quote:

Originally Posted by Karellen

The epub file is easier to understand rather than a separate css list.

The para is here...

PHP Code:


			
div.header.boxed-text .para {

    display: block;

    margin-top: 0.6em;

    line-height: 150%;

}

and it is adding .6em spacing and an oversized line height.

Your choice is to remove that margin-top value (might have unintended consequences in other parts of the book for the div.header.boxed-text use
or
remove .para from there and add it as a separate entry in the css without the spacing. eg...

PHP Code:


			
.para {

  display: block;

  margin-top: 0;

  margin-bottom: 0;

  text-indent: 1em;

}

Forget .para as it's excess code that's not needed.

Turtle91 · 10-21-2025, 09:59 AM

Quote:

Originally Posted by JSWolf

That should be <title>book title goes here</title>

That's what I've done for a long time, but apparently the accessibility standards want the chapter/document title instead of just the book title.

Turtle91 · 10-21-2025, 10:03 AM

Quote:

Originally Posted by JSWolf

Forget giving a class to p for the most commonly used paragraph style.
...

I agree that there is no need for:

as the tag is saying that it is a paragraph already...

However, I think they wanted a very specific/minimal/easy fix. Just changing the CSS will fix them all.

JSWolf · 10-21-2025, 10:05 AM

Quote:

Originally Posted by Turtle91

I agree that there is no need for:

as the tag is saying that it is a paragraph already...

However, I think they wanted a very specific/minimal/easy fix. Just changing the CSS will fix them all.

Just changing the p CSS will change them all as well. Still no need for a class for the most used paragraph style.

franklekens · 10-21-2025, 11:21 AM

Thanks.

What I had done, without knowing quite what is what, is change this item:

Quote:

p + p {
margin-top: 1em;
}

To this:

Quote:

p + p {
margin-top: 0em;
text-indent: 1.3em;
}

This does seem to have the desired effect too.

There's more issues with this file, e.g. the letters have a slightly faint quality on my e-reader, they're less black, less saturated, than regular letters, I don't know what's causing that. Rather weird, don't you think?

I realize it's hard to say anything without having the complete file. I've stripped most of the copyrighted text from the attached filed.

Karellen · 10-21-2025, 02:03 PM

Quote:

Originally Posted by Turtle91

That's what I've done for a long time, but apparently the accessibility standards want the chapter/document title instead of just the book title.

Yes, that.

Quote:

Originally Posted by Turtle91

However, I think they wanted a very specific/minimal/easy fix. Just changing the CSS will fix them all.

Yes, that. I did not expect that OP wanted to recode the book.

Onya, jswolf. Come in and start confusing the issue as usual.

Doitsu · 10-21-2025, 04:12 PM

Quote:

Originally Posted by franklekens

This does seem to have the desired effect too.

There's more issues with this file, e.g. the letters have a slightly faint quality on my e-reader, they're less black, less saturated, than regular letters, I don't know what's causing that. Rather weird, don't you think?

Might be caused by this part:

Code:

body {
    font-family: Georgia, Baskerville, roman, 'times new roman', times, serif;
    color: #404040;
    background-color: transparent;
    hyphens: none;
        -webkit-hyphens: none;
        -moz-hyphens:none;
        adobe-hyphenate: none;    
	margin: 30px 5% 20px 5%;
	text-indent: 0;
    text-rendering: optimizeLegibility;
}

#404040 is a dark gray.

JSWolf · 10-21-2025, 04:49 PM

[

Code:

body {
    font-family: Georgia, Baskerville, roman, 'times new roman', times, serif;
    color: #404040;
    background-color: transparent;
    hyphens: none;
        -webkit-hyphens: none;
        -moz-hyphens:none;
        adobe-hyphenate: none;    
	margin: 30px 5% 20px 5%;
	text-indent: 0;
    text-rendering: optimizeLegibility;
}

And get rid of px and % for the margins. You want em for the margins. However in this case, you want 0 for the margins because you don't want any set margins for the overall page. You want no top/bottom/left/right margins.

You also need to dump the webkit code as it's not ePub compliant. And the moz code has to go as this is not Firefox or any other web browser.

And finally, the font-family line has to go because that could cause problems and not allow some programs to change the font.

And the text-rendering also has to go. Also, dump adobe command. and dump the text indent.

When you are done dumping the rubbish, there's nothing left. To be honest, the entire body is a mess. This is what I use as for the body.

Code:

body {
  widows: 1;
  orphans: 1;
  margin-top: 0;
  margin-right: 0;
  margin-bottom: 0;
  margin-left: 0;
  text-align: justify;
}

franklekens · 10-22-2025, 01:11 AM

Thank you everybody.
It's true I was just looking for a quick fix for the most obvious display problems, but it all helps me a little to understand more of the coding.

And yes, color: #404040; was the culprit. What a strange thing to put in there! Whoever would want that?
Thanks a lot.

DNSB · 10-22-2025, 03:05 AM

Quote:

Originally Posted by franklekens

And yes, color: #404040; was the culprit. What a strange thing to put in there! Whoever would want that?
Thanks a lot.

After a while, you get almost numb to the number of idiocies people commit when creating the CSS for ePub ebooks. Some of the most egregious choices are the people who specify black text which can cause inverted text to show as black on black and the one who specify a background colour which can be fun when reading on an eInk display with 16 shades of grey (well, 14 plus white and black).

JSWolf · 10-22-2025, 04:55 AM

Quote:

Originally Posted by franklekens

Thank you everybody.
It's true I was just looking for a quick fix for the most obvious display problems, but it all helps me a little to understand more of the coding.

And yes, color: #404040; was the culprit. What a strange thing to put in there! Whoever would want that?
Thanks a lot.

After having a gander at the CSS, a lot of it could easily be cleaned up. p and body should be fully replaced.

RbnJrg · 10-22-2025, 09:57 AM

Quote:

Originally Posted by JSWolf

And get rid of px and % for the margins. You want em for the margins.

Why? It's perfectly possible, and in many cases desirable, to use "%" instead of "em" for margins. There are countless situations in which "%" should be used as margins; for example, in images when a width is set for them, and the "auto" property can't be used to center them because your beloved ADE doesn't accept it.

Just saying that margins should always be in "em" is nonsense. This is even true for paragraphs and headings. Furthermore, it's highly recommended to set the top margin of the main heading to "%" so that if the user changes the font size, the distance from the heading to the top of the viewport remains unchanged. It's also highly recommended to set the left and right margins of blockquotes to "%"; that way, any increase in font size by the user doesn't carry the risk of drastically reducing the reading block.

10-21-2025, 04:49 PM	#25
JSWolf Resident Curmudgeon Posts: 80,719 Karma: 150249619 Join Date: Nov 2006 Location: Roslindale, Massachusetts Device: Kobo Libra 2, Kobo Aura H2O, PRS-650, PRS-T1, nook STR, PW3	[ Code: body { font-family: Georgia, Baskerville, roman, 'times new roman', times, serif; color: #404040; background-color: transparent; hyphens: none; -webkit-hyphens: none; -moz-hyphens:none; adobe-hyphenate: none; margin: 30px 5% 20px 5%; text-indent: 0; text-rendering: optimizeLegibility; } And get rid of px and % for the margins. You want em for the margins. However in this case, you want 0 for the margins because you don't want any set margins for the overall page. You want no top/bottom/left/right margins. You also need to dump the webkit code as it's not ePub compliant. And the moz code has to go as this is not Firefox or any other web browser. And finally, the font-family line has to go because that could cause problems and not allow some programs to change the font. And the text-rendering also has to go. Also, dump adobe command. and dump the text indent. When you are done dumping the rubbish, there's nothing left. To be honest, the entire body is a mess. This is what I use as for the body. Code: body { widows: 1; orphans: 1; margin-top: 0; margin-right: 0; margin-bottom: 0; margin-left: 0; text-align: justify; }

Similar Threads
Thread	Thread Starter	Forum	Replies	Last Post
Add blank lines between paragraphs.	bn_el	KOReader	5	11-02-2017 11:14 AM
blank lines between paragraphs	franklekens	Kobo Reader	71	01-26-2015 12:52 PM
Blank lines between paragraphs?	ascherjim	OpenInkpot	30	12-03-2009 12:19 AM
Removing blank lines between paragraphs?	corroonb	Workshop	3	08-13-2009 04:23 PM
Insert Blank Lines Between Paragraphs	Timoleon	Calibre	14	03-22-2009 02:43 PM

10-22-2025, 01:11 AM	#26
franklekens Evangelist Posts: 407 Karma: 3421956 Join Date: Sep 2009 Device: various Kobo's, Onyx Note2, Pocketbook 360, Kindle Keyboard	Thank you everybody. It's true I was just looking for a quick fix for the most obvious display problems, but it all helps me a little to understand more of the coding. And yes, color: #404040; was the culprit. What a strange thing to put in there! Whoever would want that? Thanks a lot.