Correct use of padding-margin with rtl css file

You may already be aware of the following, but because I keep seeing this error in the files (probably some leftovers from a designer who is no longer working with us) I want to take a minute to bring this to everyone’s attention:
When you use attributes, such as “padding-left” and “margin-right”, in a .css file, you have to pay attention to these attributes when writing the overrides in the -rtl.css file.  Here’s an example:
 
If you have the following in the style.css file:
.class1 {
  width: 100px;
  margin-left: 10px; /* LTR */
}
The corresponding RTL file, styles-rtl.css, will look like this:
.class1 {
  width: 100px;
  margin-left: 0; /* RTL*/
  margin-right: 10px; /* RTL*/
}
If you don’t reset the left margin, there may be unwanted behavior in the RTL website.  And, obviously, the same is true for any direction-related attribute: margin, padding, position, etc.
 
This is why, personally, when possible, I prefer using the full attribute syntax: 
margin: 0 0 0 10px;
This syntax is easily converted to “margin: 0 10px 0 0;” in the RTL css file.
 

Comments

www.wgnmedia.com owner - good work

Hi www.wgnmedia.com is cool i love to read your content.

Post new comment