CSS Line Height RTL Only

[d351r3d]

I want to affect the line height for the RTL text in the epub3 only. Help is appreciated.

[Turtle91]

Use CSS and style the RTL lines with line-height.

eg.
.rtltext {direction: rtl; text-align:right; line-height: 1.3em}

<p class="rtltext">.addaY ,addaY ,addaY</p>

[d351r3d]

Originally Posted by Turtle91

Use CSS and style the RTL lines with line-height.

eg.
.rtltext {direction: rtl; text-align:right; line-height: 1.3em}

<p class="rtltext">.addaY ,addaY ,addaY</p>

I tried that and it doesn't seem to work. If you unzip it you can check out the 3rd book verse 195. I even have it set to 5.5em so I'll know if it's working. I must be doing something obviously wrong.

style.css is the sheet used.

*I think I put the stuff in the wrong spot in the sheet somehow. idk, but it works now. Good times

*Another edit. Seeing as how Moon+ Reader chops up each individual verse into a separate deal and how no epub reader shows anything as how it was created I seriously don't think line height is important when all epub readers change everything you make and most go out of their way to not show your styles as you created them to be shown.

[Turtle91]

Originally Posted by d351r3d

*I think I put the stuff in the wrong spot in the sheet somehow. idk, but it works now. Good times

Great - glad it's working!

Originally Posted by d351r3d

*Another edit. Seeing as how Moon+ Reader chops up each individual verse into a separate deal and how no epub reader shows anything as how it was created I seriously don't think line height is important when all epub readers change everything you make and most go out of their way to not show your styles as you created them to be shown.

Many epub readers ignore the publisher's css by default - unfortunately for a good reason. There are MANY publishers that don't know their rear from a whole in the ground when it comes to CSS. Many times it is due to them using automated processes, or using templates that are just wrong... The epub reader devices/apps need to provide as clean and consistent an experience as possible so they ignore all the crappola css and implement their own. Most of those readers, or at least the good ones, allow you to turn on a "publisher's mode" to use the CSS as supplied by the publisher.

[d351r3d]

Originally Posted by Turtle91

Great - glad it's working!


Many epub readers ignore the publisher's css by default - unfortunately for a good reason. There are MANY publishers that don't know their rear from a whole in the ground when it comes to CSS. Many times it is due to them using automated processes, or using templates that are just wrong... The epub reader devices/apps need to provide as clean and consistent an experience as possible so they ignore all the crappola css and implement their own. Most of those readers, or at least the good ones, allow you to turn on a "publisher's mode" to use the CSS as supplied by the publisher.

The screenshot is a brand new epub3 with 1 page, fonts, and css. Lithium fails to correctly render it.

the epub is filled with filler english.

[Turtle91]

I'm sorry - I'd need to see the CSS you used, and what you think is displaying incorrectly, to draw any kind of conclusion.

I saw Doitsu's response in your Sigil thread about RTL css. Is this something different?

I have to admit that it has been many moons since I studied Arabic in college, but it appeared the word order was not consistent in the image in his post. Is that the issue? I attributed the word order thing to my not being familiar with different language keyboard procedures - I completely defer to Doitsu's expertise there.

[d351r3d]

Originally Posted by Turtle91

I'm sorry - I'd need to see the CSS you used, and what you think is displaying incorrectly, to draw any kind of conclusion.

I saw Doitsu's response in your Sigil thread about RTL css. Is this something different?

I have to admit that it has been many moons since I studied Arabic in college, but it appeared the word order was not consistent in the image in his post. Is that the issue? I attributed the word order thing to my not being familiar with different language keyboard procedures - I completely defer to Doitsu's expertise there.

I'm not familiar with Arabic at all. I just copy pasted it. I don't even speak it. I just wanted to do it. I'm also doing the bible. When I copy pasta the Arabic inside of Google translate it understands it and gives back clear english. I would give it to someone that speaks real arabic and see what they have to say. I just want to see what's going on because I'm no wizard.

Again this epub has filler english content.

CSS

@font-face {
  font-family: "Roboto";
  font-weight: normal;
  font-style: normal;
  src: url(../Fonts/Roboto-Light.ttf);
}

@font-face {
  font-family: "AmiriQuran";
  font-weight: normal;
  font-style: normal;
  src: url(../Fonts/AmiriQuran.otf);
}


body {
    font-family: 'Roboto','AmiriQuran', sans-serif;
}

.rtltext {direction: rtl; line-height: 3}

h1 {
  text-align: center;
}

h4 {
  text-align: left;
}


p {
  text-align: justify;
}

.rtltext {direction: rtl; line-height: 3em}

HTML

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:epub="http://www.idpf.org/2007/ops">
<head>
  <title></title>
<link href="../Styles/Style0001.css" type="text/css" rel="stylesheet"/>
</head>

<body>
<h1>Blah blah blah blah blah blah<br/>
سورة البقرة
</h1>

