Mobileread
CSS Line Height RTL Only
#1  d351r3d 06-02-2020, 06:25 PM
I want to affect the line height for the RTL text in the epub3 only. Help is appreciated.
Reply 

#2  Turtle91 06-02-2020, 08:38 PM
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>
Reply 

#3  d351r3d 06-03-2020, 12:18 AM
Quote 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.
[epub] quran222 english titles before arabic roboto light.epub (1.50 MB, 24 views)
Reply 

#4  Turtle91 06-03-2020, 08:00 AM
Quote 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!
Quote 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.
Reply 

#5  d351r3d 06-03-2020, 08:26 AM
Quote 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.
Screenshot_2020-06-03-16-20-24-145_com.faultexception.reader.jpg 
[epub] nothing 003.epub (173.8 KB, 23 views)
Reply 

#6  Turtle91 06-03-2020, 08:47 AM
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.
Reply 

#7  d351r3d 06-03-2020, 08:59 AM
Quote 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
Code
@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
Code
<?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>
[epub] nothing 007.epub (173.8 KB, 22 views)
Reply 

#8  Turtle91 06-03-2020, 09:01 AM
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?
capture1.png capture2.png 
Reply 

#9  d351r3d 06-03-2020, 09:19 AM
Quote 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?
Screenshot_2020-06-03-17-15-00-377_com.faultexception.reader.jpg Screenshot_2020-06-03-17-18-26-472_com.flyersoft.moonreader.jpg 
Reply 

#10  Turtle91 06-03-2020, 09:41 AM
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...
capture1.png 
Reply 

  Next »  Last »  (1/2)
Today's Posts | Search this Thread | Login | Register