Kobo Book Description Formatting

[m_pluto]

Hey, so I have a weird pet peeve around how the spacing for the book descriptions on my kobo [sage]. The line spacing between paragraphs is too big, and until I found a (somewhat clunky) workaround, the book descriptions always started with an extra blank paragraph space.

So far the only solution I've come up with is to use line breaks instead of paragraph breaks, but the drawback there is that on the kobo line breaks often are not always clear to be new paragraphs.

Bonus if anyone is able to help me figure out how to use a smaller font size for the book description as well?

[Edit to add: I sideload all my books through calibre, and while I know I can change the format/appearance of descriptions in calibre, this does not seem to translate over to my kobo reader]

[jackie_w]

Originally Posted by m_pluto

Hey, so I have a weird pet peeve around how the spacing for the book descriptions on my kobo [sage]. The line spacing between paragraphs is too big, and until I found a (somewhat clunky) workaround, the book descriptions always started with an extra blank paragraph space.

So far the only solution I've come up with is to use line breaks instead of paragraph breaks, but the drawback there is that on the kobo line breaks often are not always clear to be new paragraphs.

Bonus if anyone is able to help me figure out how to use a smaller font size for the book description as well?

[Edit to add: I sideload all my books through calibre, and while I know I can change the format/appearance of descriptions in calibre, this does not seem to translate over to my kobo reader]

Have you ever used the kobopatch system? If so, there are a few existing patches (in nickel.yaml) which can be used to customise the synopsis page in various ways. Off the top of my head I think the existing patches can change:

• font-size
• line spacing
• increase the vertical height available for the synopsis in the bottom half of the Details page by reducing the height of the top half (Cover/Title/Author etc).

If/when you become comfortable using kobopatch it may be possible to add further synopsis customisations. Anything which can be achieved using simple CSS styles should be possible. If, having tried them, the existing patches aren't enough for you then come back and we can talk more.

[Sirtel]

There is no patch for this issue, AFAIK. If you use the <p> tag for paragraphs in the calibre comments, your Kobo will insert an empty paragraph there. I've found that the only way to get around this issue is to replace <p> with <br> in the comments. There may be other ways (I dimly remember trying something with metadata plugboards once), but they haven't worked as well for me.

The line-spacing patch decreases line-height, but it doesn't remove the empty paragraphs Kobo readers insert in book descriptions.

[graycyn]

I use Sigil, and when I put a book description into the metadata editor field, I format like so:

<p>First paragraph of description.</p><p>Second paragraph.</p><p>Third paragraph and so on.</p>

The paragraph code is all run together, exactly as shown! This renders paragraphs with one line between, much as you'd see in straight HTML with no styling. As for controlling font size, I don't know, as I've never tried to do that. I leave all that to the device UI.

I use a Sage and this is not giving me any extra space when I pull up book details. So if you want to try via Sigil, this may help. No guarantees, since I have no idea what, specifically, your desired look is.

[Sirtel]

Originally Posted by graycyn

I use Sigil, and when I put a book description into the metadata editor field, I format like so:

<p>First paragraph of description.</p><p>Second paragraph.</p><p>Third paragraph and so on.</p>

The paragraph code is all run together, exactly as shown! This renders paragraphs with one line between, much as you'd see in straight HTML with no styling. As for controlling font size, I don't know, as I've never tried to do that. I leave all that to the device UI.

I use a Sage and this is not giving me any extra space when I pull up book details. So if you want to try via Sigil, this may help. No guarantees, since I have no idea what, specifically, your desired look is.

Yes, the problem is some of us don't want that line between paragraphs. I don't, for example. That's why I use <br> instead of <p>.

[jackie_w]

Originally Posted by Sirtel

There is no patch for this issue, AFAIK. If you use the <p> tag for paragraphs in the calibre comments, your Kobo will insert an empty paragraph there. I've found that the only way to get around this issue is to replace <p> with <br> in the comments. There may be other ways (I dimly remember trying something with metadata plugboards once), but they haven't worked as well for me.

The line-spacing patch decreases line-height, but it doesn't remove the empty paragraphs Kobo readers insert in book descriptions.

The existing Kobo fw default CSS for the synopsis (all Kobo devices) is

body {
  font-family: Georgia;
  margin: 0px;
  padding: 0px;
}

plus device-specific values for font-size and line-height

body[qApp_deviceIs???=true] {
  font-size: ???px;
}
body[qApp_deviceIs???=true] {
  line-height: ???em;
}