<h4 id="sigil_toc_id_1">2:1</h4>
<p class="rtltext">
الم
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<h4 id="sigil_toc_id_2">2:2</h4>
<p class="rtltext">
ذَٰلِكَ الْكِتَابُ لَا رَيْبَ ۛ فِيهِ ۛ هُدًى لِّلْمُتَّقِينَ
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<h4 id="sigil_toc_id_3">2:3</h4>
<p class="rtltext">
الَّذِينَ يُؤْمِنُونَ بِالْغَيْبِ وَيُقِيمُونَ الصَّلَاةَ وَمِمَّا رَزَقْنَاهُمْ يُنفِقُونَ
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<h4 id="sigil_toc_id_4">2:4</h4>
<p class="rtltext">
وَالَّذِينَ يُؤْمِنُونَ بِمَا أُنزِلَ إِلَيْكَ وَمَا أُنزِلَ مِن قَبْلِكَ وَبِالْآخِرَةِ هُمْ يُوقِنُونَ
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<h4 id="sigil_toc_id_5">2:5</h4>
<p class="rtltext">
أُولَٰئِكَ عَلَىٰ هُدًى مِّن رَّبِّهِمْ ۖ وَأُولَٰئِكَ هُمُ الْمُفْلِحُونَ
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<h4 id="sigil_toc_id_6">2:6</h4>
<p class="rtltext">
إِنَّ الَّذِينَ كَفَرُوا سَوَاءٌ عَلَيْهِمْ أَأَنذَرْتَهُمْ أَمْ لَمْ تُنذِرْهُمْ لَا يُؤْمِنُونَ
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<h4 id="sigil_toc_id_7">2:7</h4>
<p class="rtltext">
خَتَمَ اللَّهُ عَلَىٰ قُلُوبِهِمْ وَعَلَىٰ سَمْعِهِمْ ۖ وَعَلَىٰ أَبْصَارِهِمْ غِشَاوَةٌ ۖ وَلَهُمْ عَذَابٌ عَظِيمٌ
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>

<h4 id="sigil_toc_id_8">2:8</h4>
<p class="rtltext">
وَمِنَ النَّاسِ مَن يَقُولُ آمَنَّا بِاللَّهِ وَبِالْيَوْمِ الْآخِرِ وَمَا هُم بِمُؤْمِنِينَ
</p>
<p>Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah.</p>
</body>
</html>

[Turtle91]

Ah, sorry again - I didn't see the ebook attachment on your earlier post.

I can't speak to Lithium's fidelity, perhaps someone else is more familiar with that app. However, the line-height appears to be coded properly in your css. I've attached two images where I added a border to visualize the differences between 2 and 5 line-height and it reacts properly.

.rtltext {direction: rtl; line-height: 5; border:1px solid red}

What exactly is incorrect with Lithium's display?

[d351r3d]

Originally Posted by Turtle91

Ah, sorry again - I didn't see the ebook attachment on your earlier post.

I can't speak to Lithium's fidelity, perhaps someone else is more familiar with that app. However, the line-height appears to be coded properly in your css. I've attached two images where I added a border to visualize the differences between 2 and 5 line-height and it reacts properly.

.rtltext {direction: rtl; line-height: 5; border:1px solid red}

What exactly is incorrect with Lithium's display?

Lithium , if you take a look at 2:6, 2:7 the line height is just nothing. In Lithium line height just doesn't matter or seem to exist. Which is lame.

Related, is the way Moon Reader handles the epub correct? Lile it opens each h1, h4 as a separate page for some reason and I can't find a way to make it not do that?

[Turtle91]

In Sigil the line-height is displaying properly (see attached). Not sure why Lithium isn't??

I noticed that in your latest epub attachment (nothing 007.epub) you had a duplicate .rtltext definition in your css file. CSS rules stipulate that the last, or more recent, style definition is the one that takes priority, so changing the line-height on the first .rtltext won't change the display because the duplicate at the bottom keeps the line-height at 3.

You will definitely find that some readers/apps are much better than others. I have never been impressed with moon reader, or moon+. I prefer readers that render the CSS 'properly'...especially since I clean up the CSS on every book I read. I've found that the Marvin app is very good in that regard - although I have to turn on 'Publisher's Layout' every time I open a new book. The downside to Marvin is that it is an iOS only app and hasn't been updated in a while... although there are very few things I consider needing to be updated...

[d351r3d]

Originally Posted by Turtle91

In Sigil the line-height is displaying properly (see attached). Not sure why Lithium isn't??

I noticed that in your latest epub attachment (nothing 007.epub) you had a duplicate .rtltext definition in your css file. CSS rules stipulate that the last, or more recent, style definition is the one that takes priority, so changing the line-height on the first .rtltext won't change the display because the duplicate at the bottom keeps the line-height at 3.

You will definitely find that some readers/apps are much better than others. I have never been impressed with moon reader, or moon+. I prefer readers that render the CSS 'properly'...especially since I clean up the CSS on every book I read. I've found that the Marvin app is very good in that regard - although I have to turn on 'Publisher's Layout' every time I open a new book. The downside to Marvin is that it is an iOS only app and hasn't been updated in a while... although there are very few things I consider needing to be updated...

I have to deal with my children all day and that's probably the reason for the CSS duplicate. I'll definitely be on the lookout for an Android app that does the same thing as Marvin.