X
Tap here to go to the mobile version of the site.

ஆதரவு மன்றம்

Pages with Arabic in <h1> elements display first paragraph incorrectly

  • 10 replies
  • 1 இந்த பிரச்சனை உள்ளது
  • Last reply by guigs
பதிவிடப்பட்டது

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 "&lrm;" 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?

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 &lt;h1&gt; 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 "&amp;lrm;" 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 மூலமாக திருத்தப்பட்டது

Additional System Details

நிறுவப்பட்ட நிரல்கள்

  • Adobe PDF Plug-In For Firefox and Netscape 11.0.10
  • Google Update
  • NPRuntime Script Plug-in Library for Java(TM) Deploy
  • Next Generation Java Plug-in 11.31.2 for Mozilla browsers
  • Office Authorization plug-in for NPAPI browsers
  • The plug-in allows you to open and edit files using Microsoft Office applications
  • Shockwave Flash 16.0 r0
  • 5.1.30514.0
  • iTunes Detector Plug-in

பயன்பாடு

  • Firefox 35.0.1
  • User Agent: Mozilla/5.0 (Windows NT 6.1; WOW64; rv:35.0) Gecko/20100101 Firefox/35.0
  • Support URL: https://support.mozilla.org/1/firefox/35.0.1/WINNT/en-US/

நீட்சிகள்

  • Adblock Plus 2.6.7 ({d10d0bf8-f5b5-c8b4-a8b2-2b9879e08c5d})
  • DownThemAll! 2.0.18 ({DDC359D1-844A-42a7-9AA1-88A850A938A8})
  • Metal Lion Australis Scrollbars II 2.0.1.5 ({FDBAD97E-A258-4fe3-9CF6-60CF386C4422})
  • Zoomify 2.0.3 (tb@zoomify.com)
  • McAfee Security Scan Plus 1.0 ({e4f94d1e-2f53-401e-8885-681602c0ddd8}) (Inactive)

Javascript

  • incrementalGCEnabled: True

Graphics

  • adapterDescription: Intel(R) HD Graphics Family
  • adapterDescription2:
  • adapterDeviceID: 0x0106
  • adapterDeviceID2:
  • adapterDrivers: igdumd64 igd10umd64 igd10umd64 igdumdx32 igd10umd32 igd10umd32
  • adapterDrivers2:
  • adapterRAM: Unknown
  • adapterRAM2:
  • adapterSubsysID: 00000000
  • adapterSubsysID2:
  • adapterVendorID: 0x8086
  • adapterVendorID2:
  • direct2DEnabled: True
  • directWriteEnabled: True
  • directWriteVersion: 6.2.9200.16571
  • driverDate: 4-4-2011
  • driverDate2:
  • driverVersion: 8.15.10.2353
  • driverVersion2:
  • info: {u'AzureCanvasBackend': u'direct2d', u'AzureFallbackCanvasBackend': u'cairo', u'AzureContentBackend': u'direct2d', u'AzureSkiaAccelerated': 0}
  • isGPU2Active: False
  • numAcceleratedWindows: 1
  • numTotalWindows: 1
  • webglRenderer: Google Inc. -- ANGLE (Intel(R) HD Graphics Family Direct3D9Ex vs_3_0 ps_3_0)
  • windowLayerManagerRemote: True
  • windowLayerManagerType: Direct3D 11

Modified Preferences

Misc

  • User JS: No
  • Accessibility: No
guigs 1072 தீர்வுகள் 11697 பதில்கள்
பதிவிடப்பட்டது
Mozilla version: [https://developer.mozilla.org/en-US/docs/Web/CSS/:-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?

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.

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.
cor-el
  • Top 10 Contributor
  • Moderator
17670 தீர்வுகள் 159841 பதில்கள்
பதிவிடப்பட்டது
See also: *https://developer.mozilla.org/Web/CSS/unicode-bidi *https://developer.mozilla.org/Documentation_for_BiDi_Mozilla
பதிவிடப்பட்டது

கேள்வியின் உரிமையாளர்

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?

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?

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 &lt;h1&gt;, or can the markup be done in such a way as to apply the rtl isolation only to those &lt;h1&gt; 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.

Hmm. I didn't know your comment system accepted HTML. Now, in place of "a new class of &lt;h1&gt;..." I have "a new class of...," and the rest of the post turns into a headline.
guigs 1072 தீர்வுகள் 11697 பதில்கள்
பதிவிடப்பட்டது

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.

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?

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 &lt;h1&gt; 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?
guigs 1072 தீர்வுகள் 11697 பதில்கள்
பதிவிடப்பட்டது

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.

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: *Bug Helper: [https://bugzilla.mozilla.org/enter_bug.cgi?format=guided] *[https://developer.mozilla.org/en-US/docs/Mozilla/QA/Bug_writing_guidelines Bug Writing Guidelines] In the meantime I would be happy to help investigate a work around.