Pages with Arabic in <h1> elements display first paragraph incorrectly
I seem to be unable to upload screenshots, but a visit to this page will show my problem at a glance: http://www.moralintelligence.net/site/staff/abdel_irada.php.
Looking at the first paragraph of text, to the right of the drop cap, you will see that it's been floated right, stretching the page horizontally and bringing the end of each line of text to the edge of the screen.
This happens on several pages on my site, and apparently not to any others. What the affected pages have in common is Arabic in the <h1> element above the first paragraph.
Since Arabic text direction is predominantly R-L, I think the browser is applying that direction to the first paragraph and floating it to the *right*.
I have tried using several recommendations to correct this problem by tightly wrapping the Arabic in a "dir=rtl" span and then escaping by adding a "‎" character immediately following the span. I have also tried backup recommendations offered in case the first ones failed. None of them makes the least bit of difference.
Meanwhile, the page displays properly in Safari 5.1.7.
Is this a Firefox 35.01 bug, or is there something I need to add to my code to get around this?
cor-el द्वारा सम्पादित
All Replies (10)
Mozilla version: https://developer.mozilla.org/en-US/d.../:-moz-locale-dir%28rtl%29
I don't think this solves the issue.
Moralintelligence.net is my site, and I try to make it "work" for all of my visitors. If some of them arrive on certain pages where the layout is messed up in such a way that they have to scroll right to see parts of the first lines of text, I am going to lose some of them.
It is highly probable that they will simply conclude that something is wrong with the layout of my site than that they will realize it's a Firefox bug and request help.
Is there an actual fix in the pipeline?
Incidentally, this is the "CSS shim" I added to my stylesheet on the advice of W3C:
[dir='ltr'],[dir='rtl'] { unicode-bidi: -webkit-isolate; unicode-bidi: -moz-isolate; unicode-bidi: -ms-isolate; unicode-bidi: isolate; }
bdo[dir='ltr'],bdo[dir='rtl'] { unicode-bidi: bidi-override; unicode-bidi: -webkit-isolate-override; unicode-bidi: -moz-isolate-override; unicode-bidi: -ms-isolate-override; unicode-bidi: isolate-override; }
It unfortunately does not work.
My code validates as HTML 4.01 Strict; my CSS is validated error-free.
Further, the pages in question display properly in Safari, Chrome and even Internet Explorer.
All of this suggests that the problem is not in my markup, but a bug in Firefox. Why, then, should I incorporate additional code not required by other browsers to accommodate this bug?
Does Mozilla intend to correct this bug or not?
Another practical question, if I *were* to add the suggested CSS: To what selector should I attach it?
Do I really need to create a new class of <h1>, or can the markup be done in such a way as to apply the rtl isolation only to those <h1> elements that in fact contain Arabic?
CallMeIsmail द्वारा सम्पादित
Hmm.
I didn't know your comment system accepted HTML.
Now, in place of "a new class of <h1>..." I have "a new class of...," and the rest of the post turns into a headline.
So its the paragraph we are talking about that the formatting is not correct in the leadoff div.
#leadoff {
text-align: left;
}
If you inspect the element of the First p tag in that div you will see that the text-align element is crossed off.
p.first {
font-family: "Droid Sans",verdana,"lucida grande","nimbus sans l",arial,helvetica,sans-serif; font-size: 1.125em; text-indent: 0px; line-height: 220%; text-align: justify; vertical-align: -1em; margin-top: 16px;
} The justify text-align is more specific and is loading from the awwali.css file.
I also played with the p.first::first-letter this has a right padding in one browser that loads in one browser, but not in Firefox. disabling float:left gets rid of the extra spacing to the right of the styled first letter.
Then the right margin of the wrapper does not seem to be wrapping the text with the fixed pixel width of the first paragraph. The wrapper width overrides this in the other browser. Please check the inheritance.
Thank you for having a look at my CSS, but I need to point out that any problem that may exist in it appears only on pages in which there is Arabic in the <h1> element.
Not using "float:left" for the drop cap really isn't an option. If I don't float it, there is no space between it and the first paragraph.
But "float:left" appears to be the source of the clash in this case because the Arabic creates an rtl flow that confuses the browser into changing the alignment of the paragraph. To isolate that rtl flow from the rest of the document is what all the CSS shims are about.
My point, however, remains: Since the pages display correctly on every other browser, isn't this really a Firefox bug?
I would recommend creating a test case and also linking to your example if you would like to investigate if this is a technical issue.
The resources to file a bug for Layout Text Rendering in Firefox's Core component are below:
In the meantime I would be happy to help investigate a work around.