Arabic characters appear as empty squares when using certain HTML tags or font styles

Question

Only when HW acceleration is on. Arabic characters appear as empty squares when using "italic" or "oblique" font styles or when using <i> or <em> html tags.
Try this code to replicate the problem
<pre>
&lt;p&gt;مشكلة ظهور المربعات الخالية بدل الحروف&lt;/p&gt;
&lt;p style="font-style: italic;">Italic مشكلة ظهور المربعات الخالية بدل الحروف&lt;/p&gt;
&lt;p style="font-style: oblique;">Oblique مشكلة ظهور المربعات الخالية بدل الحروف&lt;/p&gt;
&lt;i&gt;i tag مشكلة ظهور المربعات الخالية بدل الحروف</i> &lt;br&gt; &lt;br&gt;
&lt;em&gt;em tag مشكلة ظهور المربعات الخالية بدل الحروف &lt;/em&gt;
</pre>

Answer 1

After lots of research, I found the problem. The boxes (squares) show up whenever there is a font in the webpage that does not have Arabic within its Unicode range such as Times New Roman Italic or Oblique. Normally, Firefox will pick another font to display the characters but now, a newly introduced feature is interfering.
To fix the problem without turning off hardware acceleration.
Go to about:config
locate: gfx.font_rendering.directwrite.use_gdi_table_loading
which is True by default in FF4.0 Beta 10, and change it to False.
This is a bug that has to be fixed.