<UL> in right-to-left languages

ashkaan57 (AT) hotmail (DOT) com wrote:

Jukka K. Korpela wrote:
ashkaan57 (AT) hotmail (DOT) com <ashkaan57 (AT) hotmail (DOT) com> scripsit:

Jukka K. Korpela wrote:
- -
You should have specified the URL so that we could see what you
have actually done.

You seem to have missed that sentence, despite quoting it.
Comprehensive quoting often indicates lack of comprehensive reading.

No, I don;t use <div>, I use to style <ul>.

What I wanted was a two
level <ul> and in works in ENglish version.

But fails to work in an unspecified way in an unspecified version.
Well, you have probably made some mistake, either in coding or
interpreting things.

Did you even try my suggestion? The one you quoted, I mean.

It is not uploaded to any site, it is on my PC otherwise I would have
posted the url to be viewed. Sorry to not have mentioned this.
I tried dir=rtl and it shifted everything, my menu which was inside a
div moved from right to left, along with everyhting else that got
reversed. I didn't know about the "dir" directive before I manually
moved everything from left to right.
I am new to CSS and trying to get away from tables to layout the page.

The "failed to work" meant that the bullet was on the left and text in
Farsi (written from right to left) started on the right. So, the
bullet
was displayed at the end of the sentence.

I used a previous suggestion to use float:right for the <ul> and style
li> with using a background and right-alignment (in my previous
post).

Have you checked his earlier suggestion: use dir="rtl" on the body tag? This
works fine in Opera, MSIE & Firefox as far as I checked. Read op on it:
http://www.w3.org/TR/html401/struct/dirlang.html#h-8.2

This works fine except for multi-line list items, where the bullet is
not aligned with first line, it is between first and second line.

Well, first try the dir="rtl", if that doesn't suit you: give the background
vertical position: either top or some em value I'd think.

Grtz,
--
Rik Wasmus

Thanks Rik,
I would have used dir=rtl except that I have already modified the css
files to be used with the right-to-left orientation. When I tried
"dir=rtl" it switched everything around. I know now that I should use
this directive for right-to-left languages.

But as for you suggestion to set vertical align for background, I
tried:
li {
background: url(blue_arrow_left.gif) no-repeat right top;
padding-right: 10px;
list-style: none;
}

and it pushes the arrow way up. It seems other vertical alignment
values, such as middle or baseline, have no effect. Am I setting the
vertical alignment correctly?

ashkaan57 (AT) hotmail (DOT) com wrote:

Thanks Rik,
I would have used dir=rtl except that I have already modified the css
files to be used with the right-to-left orientation. When I tried
"dir=rtl" it switched everything around. I know now that I should use
this directive for right-to-left languages.

But as for you suggestion to set vertical align for background, I
tried:
li {
background: url(blue_arrow_left.gif) no-repeat right top;
padding-right: 10px;
list-style: none;
}

and it pushes the arrow way up. It seems other vertical alignment
values, such as middle or baseline, have no effect. Am I setting the
vertical alignment correctly?

What about something like this

Louise

_______

body { direction: rtl; }

ul li {
background: url(blue_arrow_left.gif) #ffffff no-repeat right center;
list-style-type: none;
margin-top: Hpx; /* image Height dependent */
}
ul li span {
padding-right: Wpx; /* background image Width dependent */
}
______

then
______

<ul>
<li><span>content</span></li>
<li><span>etc</span></li>
</ul>
______

boclair wrote:

ashkaan57 (AT) hotmail (DOT) com wrote:
Thanks Rik,
I would have used dir=rtl except that I have already modified the css
files to be used with the right-to-left orientation. When I tried
"dir=rtl" it switched everything around. I know now that I should use
this directive for right-to-left languages.

But as for you suggestion to set vertical align for background, I
tried:
li {
background: url(blue_arrow_left.gif) no-repeat right top;
padding-right: 10px;
list-style: none;
}

and it pushes the arrow way up. It seems other vertical alignment
values, such as middle or baseline, have no effect. Am I setting the
vertical alignment correctly?


What about something like this

ul li span {
padding-right: Wpx; /* background image Width dependent */
}

Oops. On testing, I realise the span selector rules should of course read
____
ul li span {
display:block;
margin-right:Wpx; /* background image Width dependent */
}
_____
Sorry

