RTL Arabic Text is Brutal

[d351r3d]

I'm not sure what Category this should be in but I use Sigil. I'm having an issue trying to figure out RTL (Right to Left) text, exclusively Arabic. I'd like to keep this formatting of the content below because if not the only way would be to split it into 3 paragraphs:
1. Chapter number
2. Arabic text
3. English text

I was wondering how I'd be able to make just the Arabic text RTL by using CSS or some other means that would work in an epub because no one seems to have covered this exact topic or an exact solution.

<p>2:25<br/>
وَبَشِّرِ الَّذِينَ آمَنُوا وَعَمِلُوا الصَّالِحَاتِ أَنَّ لَهُمْ جَنَّاتٍ تَجْرِي مِن تَحْتِهَا الْأَنْهَارُ ۖ كُلَّمَا رُزِقُوا مِنْهَا مِن ثَمَرَةٍ رِّزْقًا ۙ قَالُوا هَٰذَا الَّذِي رُزِقْنَا مِن قَبْلُ ۖ وَأُتُوا بِهِ مُتَشَابِهًا ۖ وَلَهُمْ فِيهَا أَزْوَاجٌ مُّطَهَّرَةٌ ۖ وَهُمْ فِيهَا خَالِدُونَ
<br/>And give good tidings to those who believe and do righteous deeds that they will have gardens [in Paradise] beneath which rivers flow. Whenever they are provided with a provision of fruit therefrom, they will say, "This is what we were provided with before." And it is given to them in likeness. And they will have therein purified spouses, and they will abide therein eternally.</p>

[KevinH]

Have you tried simply adding the dir="rtl" on either the p tag or wrap the rtl text in a span and add the dir="rtl" on the span?

[Doitsu]

Originally Posted by d351r3d

I was wondering how I'd be able to make just the Arabic text RTL by using CSS or some other means that would work in an epub because no one seems to have covered this exact topic or an exact solution.

The World Wide Web Consortium recommends using dedicated bidi markup to describe RTL content, where markup is available. BTW, the IDPF adopted this position, and epub books with RTL styles will fail EPUBCheck.

Since you can't assign dir="rtl" attributes to control the alignment inline tags such as <span>, you'll have to use <p> tags (or other block level tags). For example:

<h3>2:25</h3>
<p dir="rtl">وَبَشِّرِ الَّذِينَ آمَنُوا وَعَمِلُوا الصَّالِحَاتِ أَنَّ لَهُمْ جَنَّاتٍ تَجْرِي مِن تَحْتِهَا الْأَنْهَارُ ۖ كُلَّمَا رُزِقُوا مِنْهَا مِن ثَمَرَةٍ رِّزْقًا ۙ قَالُوا هَٰذَا الَّذِي رُزِقْنَا مِن قَبْلُ ۖ وَأُتُوا بِهِ مُتَشَابِهًا ۖ وَلَهُمْ فِيهَا أَزْوَاجٌ مُّطَهَّرَةٌ ۖ وَهُمْ فِيهَا خَالِدُونَ</p>
<p>And give good tidings to those who believe and do righteous deeds that they will have gardens [in Paradise] beneath which rivers flow. Whenever they are provided with a provision of fruit therefrom, they will say, "This is what we were provided with before." And it is given to them in likeness. And they will have therein purified spouses, and they will abide therein eternally.</p>

I'd also recommend using h1..h6 tags for the surah numbers. This'll simplify generating the TOC once you're done with the Qur'an.

Note also that very few epub3 readers/apps actually support RTL text. (AFAIK, there's isn't a single epub2 app that supports RTL text.)

I.e., you might want to create an epub3 book or convert your book to an epub3 book once you're done.

[KevinH]

According to W3c you can use a dir attribute on a span in html5.

See here:

https://www.w3.org/TR/WCAG20-TECHS/H56.html

Does this not work in epub3?

[Doitsu]

Originally Posted by KevinH

According to W3c you can use a dir attribute on a span in html5. Does this not work in epub3?

