Right-to-Left Fixes for Lists, Quotes and Tables
Corrects common right-to-left layout problems in post content, such as list indents, blockquote borders, table alignment and image floats, using logical CSS properties.
Opens WPIDE on
Code
[dir="rtl"] .entry-content ul,
[dir="rtl"] .entry-content ol {
padding-inline-start: 1.5em;
padding-left: 0;
}
[dir="rtl"] .entry-content blockquote,
[dir="rtl"] .wp-block-quote {
border-left: 0;
border-inline-start: 4px solid currentColor;
padding-inline-start: 1em;
}
[dir="rtl"] .entry-content th,
[dir="rtl"] .entry-content td {
text-align: start;
}
[dir="rtl"] .alignleft {
float: right;
margin: 0 0 1em 1.5em;
}
[dir="rtl"] .alignright {
float: left;
margin: 0 1.5em 1em 0;
}
[dir="rtl"] code,
[dir="rtl"] pre {
direction: ltr;
text-align: left;
unicode-bidi: embed;
}Notes
Rules only apply when the page direction is rtl, so it is safe on multilingual sites.
How to add this snippet
- Install WPIDE on your WordPress site (it is free) and open Code Snippets.
- Use snippet above adds it from the library in one click. Or copy the code into a new snippet with the same code type.
- It is added inactive: review the code and settings, then switch it on.