All of those are patchable but only the last two have existing patches. Patching the first one should be do-able, other than there isn't infinite space to play with (think keyhole surgery).

An extra bit of CSS code appended to the end of the first item, should suffice to narrow the gap between paragraphs e.g.

p {margin:.5em 0 0 0;}

[m_pluto]

Originally Posted by Sirtel

There is no patch for this issue, AFAIK. If you use the <p> tag for paragraphs in the calibre comments, your Kobo will insert an empty paragraph there. I've found that the only way to get around this issue is to replace <p> with <br> in the comments. There may be other ways (I dimly remember trying something with metadata plugboards once), but they haven't worked as well for me.

The line-spacing patch decreases line-height, but it doesn't remove the empty paragraphs Kobo readers insert in book descriptions.

If you're taking about the empty paragraph/line that is inserted at the beginning of the description there is actually a way around it! I figured it out when I was poking my nose through the sqlite file for the database of the books checking to see what was there.

All you have to do is do a mass search/replace selecting the comments section as your field and enter

<div>¶*

(*basically div and a paragraph space)

And voila, you can get rid of that pesky empty line at the top of your book description! If you wanna be super clean, do the same above with the search/replace by searching and removing "</div>" so both the opening and closing tags are gone, but bob's your uncle. The only thing to keep in mind about this is that anytime you go in to edit a book's metadata individually, you'll have to go back and do this again, as calibre tends to re-enter the div tags back in. It's not perfect, but it's something.

[m_pluto]

Originally Posted by jackie_w

Have you ever used the kobopatch system? If so, there are a few existing patches (in nickel.yaml) which can be used to customise the synopsis page in various ways. Off the top of my head I think the existing patches can change:

• font-size
• line spacing
• increase the vertical height available for the synopsis in the bottom half of the Details page by reducing the height of the top half (Cover/Title/Author etc).

If/when you become comfortable using kobopatch it may be possible to add further synopsis customisations. Anything which can be achieved using simple CSS styles should be possible. If, having tried them, the existing patches aren't enough for you then come back and we can talk more.

I haven't looked into it, as I hadn't heard of it until today, but I'll to some digging into it tonight..... I'm sure once I have it figured out it will be fairly simple.... *eyetwitch*

[m_pluto]

Okay, so I got 90% of what I wanted changed. The last thing is gonna needs some digging as I wanna change the margin-top/margin-bottom (or even just the margin in general) for the <p> tag.

ex. in plain html:

<p style="margin:0.5em 0">

[m_pluto]

So here is an example of what I have going on (still figuring out how to get the screenshot feature working, so I had to settle for taking a picture with my phone for now....). I'd like to change the margins to be less than half, more than what <br/> would allow for between the paragraphs (if at all possible). Bonus points for text indent maybe if possible?

Spoiler:

[Sirtel]

Originally Posted by m_pluto

If you're taking about the empty paragraph/line that is inserted at the beginning of the description there is actually a way around it! I figured it out when I was poking my nose through the sqlite file for the database of the books checking to see what was there.

All you have to do is do a mass search/replace selecting the comments section as your field and enter

<div>¶*

(*basically div and a paragraph space)

And voila, you can get rid of that pesky empty line at the top of your book description! If you wanna be super clean, do the same above with the search/replace by searching and removing "</div>" so both the opening and closing tags are gone, but bob's your uncle. The only thing to keep in mind about this is that anytime you go in to edit a book's metadata individually, you'll have to go back and do this again, as calibre tends to re-enter the div tags back in. It's not perfect, but it's something.

No, I'm talking about empty lines between every paragraph, not just in the beginning.

[Quoth]

Originally Posted by Sirtel

No, I'm talking about empty lines between every paragraph, not just in the beginning.

It seems the Book Description does that with <p>something</p>. Obviously having a single <p> </p> and multiple <br /> sort of "works".

[jackie_w]

Originally Posted by m_pluto

Okay, so I got 90% of what I wanted changed. The last thing is gonna needs some digging as I wanna change the margin-top/margin-bottom (or even just the margin in general) for the <p> tag.

ex. in plain html:

<p style="margin:0.5em 0">

Originally Posted by m_pluto

So here is an example of what I have going on (still figuring out how to get the screenshot feature working, so I had to settle for taking a picture with my phone for now....). I'd like to change the margins to be less than half, more than what <br/> would allow for between the paragraphs (if at all possible). Bonus points for text indent maybe if possible?

Did any of your 90% success involve using kobopatch? If so I think the remaining 10% (including text-indent) can be done with a small addition to one of the existing patches. I need to know which of the 3 synopsis patches you decided to enable to achieve what you've done so far.

