473,385 Members | 1,844 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

Join Bytes to post your question to a community of 473,385 software developers and data experts.

<UL> in right-to-left languages

Hi,
I have a page in a right-to-left language 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:

..lists {
margin:2em 0 0 2em;
}

..lists ul {
margin:0;
padding:0;
}

..lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}

TIA.

Aug 17 '06 #1
19 11361
On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.com wrote:
lists {
margin:2em 0 0 2em;
}

.lists ul {
margin:0;
padding:0;
}

.lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}
Just ad this to your css:
ul {
float: right;
}
--
buy, bought, bye
Aug 17 '06 #2
On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.com wrote:
Hi,
I have a page in a right-to-left language 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:
Sorry, did not read it properly, I think you would have to use backroung
images on <lior on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

li
{
background: url(bullet.gif) right;
}

--
buy, bought, bye
Aug 17 '06 #3

Nije Nego wrote:
On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.com wrote:
Hi,
I have a page in a right-to-left language 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:

Sorry, did not read it properly, I think you would have to use backroung
images on <lior on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

li
{
background: url(bullet.gif) right;
}

--
buy, bought, bye
Thanks Nije. If I use the style you provided, it puts the bullet's
image as the background of everything between <uland </ulor <li>
and </li>.
I tried the float:right and added "right" to the "list-style", but
didn't work.

Aug 17 '06 #4
On 17 Aug 2006 11:35:24 -0700, as*******@hotmail.com wrote:
Nije Nego wrote:
>On 17 Aug 2006 10:39:23 -0700, as*******@hotmail.com wrote:
>>Hi,
I have a page in a right-to-left language 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:

Sorry, did not read it properly, I think you would have to use backroung
images on <lior on <a>,
ul
{
float: right;
background: url(bullet.gif) right;
}

li
{
background: url(bullet.gif) right;
}

--
buy, bought, bye

Thanks Nije. If I use the style you provided, it puts the bullet's
image as the background of everything between <uland </ulor <li>
and </li>.
I tried the float:right and added "right" to the "list-style", but
didn't work.
You have to style your tags to suite your needs, probably this would help
ul
{ float: right; }
li
{ background: url(bullet.png) no-repeat right; padding-right: 10px; }

Padding right - little bit wider than the width of bullet image
(bullet.png).

Of course you can play a bit arround.

--
buy, bought, bye
Aug 17 '06 #5
On 17 Aug 2006 11:35:24 -0700, as*******@hotmail.com wrote:
I tried the float:right and added "right" to the "list-style", but
didn't work.
Or with your bullet:
ul {
float: right;
}
li {
background: url(assets/images/19dot1a.gif) no-repeat right;
padding-right: 10px;
list-style: none;
}
--
buy, bought, bye
Aug 17 '06 #6
as*******@hotmail.com <as*******@hotmail.comscripsit:
I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left.
Bullets are on the left by default. The inherent directionality of text
characters does not change that.

You should have specified the URL so that we could see what you have
actually done. It seems that you have not specified the writing direction,
so using dir="rtl" in the <bodyelement is advisable. You could use CSS
too,
body { direction: rtl; }
but the writing direction is too important to be handled in CSS; it's part
of the writing system, not a casual rendering suggestion.
Is there any way I can set the bullets to be on the right:
<body dir="rtl"will do that.
.lists {
margin:2em 0 0 2em;
}

.lists ul {
margin:0;
padding:0;
}

.lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}
What is "lists"? CSS code snippets are rather meaningless without a document
they relate to. If you have wrapped your lists inside <div
class="lists">...</div>, the margin settings are not adequate for
right-to-left writing. The right margin or padding of a <ulshould be
positive (and about 1.5em or larger) so that there is room for the bullets.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Aug 17 '06 #7

Jukka K. Korpela wrote:
as*******@hotmail.com <as*******@hotmail.comscripsit:
I have a page in a right-to-left language and I am trying to make some
bulleted lists using <ul>, but it puts the bullets to the left.

Bullets are on the left by default. The inherent directionality of text
characters does not change that.

You should have specified the URL so that we could see what you have
actually done. It seems that you have not specified the writing direction,
so using dir="rtl" in the <bodyelement is advisable. You could use CSS
too,
body { direction: rtl; }
but the writing direction is too important to be handled in CSS; it's part
of the writing system, not a casual rendering suggestion.
Is there any way I can set the bullets to be on the right:

<body dir="rtl"will do that.
.lists {
margin:2em 0 0 2em;
}

.lists ul {
margin:0;
padding:0;
}

.lists li {
padding: 0 0 0.5em 1em;
list-style: url(assets/images/19dot1a.gif) circle outside;
}

What is "lists"? CSS code snippets are rather meaningless without a document
they relate to. If you have wrapped your lists inside <div
class="lists">...</div>, the margin settings are not adequate for
right-to-left writing. The right margin or padding of a <ulshould be
positive (and about 1.5em or larger) so that there is room for the bullets.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
Thank you for the info.
No, I don;t use <div>, I use to style <ul>. What I wanted was a two
level <uland in works in ENglish version. I tried to use it in the
right-to-left version of the pages by changing the align:left to
align:right and left-margin values to right-margin values:

..lists {
margin:2em 2em 0 0;
}

..lists ul {
float: right;
margin:0;
padding:0;
}

..lists li {
padding: 0 1em 0.5em 0;
list-style: url(assets/images/19dot1a.gif) outside right;
}

..lists2 {
margin:0.5em 2 0 0;
}

..lists2 ul {
float:right;
margin:0;
padding:0;
}

..lists2 li {
padding: 0 2em 0.5em 0;
list-style: url(assets/images/2dot6a.gif) outside right;
}

the in html:

