Be told the honest thing first: Stoat 1.4.1 does not ship an rtl.css. The theme is translation-ready, but it has not been through an RTL pass.
What you get anyway
Set Settings → General → Site Language to an RTL language and WordPress adds dir="rtl" to the page. The browser then does a great deal for you without any help from the theme:
- Text runs right to left, and paragraphs align right
- List markers and blockquote indentation flip
- Flex and grid rows — the header bar, the meta row, the listing — reverse, because they are laid out with
flexandgaprather than floats
For a plain blog with the default settings, that is most of the way there.
What does not flip
The places where the stylesheet names a physical side. The ones you will notice:
- Dropdown panels open from the left edge of their parent, and a third-level panel opens to the right of the second
- Thumbnail side — Right and Left in Customize → Archive mean literal sides, so pick the mirror of what you want
- Left- and right-aligned blocks in content float to the literal side
- Assorted paddings and hairline positions
Fixing it on your site
Add an rtl.css in a child theme and enqueue it behind is_rtl():
add_action( 'wp_enqueue_scripts', function () {
if ( is_rtl() ) {
wp_enqueue_style(
'stoat-child-rtl',
get_stylesheet_directory_uri() . '/rtl.css',
array( 'stoat_style' )
);
}
}, 20 );
Most of what goes in it is a handful of rules swapping left for right. Start by browsing your own site in an RTL language and fixing what you see, rather than translating the whole stylesheet — the list above is short in practice.
If you do this
Please send the file to the support forum or open an issue. A working rtl.css from somebody who actually reads the language is worth more than one we generate, and it would ship in the theme.