The patch named Custom synopsis details line spacing would be the safest one to customise with the extra <p> tag CSS required for your 10%.



BTW I don't think you need to take the living-dangerously option of manually editing calibre's database to remove the automatic linefeed chars in the calibre comments field. You should be able to do that using a calibre Metadata Plugboard with the template language. Comments is one of the fields available for on-the-fly modifying during calibre's send-to-device plus the calibre Kobo driver (KOBOTOUCH/KOBOTOUCHEXTENDED) option of automatic metadata update on every USB connect. All that should be needed is a simple replace '\n' with ''.

[m_pluto]

Originally Posted by jackie_w

Did any of your 90% success involve using kobopatch? If so I think the remaining 10% (including text-indent) can be done with a small addition to one of the existing patches. I need to know which of the 3 synopsis patches you decided to enable to achieve what you've done so far.

The patch named Custom synopsis details line spacing would be the safest one to customise with the extra <p> tag CSS required for your 10%.



BTW I don't think you need to take the living-dangerously option of manually editing calibre's database to remove the automatic linefeed chars in the calibre comments field. You should be able to do that using a calibre Metadata Plugboard with the template language. Comments is one of the fields available for on-the-fly modifying during calibre's send-to-device plus the calibre Kobo driver (KOBOTOUCH/KOBOTOUCHEXTENDED) option of automatic metadata update on every USB connect. All that should be needed is a simple replace '\n' with ''.

90% was really more of an arbitrary number I tossed out there to say it was a lot better than it was before I guess really. But yes, I did modify the line spacing size, font size, and increase the synopsis area size. Really all I want to be able to do at this point is just modify the margin for the <p> tag, trying to figure out how to do that, but I'm still parsing out how the lines height is changed exactly.

As for the metadata, huh, I'll look into that, as I hadn't thought of it before.

[jackie_w]

Originally Posted by m_pluto

90% was really more of an arbitrary number I tossed out there to say it was a lot better than it was before I guess really. But yes, I did modify the line spacing size, font size, and increase the synopsis area size. Really all I want to be able to do at this point is just modify the margin for the <p> tag, trying to figure out how to do that, but I'm still parsing out how the lines height is changed exactly.

Try replacing in its entirety nickel.yaml patch Custom synopsis details line spacing with the following replacement:

Spoiler:

Custom synopsis details line spacing:
  - Enabled: no
  - Description: Sets the line spacing for Book details synopsis & <p> margins/indent
  - FindZlib: "body[qApp_deviceIsTrilogy=true] {\n  line-height: 1.45em;" # qss/BookDetails.qss
  - ReplaceZlibGroup:
      Replacements:
        # m_pluto - add style to reduce inter-paragraph margins for <p> tags
        - Find:    "body {\n  font-family: Georgia;\n  margin: 0px;\n  padding: 0px;\n}"
          Replace: "body {font-family:Georgia; margin:0; padding:0;}\np {margin:0.5em 0 0 0; text-indent:1.5em;}"

        # m_pluto - remove line-height code for oldest Trilogy/Phoenix devices to create space for above code
        - {Find: "body[qApp_deviceIsTrilogy=true] {\n  line-height: 1.45em;\n}\n", Replace: "\n"}
        - {Find: "body[qApp_deviceIsPhoenix=true] {\n  line-height: 1.4em;\n}\n", Replace: "\n"}
          
        # AuraHD/AuraH2O/AuraH2O2/GloHD/ClaraHD/Clara2E (Dragon) and
        # LibraH2O/Libra2 (Storm) and
        # AuraOne/Forma/Sage/Elipsa/Elipsa2E (Daylight) 
        - {Find: "line-height: 1.35em;", Replace: "line-height: 1.3em;"}

It should work as you wish on your Sage once you enable it.

Your new requirements are handled by the last half of the 1st Replace (in red). Change those margin and text-indent values as you see fit.

You can customise line-height as you've done previously using the last Find/Replace.

Please note that the additional code for <p> tags made the Replace code longer than the Find code. So it was necessary to free up some space elsewhere by removing code that will never be used by your Sage. Hence the need for the two blue Find/Replace lines.

N.B.: If anyone other than @m_pluto is reading this, please don't use it on any of these older Kobo devices:

• Touch/Mini (Trilogy)
• Glo/Aura/Aura2E (Phoenix)

ETA: I tested this myself on an old AuraOne 7.8" device which is equivalent to a Sage for nickel.yaml patches.