Forum Moderators: not2easy
I have a page which has RTL layout (dir="rtl" on the body or on an enclosing div). On the page I have an anchor inside a paragarph, which has padding-left and padding-right greater than 0. There is a problem in FF and in IE when there is a space (filled either with white space or with some text) between the open tag <p> and the tag <a>. When there is a space, it seems that the padding is not applied to the anchor, but rather, somehow, to its enclosing p, and the p and anchor are shifted to the left.
Example:
Good (there is padding around the anchor, everything is right-aligned):
<p><a href="#">something</a></p>
Bad: (there is Hebrew text before the <a> tag)
<p>שלום<a href="#">something</a></p>
In the second (Bad) example, the padding around the anchor becomes zero, and everything is shifted to the left, from the position I would expect it to be.
The same code, just in LTR directions, works fine.
Also, in konqueror it seems just as I would expect it to be.
I'm attaching a complete html sample that demonstrates this problem.
I would appreciate any help.
Thanks,
Amit
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8" />
<style type="text/css">
a
{
padding: 0 30px;
border: 1px solid black;
}
p {border: 1px solid red; }
div {border: 1px solid green;}
</style>
</head>
<body>
<div dir="rtl">
<p><a href="#">something</a></p>
<p>שלום<a href="#">something</a></p>
</div>
<div>
<p><a href="#">a link</a></p>
<p>lorem ipsum<a href="#">קישור</a></p>
</div>
</body>
</html>
I actually think IE have this closest to right, but as I don't know Hebrew and can't actually understand which words you need to display rtl I'll need yours and others help to see what the exact picture should be
I *think* that there's not only the direction [w3.org] property in play here but also the unicode-bidi [w3.org] property.
e.g. if I add:
* {
unicode-bidi: bidi-override;
}IE looks perfect although all words are 'back to front' perhaps thats desired though? :o sorry if I'm not getting all of this I don't really get all the subtleties of rtl languages..
try this: and let me know if any of this is better or helps..
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
div {border: 1px solid green; margin: 5px 0;}
p {border: 1px solid red; margin: 0.5em 0; }
a {
padding: 0 40px;
border: 1px solid black;
}.ltr {direction: ltr;}
.rtl {direction: rtl;}
.bdo p, span {unicode-bidi: bidi-override;}
</style>
</head><body>
<!-- test -->
<ol>
<li>english link</li>
<li>hebrew link</li>
<li>english text before hebrew link</li>
<li>hebrew text before english link</li>
<li>ditto above but with unicode-bidi override applied to hebrew text</li>
</ol><div class="ltr">
<p><a href="#">a link</a></p>
<p><a href="#">שלום</a></p>
<p>lorem ipsum <a href="#">a link</a></p>
<p>שלום<a href="#">something</a></p>
<p><span>שלום</span><a href="#">something</a></p>
</div><!-- rtl only -->
<div class="rtl">
<p><a href="#">a link</a></p>
<p><a href="#">שלום</a></p>
<p>lorem ipsum <a href="#">a link</a></p>
<p>שלום<a href="#">something</a></p>
<p><span>שלום</span><a href="#">something</a></p>
</div><!-- rtl only with bidi-override -->
<div class="rtl bdo">
<p><a href="#">a link</a></p>
<p><a href="#">שלום</a></p>
<p>lorem ipsum <a href="#">a link</a></p>
<p>שלום<a href="#">something</a></p>
<p><span>שלום</span><a href="#">something</a></p>
</div>
</body>
</html>
IE seems to definitely have a bug if there's no text before the hebrew link, no matter what it's text direction is. and like I said above if you apply the unicode-bidi override universally it fixes even that.. but overall it appears to me it fares better than FF and Opera
FF just gets it plain wrong whichever way. Opera seems to have the last section "right", although it too responds to the universal override.
what do you think, any of that help?
-Suzy
Thanks for your greeting and for the elaborated answer. I'll try to describe what I'm trying to achieve: I need to have a short one-line text, where the last word is a link. I want to style the link with a background image (for example, to have an arrow on one side), so I need to add padding to it. I need the above in both English and Hebrew. When both the text before the anchor and the text inside the anchor are in the same language, it's rendered well in IE (not as I said in my first post). In FF it's rendered well for English, but not for Hebrew. When the text before the anchor, and the text inside it are in languages of different directionality, it breaks in IE and FF as well. Adding bidi-override doesn't seem to really fix it.
I'm convinced now that it is a bug, and I'll try to look for a workaround that'll for FF (perhaps putting the text and the anchor in separated DIVs, although it would be quiet awkward).
I'm posting a brief test, just to demonstrate the problem when both text before and inside the anchor are in same language. I made some changes to help non Hebrew-readers to understand what's going on.
The word before the anchor is אאאם and should be in red. The word inside the anchor is בבבץ and should be in green. Both words consist of four identical characters, and a single different character. The different character is the last character in the word, so it should be the left-most character (this is Hebrew, right? :-) ). The red word should be attached to the right side of the enclosing DIV (thick green line), and the green word should to the left of it in the rtl example, with padding around it. It looks okay in IE on my box, but quiet messy in FF.
Sorry for tiring you with such long explanations, but here is the code:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
div {border: 3px solid green; margin: 15px 0;}
p {border: 1px solid red; margin: 0.5em 0; color: red;}
a {
color: green;
padding: 0 40px;
border: 1px solid black;
}
.ltr {direction: ltr;}
.rtl {direction: rtl;}
</style>
</head><body>
<div class="ltr">
<p>direction: ltr</p>
<p>some text<a href="#">a link</a></p>
</div>
<!-- rtl only -->
<div class="rtl">
<p>direction: rtl</p>
<p>אאאאם<a href="#">בבבבץ</a></p>
</div>
</body>
</html>
Since I'm convinced it is a bug, I think I'll look for a workaround (for some time I though it is me to blame).
Thanks again,
Amit
agreed it appears to be a firefox bug and I think I've got a workaround.
add:
display: -moz-inline-box;to the a {} rule.. it's working in the last test you gave me
[edited by: SuzyUK at 12:27 pm (utc) on April 2, 2008]
I'm glad you're not tired by it... yet :-)
I just tested your suggestion. At first glance I thought it fixed it, but then I realized that the characters of the word inside the anchor were in a ltr direction. Perhaps you didn't notice it, but you can simply compare the output of the following two lines:
<p>אאאאם<a href="#">בבבבץ</a></p>
<p>אאאאם<a class="suzy" href="#">בבבבץ</a></p>
I also tried to play with the bidi-override, but to no avail.
Thanks you very much for your time,
Amit
here I'll post my whole code this time moving the -moz-inline-box onto a suzy class like your last post.. it's displaying the same way around for me (the different character leftmost yes?)
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<meta http-equiv="content-type" content="text/html; charset=utf-8">
<style type="text/css">
div {border: 3px solid green; margin: 15px 0;}
p {border: 1px solid red; margin: 0.5em 0; color: red;}
a {
color: green;
padding: 0 40px;
border: 1px solid black;}.suzy {
display: -moz-inline-box;
}
.ltr {direction: ltr;}
.rtl {direction: rtl;}
</style>
</head>
<body>
<div class="ltr">
<p>direction: ltr</p>
<p>some text<a href="#">a link</a></p>
</div><div class="rtl">
<p>direction: rtl</p>
<p>אאאאם<a href="#">בבבבץ</a></p>
<p>אאאאם<a href="#">בבבבץ</a></p>
<p>אאאאם<a class="suzy" href="#">בבבבץ</a></p>
</div>
</body>
</html>
if that's different from yours what else is different.. Doctype? charset?
PS: I'm testing in FF2.0.0.13
I ran it through FF3Beta.. the bug itself appears to fixed in FF3 :)
not tired yet.. but we'll get there ;)
-Suzy
Well, it's really weird. First, I owe you an apology, for implying you didn't notice the text direction... I should have think it could be different on different systems/configurations.
I'm running on Linux (debian), and I tested this with FF2.0.0.13, Hebrew version. On this version the text in the anchor is indeed reversed. I downloaded an English version, also 2.0.0.13, it's also reversed. I tested it on iceape, which also uses Gecko, and here the text is in the right direction... Then I went to Windows XP, FF2.0.0.12, and the text is okay again... To summarize:
Linux, FF2.0.0.13 Hebrew edition: reversed
Linux, FF2.0.0.13 English edition: reversed
Linux, Iceape 1.0.9, English edition: okay
Windows XP Pro, FF2.0.0.13, Hebrew edition: okay
On Linux, I tried different locale definitions but it didn't make any difference. I also tried playing with FF preferences, but again it didn't make any difference.
My findings so far make me think that it would be difficult (only because I don't like the word "impossible" :-) ) to find a reliable solution to this problem, so perhaps I should invest my time in finding another way to achieve what I want.
What do you think?
And again, I really appreciate your help, and the time you put into it. Thank you very much.
--- Amit
My findings so far make me think that it would be difficult (only because I don't like the word "impossible" :-) ) to find a reliable solution to this problem, so perhaps I should invest my time in finding another way to achieve what I want.What do you think?
I confirm I'm on FF2.0.0.13 on XP Pro, so that's why I see it looking OK :o, thanks for checking that I wasn't being daft or fibbing to you!
Unfortunately I tend to think you're right, and I dont like impossible either!.. you've obviously tested it on more systems than I and it does indeed seem to be OS/Browser related too so I go yeuchhh.. and sorry I can't check anything else for you
one penultimate thought...
does specifying
lang="he"and.. there was another property that didn't seem to make any difference on my system, but just might be worth testing on yours in light of what you've said..apply the same place as -moz-inline-box
-moz-box-direction: reverse; /* the default is normal */let me know.. I'll keep thinking about another way to workaround too & sorry it's not helped, let's hope FF3 really have it sorted, and it's not just my system again!
-Suzy
[edited by: SuzyUK at 5:02 pm (utc) on April 2, 2008]
The problem was that I needed padding around an anchor, but letting the anchor's padding be greater than zero caused FF to mess the layout. But I forgot I could pad with non-breaking-spaces - that solved the problem. So having a {padding: 0;}, the following simple HTML snippet is rendered the way I want in IE, FF, and Konqueror:
<p>אאאאם <a href="#">בבבבץ </a></p>
Just need to add enough This is not very nice, but at least it gives the desired results.
Thanks Suzy for trying so hard to help :-)
--- Amit
