Line-height from ePub to AW3

[ElMiko]

Working in ePub, I have text that is split by <br/> tag, where the tage has a css style that adjusts the height of the break.

Line 1<br class="brheight"/>Line 2

css:
.brheight {
   line-height: 2.5em;
   }

This displays without issue in ePub, but when I convert to AZW3, the line height is re-set to 1em. To be clear, the new stylesheet still retains the same css styling (2.5em), but for some reason, the display doesn't reflect the code.

Any ideas as to what's happening in the conversion process that causes this error?

[theducks]

Try leaving off the 'em'
line-height is 'unit less' . it inherits the unit from the current block

line-height: 1.2%;
line-height: 2.5;

[ElMiko]

Originally Posted by theducks

Try leaving off the 'em'
line-height is 'unit less' . it inherits the unit from the current block

line-height: 1.2%;
line-height: 2.5;

Nee-ope. Gave that a try Multiple iterations (just the 2.5/1.2% and 2.5/250% and 2.5/et al). Still converts to the break to a single line...

Still, thanks for the tip on em; will be sure to (dis)integrate that into my future css.

[JSWolf]

<br/> is a bad idea when you can do this in CSS. The following will work and you can dump the <br/> as the CSS is creating the space and not the <br/>/

<p class="brheight">This is a test></p>

.brheight {
  margin-top: 2.5em;
}

[kovidgoyal]

The display in what? Kindles, calibre's viewer?

[ElMiko]

Originally Posted by kovidgoyal

The display in what? Kindles, calibre's viewer?

In calibre's viewer and in Kindle.


re: using <p> tags — sometimes I'd like a line break that still inherits the specific class attributes of the initial element. Using a <br/> tag is an efficient way to do that (provided it works). Again, what's surprising to me is that it displays without any problem in ePub (both in Sigil and in calibre), but then gets ignored in an AZW3 conversion.

[gbm]

Originally Posted by ElMiko

In calibre's viewer and in Kindle.


re: using <p> tags — sometimes I'd like a line break that still inherits the specific class attributes of the initial element. Using a <br/> tag is an efficient way to do that (provided it works). Again, what's surprising to me is that it displays without any problem in ePub (both in Sigil and in calibre), but then gets ignored in an AZW3 conversion.

Then just use a no-break-space.

<p>*</p>

bernie

[Brett Merkey]

a line break that still inherits the specific class attributes of the initial element. Using a <br/> tag is an efficient way to do that (provided it works)

The way you have formulated the above statement indicates that you are no newbie to the practice and art of presentational coding. I agree with the advice of JSWolf that you would be happier using more conventional and more easily convertible style habits.

As you can tell from comparing the code transformation of any epub to azw3 conversion, Calibre can produce some bizarro tag soup that is difficult to describe. Apparently this is by design. The only way to insure what you want after a conversion is to re-edit the azw3 version. For me, this means eliminating any style with "calibre" in its name. This is usually more trouble than it is worth because Calibre, overall, does a commendable job in dealing with all the contingencies that various coding habits present.

[jhowell]

I did some playing around with this, adding the style "line-height: 2.5em" to a <br> element. I used the Kindle Previewer to convert the book in order to avoid any issues that may be introduced by calibre conversion.

In the MOBI portion of the Master MOBI created by the Previewer, the style is simply eliminated from the <br>.

In the KF8 (azw3) the style is left intact, but is ignored by the renderer when displaying the book.

In the KFX (enhanced typesetting) view created by the Previewer the line-height was retained, but applied to the line above the break, causing there to be two gaps in the paragraph. This reflects how most modern Kindle devices and apps would display that markup in a book sold on Amazon.

I recommend just using multiple <br> elements and living with the restriction of having only integer multiple sizes available.

[JSWolf]

Originally Posted by jhowell

I did some playing around with this, adding the style "line-height: 2.5em" to a <br> element. I used the Kindle Previewer to convert the book in order to avoid any issues that may be introduced by calibre conversion.

In the MOBI portion of the Master MOBI created by the Previewer, the style is simply eliminated from the <br>.

In the KF8 (azw3) the style is left intact, but is ignored by the renderer when displaying the book.

In the KFX (enhanced typesetting) view created by the Previewer the line-height was retained, but applied to the line above the break, causing there to be two gaps in the paragraph. This reflects how most modern Kindle devices and apps would display that markup in a book sold on Amazon.

I recommend just using multiple <br> elements and living with the restriction of having only integral sizes available.

I disagree with double <br/>. Go with the code I posted in message #4 of this thread. It does work ePub, KF8, KFX, and should work for Mobi.

However, if this is a section break, you can try a padding-top instead of a margin-top. I know this works better with ePub. I don't know what it would do in Mobi. But KF8 should works and KFX, I am unsure.

[ElMiko]

So, if I absolutely have to rely on <p> for consistently displaying the desired line-break characteristics, obviously that's the way to go! But I am curious as to why <br /> code should be problematic. Has it been deprecated? I confess that I'm "self-educated" on html, which means there are huge gaps in my knowledge and probably several aspects that I THINK I understand, but actually don't (like, assigning the "em" unit to line-height, for example!).

[JSWolf]

Originally Posted by ElMiko

So, if I absolutely have to rely on <p> for consistently displaying the desired line-break characteristics, obviously that's the way to go! But I am curious as to why <br /> code should be problematic. Has it been deprecated? I confess that I'm "self-educated" on html, which means there are huge gaps in my knowledge and probably several aspects that I THINK I understand, but actually don't (like, assigning the "em" unit to line-height, for example!).

I strip out all line-height except where needed and in most eBooks, it's not needed. So out if goes.

As for <br/>, I prefer to deal with line spacing in CSS and not use them in that manor. Yes, <br/> works for breaking a line in two. But for using it to add a line space, forget it. It's a kludge and poor coding. Also, it's more difficult if you want ot change the spacing. You have to then dump the <br/> and put in the SS code that should have been there in the first place.


As for em, there's no reason not to use it as it's scalable unlike px or pt.