How do I get my text to be direction from right to left without using a p tag?

Question

I have a dynamically appearing div on a page. I would like to be able to hide the div with a button at the top right corner of the div. One way I have found to do this is to use a p tag, like so:

<p dir="RTL">button</p>

If this is the first line of HTML within the div, it will put the button in the upper right hand corner of the div. However, it gives me a new line above and a new line below, so, the button isn't really where I want it to be. The "dir" attribute doesn't seem to work with a span tag, and if I display the p tag inline using css

p {
display:inline;
}

the button is no longer right aligned. Instead it stays in the left hand corner. Is there a way to get this button in the upper right hand corner without two unnecessary new lines and without a bunch of  ?

Answer 1

You have two options here:

1. Get rid of the margin on the p tag: p { margin: 0; }
2. Use a div instead of a p

Most browsers render paragraph tags with a 1em top and bottom margin.

As for your problems with the rtl property, what browser are you using? As far as I'm aware it should work fine with as long as the element is inline and you're using the correct unicode characters.

Answer 2

HTML dir="rtl" and CSS direction:rtl meant for languages that require it, and it's better not to use it in case you are not planning to add Hebrew and Arabic support to your website. As for your question, I guess you want to align text to the right, which can be made easily using text-align:right.