You can, of course, add a dir="rtl" attribute" to a <span> tag and the text is properly rendered as RTL text, however it'll be aligned left. What I meant is that multiline text in <span> tags can't be aligned right via CSS. (I've updated my post.)

  <p><span style="text-align: right;" dir="rtl">وَبَشِّرِ الَّذِينَ آمَنُوا وَعَمِلُوا الصَّالِحَاتِ أَنَّ لَهُمْ جَنَّاتٍ تَجْرِي مِن تَحْتِهَا الْأَنْهَارُ ۖ كُلَّمَا رُزِقُوا مِنْهَا مِن ثَمَرَةٍ رِّزْقًا ۙ قَالُوا هَٰذَا الَّذِي رُزِقْنَا مِن قَبْلُ ۖ وَأُتُوا بِهِ مُتَشَابِهًا ۖ وَلَهُمْ فِيهَا أَزْوَاجٌ مُّطَهَّرَةٌ ۖ وَهُمْ فِيهَا خَالِدُونَ</span><br/> And give good tidings to those who believe and do righteous deeds that they will have gardens [in Paradise] eath which rivers flow. Whenever they are provided with a provision of fruit therefrom, they will say, "This is what we were provided with before." And it is given to them in likeness. And they will have therein purified spouses, and they will abide therein eternally.</p>

(If you compare the screenshot with the first screenshot you'll notice that the second line is aligned left.)

[KevinH]

Good to know. Thanks for the explanation.

[d351r3d]

Originally Posted by Doitsu

The World Wide Web Consortium recommends using dedicated bidi markup to describe RTL content, where markup is available. BTW, the IDPF adopted this position, and epub books with RTL styles will fail EPUBCheck.

Since you can't assign dir="rtl" attributes to control the alignment inline tags such as <span>, you'll have to use <p> tags (or other block level tags). For example:

<h3>2:25</h3>
<p dir="rtl">وَبَشِّرِ الَّذِينَ آمَنُوا وَعَمِلُوا الصَّالِحَاتِ أَنَّ لَهُمْ جَنَّاتٍ تَجْرِي مِن تَحْتِهَا الْأَنْهَارُ ۖ كُلَّمَا رُزِقُوا مِنْهَا مِن ثَمَرَةٍ رِّزْقًا ۙ قَالُوا هَٰذَا الَّذِي رُزِقْنَا مِن قَبْلُ ۖ وَأُتُوا بِهِ مُتَشَابِهًا ۖ وَلَهُمْ فِيهَا أَزْوَاجٌ مُّطَهَّرَةٌ ۖ وَهُمْ فِيهَا خَالِدُونَ</p>
<p>And give good tidings to those who believe and do righteous deeds that they will have gardens [in Paradise] beneath which rivers flow. Whenever they are provided with a provision of fruit therefrom, they will say, "This is what we were provided with before." And it is given to them in likeness. And they will have therein purified spouses, and they will abide therein eternally.</p>

I'd also recommend using h1..h6 tags for the surah numbers. This'll simplify generating the TOC once you're done with the Qur'an.

Note also that very few epub3 readers/apps actually support RTL text. (AFAIK, there's isn't a single epub2 app that supports RTL text.)

I.e., you might want to create an epub3 book or convert your book to an epub3 book once you're done.

All I make is epub v3 so that's all good. I guess I have to go with a paragraph for Arabic then English. RTL is so brutal. I can't wait for Top to bottom asian stuff.

[d351r3d]

Originally Posted by d351r3d

All I make is epub v3 so that's all good. I guess I have to go with a paragraph for Arabic then English. RTL is so brutal. I can't wait for Top to bottom asian stuff.

http://idpf.github.io/epub3-samples/30/samples.html

Lithium and Moon+ Reader seem to do epub3 RTL fine. I don't have an iOS anything so I'm not that sure.

It does suck that you have to do it with individual paragraphs but it does look far better.

[Doitsu]

Originally Posted by d351r3d

Lithium and Moon+ Reader seem to do epub3 RTL fine. I don't have an iOS anything so I'm not that sure.

The iOS versions of Apple Books and Adobe Digital Editions 4.5 support RTL text, however, the iOS version of Adobe Digital Editions has some minor page layout rendering issues. (The Windows version of Adobe Digital Editions 4.5 works better.)