MobileRead Forums - View Single Post - How to handle wrapping of two lines at the same time?

Myshaak · 04-22-2023, 07:23 AM

Hi everyone,

I'm trying to convert a collection of songs into an ebook for Kindle Paperwhite.

The problem I am facing is that I don't know how to ensure that the line with lyrics will break with the line with chords. The belows picture should illustrate it.

Before wrap:

After wrap (and intended result):

I tried several approaches, but the only one that seemed to be working was merging the two lines into a single table row and keep both the chords and song lyrics in individual cells. Sounds crazy, but works - the screenshots are actually from the Calibre ebook viewer, format EPUB. And no, I didn't write the HTML madness manually

This is the CSS I use:

Code:

td {
  white-space: pre;
  font-family: monospace;
  display: inline-block;
  border: 1px dotted gray;
}

However, when I send this EPUB to my kindle address, the text wrapping does not work - the table rows go out of page (when changing font size, for example).

I later read that tables are not ideal for layout. Would you recommend an alternative solution?

Many thanks!

04-22-2023, 07:23 AM	#1
Myshaak Junior Member Posts: 1 Karma: 10 Join Date: Apr 2023 Device: Kindle Paperwhite	How to handle wrapping of two lines at the same time? Hi everyone, I'm trying to convert a collection of songs into an ebook for Kindle Paperwhite. The problem I am facing is that I don't know how to ensure that the line with lyrics will break with the line with chords. The belows picture should illustrate it. Before wrap: After wrap (and intended result): I tried several approaches, but the only one that seemed to be working was merging the two lines into a single table row and keep both the chords and song lyrics in individual cells. Sounds crazy, but works - the screenshots are actually from the Calibre ebook viewer, format EPUB. And no, I didn't write the HTML madness manually This is the CSS I use: Code: td { white-space: pre; font-family: monospace; display: inline-block; border: 1px dotted gray; } However, when I send this EPUB to my kindle address, the text wrapping does not work - the table rows go out of page (when changing font size, for example). I later read that tables are not ideal for layout. Would you recommend an alternative solution? Many thanks! Attached Thumbnails