<ul class="lists">
<li>first-level list item:
<ul class="lists2">
<li>second-level list item</li>
<li>second-level list item</li>
<li>second-level list item</li>
</ul>
</li>
</ul>

I used the suggestion, in previous response, to use:
ul {
float: right;
}

li {
background: url(assets/images/blue_arrow_left.gif) no-repeat
right;
padding-right: 10px;
list-style: none;
}
and it works, except that if the list item continues on the next line,
the arrow (image) is displayed between the two lines.

Thanks.

Aug 17 '06 #8
as*******@hotmail.com <as*******@hotmail.comscripsit:
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 <uland 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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Aug 17 '06 #9

Jukka K. Korpela wrote:
as*******@hotmail.com <as*******@hotmail.comscripsit:
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 <uland 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.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/
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 <uland style
<liwith using a background and right-alignment (in my previous post).
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.

Aug 17 '06 #10
Rik
as*******@hotmail.com wrote:
Jukka K. Korpela wrote:
>as*******@hotmail.com <as*******@hotmail.comscripsit:
>>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 <uland 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 <uland style
<liwith 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
Aug 17 '06 #11

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?

Aug 17 '06 #12
as*******@hotmail.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>
______
Aug 18 '06 #13
boclair wrote:
as*******@hotmail.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
Aug 18 '06 #14
Rik
boclair wrote:
as*******@hotmail.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
Aug 18 '06 #15
as*******@hotmail.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.)
Aug 18 '06 #16
Johannes Koch <ko**@w3development.descripsit:
You can use the dir attribute on quite a lot of elements.
Surely. But if the page content, or most of it, is written in a
right-to-left script (writing system), then the only logical move is to use
it on the <bodyelement (or the <htmlelement). Then deal with the
implications as needed.

--
Jukka K. Korpela ("Yucca")
http://www.cs.tut.fi/~jkorpela/

Aug 18 '06 #17
Rik wrote:
boclair wrote:
>as*******@hotmail.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
Aug 18 '06 #18
Rik
Jukka K. Korpela wrote:
Johannes Koch <ko**@w3development.descripsit:
>You can use the dir attribute on quite a lot of elements.

Surely. But if the page content, or most of it, is written in a
right-to-left script (writing system), then the only logical move is
to use it on the <bodyelement (or the <htmlelement). Then deal
with the implications as needed.
Indeed, if that's not how one started out it may be some work to
change it, but overall this is by far the better solution (if it is
indeed most of the page content which is rtl, and not a small
snippet).

Grtz,
--
Rik Wasmus
Aug 18 '06 #19
On 17 Aug 2006 as*******@hotmail.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/...direction.html
http://www.unics.uni-hannover.de/nht...onal-text.html

Aug 18 '06 #20

This thread has been closed and replies have been disabled. Please start a new discussion.

Similar topics

9
by: Akseli Mäki | last post by:
Hi, the subject say quite a lot. I have about the following code(4.01 transitional): <p>blaa blaa blaa <ul> <li><a href="foo.html">foo</a></li> <li><a href="bar.html">bar</a></li> </ul>
5
by: Timo Nentwig | last post by:
Hi! Is it possible that there's no empty line inserted after an <UL>? Timo
16
by: michael | last post by:
Is it possible to get all href URLs contained in a unordered list and place them in an array? Or in fact two different arrays, differently named one for each <ul> group? <ul> <li><a...
4
by: opt_inf_env | last post by:
Hello, I have the following part of code sentence_1 <ul> <li> sentence_2 </ul> And I would like to decrease distance between sentence_1 and
2
by: Andrew Donaldson | last post by:
I'd welcome some help in understanding what's going on with graphical browsers in the navigation list at: http://www.bounceandtickle.org.uk/index.html (This site is not about what it might...
4
by: Viken Karaguesian | last post by:
Hello all, I'm have an annoyance I can't seem to solve. I'm working on a website that has a sidebar floating to the right. In the sidebar is an unordered list. In IE and in Opera, the list shows...
6
by: ashkaan57 | last post by:
Hi, How can I set up the styling for different levels of <ULto use different images for bullets, be indenetd differently, ... Like: .. list 1 - item 1 - item 2 .. list 2
13
by: pipehappy | last post by:
Hi I search around and find there are many discussion about <ul><li><p>something</p></li></ul>. But I cannot find solution to <ul> itself. I pass the following html through validate.w3.org. and...
4
by: Winston | last post by:
Where is the mistake? I want to make a simple menu. These are two pieces of two files... function ShowMenu(objeto) { is_open = document.getElementById(objeto).style.display;...
3
by: Man-wai Chang | last post by:
A 2 columns x 10 rows matrix input form <ul> <li> <ul> <li>item name 1 <li><input type="textbox" name="input_col_1_row_1"> <li><input type="textbox" name="input_col_1_row_2"> </ul> <li>
0
by: Faith0G | last post by:
I am starting a new it consulting business and it's been a while since I setup a new website. Is wordpress still the best web based software for hosting a 5 page website? The webpages will be...
0
isladogs
by: isladogs | last post by:
The next Access Europe User Group meeting will be on Wednesday 3 Apr 2024 starting at 18:00 UK time (6PM UTC+1) and finishing by 19:30 (7.30PM). In this session, we are pleased to welcome former...
0
by: ryjfgjl | last post by:
In our work, we often need to import Excel data into databases (such as MySQL, SQL Server, Oracle) for data analysis and processing. Usually, we use database tools like Navicat or the Excel import...
0
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
0
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
0
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
0
BarryA
by: BarryA | last post by:
What are the essential steps and strategies outlined in the Data Structures and Algorithms (DSA) roadmap for aspiring data scientists? How can individuals effectively utilize this roadmap to progress...
1
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
0
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.