CSS is full of physical positioning keywords – left and right, top and bottom. If we position an item using absolute positioning, we use these physical keywords as offset values to push the item around. In the code snippet below, the item is placed 20 pixels from the top, and 30 pixels from the left of the container:
Another place you might see physical keywords in use, is when using
text-align: right to align text to the right. There are also physical properties in CSS. We add margins, padding, and borders using these physical properties of
padding-left, and so on.
We call these keywords and properties physical because they relate to the screen you are looking at. Left is always left, no matter what direction your text is running.
This can become an issue when developing a site that has to work in multiple languages, including languages that have text starting on the right, rather than the left. Browsers are pretty good at dealing with text direction, and you don't even need to be working in a rtl language to take a look. In the example below, I have two paragraphs. The first paragraph has
text-align set to
left, the second has no
text-align property set. I have added
dir="rtl" to the
html element, which switches the writing mode from the default for an English language document of
ltr. You can see that the first paragraph remains left to right, due to the
text-align value being
left. The second however, switches direction and the text runs from right to left .
This is a very simple example of the problem with physical values and properties being used in CSS. They prevent the browser being able to do the work to switch writing mode, as they make the assumption that the text is flowing left to right and top to bottom.