HTML vs. Flash for Arabic text and video

We recently realized that the rendering of Arabic script overlaying the videos on Mightyverse is incorrect. For example, the phrase:
كيف أوصل هناك؟ currently appears on the website differently in the search results (which are rendered in HTML) vs. the video (rendered in Flash) as seen in the screenshots below:

This was brought to my attention by Samar Moushabeck, an Arabic teacher at the Deerfield Academy in Massachusetts. Since I don’t read or speak Arabic, I had to zoom in to understand the difference.



This is clearly unacceptable. It would be (sort of) like if we wrote the English as:
“Ho w w oul d y ou re com mend I ge t t here”

The letters are correct, but the sentence reads like we are illiterate (which, of course, we are in Arabic, but we’re hoping to improve with the help of Samar and language experts like her).

There are a few possible solutions to this.

1) Move the text from video overlay to below or above the video. This is technically simple solution. However, the thinking behind the current design is that it is helpful to be able to read the text while focusing on the movement of the speaker’s lips. The farther the text is from the video the harder it would seem to be for visual learners (which applies to most of us humans).

2) Render the text in HTML and overlay Flash. I want to run screaming from this solution, since I have some experience trying to intermingle HTML and Flash and found it to be time consuming engineering to get it to work correctly across browsers and, even with a lot of work, had to compromise visual design and/or user experience in some cases.

3) Render the text as a graphic, dynamically load into Flash, then overlay within Flash. This seems an awful lot of work to support my theory of more effective learning and a preference for the visual design.

4) HTML5 video, reported to support overlay for captioning seamlessly. While I’ve read that YouTube will continue to use Flash instead of HTML5 video, Mightyverse has short format video so the constraints for YouTube may not apply. My favorite quote from a Mark Pilgrim HTML5 video article is “support for the <video> element is still evolving, which is a polite way of saying it doesn’t work yet. ” It appears that to support HTML5 video across browsers, we would want to support the new WebM standard (with VP8 video and Vorbis audio) along with the H.264 that we already encode for iPhone and Android.

In any case, we have a few things in the queue (like re-releasing the iPhone app for iOS4) before we can address this on the site, which gives us a little time to explore options. Please leave a comment if you have experience with HTML5 video and/or Arabic text in HTML or Flash and are willing to share some insights.

3 thoughts on “HTML vs. Flash for Arabic text and video

  1. John Dowdell

    Hi Sarah, I don’t read either, and so am unsure of what the error is, nor how it was introduced.

    Are you doing some type of live read of external text to do the display? (Assuming so, since you seem to have identical text available in HTML.) If so, do you know which text options it uses, and which type of errors you’d like to correct?


  2. John C. Fox

    Hey Sarah:

    With modern browsers (i.e. FF/Safari 3+ and IE 7+ you should be able to overlay HTML DOM elements on top of Flash. I do this in the prototype MemoryMiner for Web application which uses Flash for the image pan & zoom layer, and HTML DOM elements (including Canvas/SVG depending on the browser) for the selection markers, text overlays, buttons, etc.

    Don’t know if there’s anything special that happens when the Flash player is displaying video that would cause trouble, but things might not be so bleak, unless of course you insist on trying to support ancient browsers.



  3. Alan Stearns

    We have improved Arabic support in Flash Player 10. If you are using a text component based on the new Flash Text Engine or the Text Layout Framework (either from Flex 4 or Flash CS5) your Arabic phrase should render correctly. Or you can use FTE or TLF directly in actionscript. Please come to our forums to discuss how you’re generating captions so we can help.

Leave a Reply

Your email address will not be published. Required fields are marked *