🌐 style: improve RTL styling consistency

[welpo]

Summary

Replaces directional CSS properties with logical ones to improve support for right-to-left (RTL) languages across the theme's design. This change improves layout and spacing consistency regardless of text direction.

Related issues

#262 #270 #272 #274 #368

Changes

• Replaced directional CSS properties (e.g., margin-right, padding-left) with their logical equivalents (e.g., margin-inline-end, padding-inline-start).
• Simplified some CSS declarations (e.g. h1, h2…).
• Updated layout-related properties to use direction-agnostic alternatives.
• Ensured consistent spacing and alignment for both LTR and RTL text directions.

Accessibility

Either unaffected or improved for RTL users.

Type of change

• Bug fix (fixes an issue without altering functionality)
• New feature (adds non-breaking functionality)
• Breaking change (alters existing functionality)
• UI/UX improvement (enhances user interface without altering functionality)
• Refactor (improves code quality without altering functionality)
• Documentation update
• Other (please describe below)

---

Checklist

• I have verified the accessibility of my changes
• I have tested all possible scenarios for this change
• I have updated theme.toml with a sane default for the feature
• I have made corresponding changes to the documentation:
  • Updated config.toml comments
  • Updated theme.toml comments
  • Updated "Mastering tabi" post in English
  • (Optional) Updated "Mastering tabi" post in Spanish
  • (Optional) Updated "Mastering tabi" post in Catalan

[netlify]

✅ Deploy Preview for tabi-demo ready!

Name	Link
🔨 Latest commit	cd6e442
🔍 Latest deploy log	https://app.netlify.com/sites/tabi-demo/deploys/66e7412a422d0d0008dcb696
😎 Deploy Preview	https://deploy-preview-381--tabi-demo.netlify.app
📱 Preview on mobile	Toggle QR Code... Use your smartphone camera to open QR code link.

---

To edit notification comments on pull requests, go to your Netlify site configuration.

[welpo]

Hey @TheAwiteb!

Any chance you could review this PR before I merge?

Everything should look better (more consistent with the LTR tabi styling) on RTL sites.

You should see changes almost everywhere, though most are minor. Codeblocks look much better, same as admonitions and the header.

[TheAwiteb]

Any chance you could review this PR before I merge?

Yes of course, it's 2 AM, I'll check it in the morning 10~11 AM

[welpo]

Thank you! There's absolutely no rush :)

[TheAwiteb]

Everything looks good, and I like how the arrows are perfectly centered and the dates are moved to the right. But there is one issue with the profile picture, as the screenshots below show.

Before the patch	After the patch

---

I only reviewed my website before and after the patch, I don't have an experience with CSS so I didn't review it.

[welpo]

I only reviewed my website before and after the patch, I don't have an experience with CSS so I didn't review it.

Thank you so much! That's exactly what I needed.

I can't reproduce the home page issue on my end, even with the same picture, title and subtitle.

I think it might be related to your extra CSS blog.css. Try removing/editing this part:

img#banner-home-img {
    padding: 0.3rem;
}

[TheAwiteb]

I think it might be related to your extra CSS blog.css.

Yes it is, now it's perfect without it.

[welpo]

Awesome!