Arabic Text not rendering correctly in EPUB

[davids50250536]

Hello there,

So I'm working on a book in Arabic but I'm having an issue with exporting the book to an EPUB.

Basically, the Arabic text that gets rendered in an EPUB looks very different from the text in InDesign. The text that gets rendered in a PDF if I export to PDF from InDesign looks perfect, however. Now, I know EPUB format is basically web format, and that InDesign is rendering out each character is a single HTML element with absolute positioning and transforms everywhere, but i'm not sure why it does this.

I'm getting to the point of thinking that all Arabic text should be inserted into the book as images so that they render consistently across all formats... which is bad!

I'm exporting to a fixed layout epub, I have world-ready enabled, I have tried multiple different fonts (mylotus, a few google ones and Adobe Arabic) all have the same results.

If anyone has any ideas that would be fantastic!

Thanks!

[Steve Werner]

For people to help, you would have to tell us: (1) What version of InDesign are you using? (2) Are you exporting reflowable EPUB or fixed layout EPUB? (3) What EPUB reader are you using?

[davids50250536]

Version is CC2017. I have tried using multiple EPUB readers. iBooks, redium, and I have also opened the individual pages in a web browser. It consistently renders incorrectly. As stated above, I am exporting to a fixed layout EPUB.

This is not a reader issue. I believe the issue is the way InDesign is exporting each character as a single HTML element with absolute positioning.

I have spoken to Adobe support this morning, and they basically said Middle Eastern right-to-left text is not fully supported when exporting to EPUB, I'm just looking to see if anyone has had any success doing this.

[Zaid Al Hilali]

Now I never had any real Arabic EPUB job published compared to many PDF for web and Print, then I had few DPS publishing. Having said that, I tested reflowable and fixed EPUB with Arabic content and viewed the outcome on Apple's iBook, the result is alright with reflowable version and superb on fixed version, yet again this is just tested on a single Mac platform.

Here is another recent Adobe forums discussion that shows Arabic content can be exported to some readers and reads well.

I may be able to help if you inform me what fonts you're using.

[davids50250536]

I have tried both reflowable EPUB and fixed EPUB. The issue comes down to the fact that middle-eastern right-to-left text isn't fully supported by InDesign exporting to EPUB I think. That's what Adobe support said to me anyway.

As stated above, I have tried multiple fonts; mylotus, Adobe Arabic and a few Google Arabic fonts too. I have even tried using Arial and I get the same result. The text is always squashed together or too far apart, giving different meaning to certain glyphs when read in Arabic.

I have tried creating outlines of the text, which gets mixed results. On some sentences this works perfectly fine, on others it malforms the shapes of the glyphs and adds spacing which again gives different meaning to the words.

If you have any other suggestions, please let me know. I'm out of ideas.

Thanks!

[Zaid Al Hilali]

Is it possible that you share a couple of pages with me if the content isn't sensitive so I can investigate the matter further?

[davids50250536 · Accepted solution]

Thanks for your help, but I have now solved the issue. The issue (which I didn't realise was an issue) is having certain characters different colours within a sentence/word. This was key to the design of the text as it is for teaching children how to correctly use punctuation.

For anyone who has this issue, I'll explain the problem and how to fix it (sort of):

This is a problem when exporting to EPUB as an EPUB (for those who aren't aware) is basically made up of HTML pages that is generated from InDesign files. This was a problem for me, because InDesign has no idea how to correctly join words when there is a separation inside them. In this case, the separation was <span> tags with styles attached to them to make them a different colour. What a span does is essentially break the flow of the characters in the sentence, and as Arabic is a complex script that joins letters based on what is around them - it rendered each character as a single entity rather than joined to it's neighbour. So the text actually reads the same, it just doesn't look the same. In the English language this isn't a problem in HTML as our characters never change shape based on what characters are next to them, Arabic does.. and that's the fundamental complication with doing this kind of stuff.

This actually renders completely fine in Firefox, but in Chrome or any WebKit based browser, there has been a bug for this since 2005 which has never been fixed. The fix is to use the zero-width-joiner character (&#x200d;) before the <span> and before the character inside the <span>. Then, you need to find the appropriate font to render the characters correctly. For me, Google's Amiri Arabic font worked for this.

This is very much a manual process at the moment though, as Adobe haven't managed to find a way to get this rendering correctly (which I can fully understand, judging by how long it took me to figure it out)!

So, to sum up.. if you want to render all Arabic text in one flat colour, then you should be fine. Otherwise, you'll need to figure out a way to do this stuff to every page that contains Arabic text with more than one colour. I'm not saying this is guaranteed to work on every EPUB reader, but it seems to work well in browsers and on readium and iBooks.

Thanks!

[Laubender]

I have tried creating outlines of the text, which gets mixed results. On some sentences this works perfectly fine, on others it malforms the shapes of the glyphs and adds spacing which again gives different meaning to the words.

Hi David,

did you try—just as an experiment—to use Publish Online your document and see the same faulty behavior?
For Publish Online all text is output as vector shapes in SVG and I could imagine, that some of the problems you described could also appear if InDesign is using a smiliar functionality as with converting text to outlines in the UI.

If there would be any problem with Publish Online, one would not be able to fix any issues, because:

1. We have no access to the viewing system.

2. The shapes are vector shapes in SVG converted from live text on the InDesign page during export.

Thanks,
Uwe

[muneera25749270uaqu]

i solved the issu by chosing option "don’t  include classes in HTML" in the html&css 

[Laubender]

Hi @muneera25749270uaqu ,

thank you very much for your comment! Really appreciated.

Could you post a sample screenshot of a page in the InDesign document plus the export result of the same text with option "Don't Include Classes in HTML" turned on and turned off?

What's your exact version of InDesign and operating system?

FWIW: This thread started in February 2017, several versions of InDesign before 2022…

Thanks,
Uwe Laubender
( Adobe Community Professional )

[James Gifford—NitroPress]

I am not clear on how that would be anything but a problematic solution. It means that the content would be entirely unformatted other than the base HTML assignments. That can be good enough for very simple flowing text, but presentation would vary wildly from reader to reader (and user to user, with different settings).

—