Louise

boclair wrote:

ashkaan57 (AT) hotmail (DOT) com wrote:
Thanks Rik,
I would have used dir=rtl except that I have already modified the css
files to be used with the right-to-left orientation. When I tried
"dir=rtl" it switched everything around. I know now that I should use
this directive for right-to-left languages.

I sincerely urge to rethink wether or not you could rewrite (a small part of)
your css to account for this, and use it anyway, it's the preferred way.

But as for you suggestion to set vertical align for background, I
tried:
li {
background: url(blue_arrow_left.gif) no-repeat right top;
padding-right: 10px;
list-style: none;
}

and it pushes the arrow way up. It seems other vertical alignment
values, such as middle or baseline, have no effect. Am I setting the
vertical alignment correctly?

Well, I said: "or an em value". It top doesn't work, why not do that?

ul li {
background: url(blue_arrow_left.gif) #ffffff no-repeat right center;
list-style-type: none;
margin-top: Hpx; /* image Height dependent */
}
ul li span {
padding-right: Wpx; /* background image Width dependent */
}

ul
li><span>content</span></li
li><span>etc</span></li
/ul

A semantically useless span, to be avoided IMHO. Any padding/margin can be taken
care of in the <li>.

ul li {
background-image: url(blue_arrow_left.gif);
background-color: #ffffff;
background-repeat: no-repeat;
background-position: right 0.2em;/* change the value of 0.2em untill you get
it right */
list-style-type: none;
padding-right: 10px;
}

Grtz,
--
Rik Wasmus

ashkaan57 (AT) hotmail (DOT) com schrieb:

When I tried
"dir=rtl" it switched everything around.

You can use the dir attribute on quite a lot of elements. So try it on
the ul element or whatever you like.
--
Johannes Koch
In te domine speravi; non confundar in aeternum.
(Te Deum, 4th cent.)

Rik wrote:

boclair wrote:
ashkaan57 (AT) hotmail (DOT) com wrote:
Thanks Rik,
I would have used dir=rtl except that I have already modified the css
files to be used with the right-to-left orientation. When I tried
"dir=rtl" it switched everything around. I know now that I should use
this directive for right-to-left languages.

I sincerely urge to rethink wether or not you could rewrite (a small part of)
your css to account for this, and use it anyway, it's the preferred way.

But as for you suggestion to set vertical align for background, I
tried:
li {
background: url(blue_arrow_left.gif) no-repeat right top;
padding-right: 10px;
list-style: none;
}

and it pushes the arrow way up. It seems other vertical alignment
values, such as middle or baseline, have no effect. Am I setting the
vertical alignment correctly?

Well, I said: "or an em value". It top doesn't work, why not do that?

ul li {
background: url(blue_arrow_left.gif) #ffffff no-repeat right center;
list-style-type: none;
margin-top: Hpx; /* image Height dependent */
}
ul li span {
padding-right: Wpx; /* background image Width dependent */
}

ul
li><span>content</span></li
li><span>etc</span></li
/ul

A semantically useless span, to be avoided IMHO. Any padding/margin can be taken
care of in the <li>.

ul li {
background-image: url(blue_arrow_left.gif);
background-color: #ffffff;
background-repeat: no-repeat;
background-position: right 0.2em;/* change the value of 0.2em untill you get
it right */
list-style-type: none;
padding-right: 10px;
}

Touche; point taken on the span. Taking the above I would now modify
the li selector by

1.. adding min-height rule with a value equivalent to the height of the
background image.

2.. write the position rule as background-position: right top; and
position the text in relation to it by adding top padding rule of
suitable value.

Louise

On 17 Aug 2006 ashkaan57 (AT) hotmail (DOT) com wrote:

I have a page in a right-to-left language

Languages are neither "right-to-left" nor "left-to-right" -
only writing systems (scripts) are.

and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left. Is
there any way I can set the bullets to be on the right:

<ul dir="rtl">
It's a good idea to define the DIR attribute for *everything*.
Start with <body dir="ltr"> or <body dir="rtl"> and then add
a DIR attribute to *every* element with opposite direction.
http://ppewww.ph.gla.ac.uk/~flavell/charset/text-direction.html
http://www.unics.uni-hannover.de/nhtcapri/bidirectional-text.html