Multilingual Blog, Issue with RTL/LTR

• 

  bunmarion · Member · Feb 27, 2026 at 11:11 am

  • Copy link
  • Add topic to favorites

  Howdy all. I run a personal gaming blog in English for a while and I’ve been recently thinking of starting to translate my posts into my native language, Arabic, as well. I don’t want to make a duplicate site as this is just a hobby blog and I don’t intend on managing more sites.

  I got two ideas on how to do this.

  Idea 1: Page Breaks and buttons. I would add a page to every post that’s just the Arabic version of it, and a button at the start of the post to help readers quickly switch to it. I think is solution is best as it’s an easy to implement and edit when needed.

  Idea 2: Make two entirely seperate posts, one in English and one in Arabic. It works well theoretically but it would make my blog feel cluttered with every post basically being duplicated.

  I’m trying the first idea, but I immediately ran into an issue. I’m working with the English interface, and even when I set paragraphs to align right the text deals with Commas, Periods, etc… As if it were in English. Like If I put a period at the end of the paragraph it shoots all the way to the right, at the start of the paragraph, and selecting it is a nightmare because to the highlighting tool it just doesn’t line up with the rest of the paragraph due to the RTL/LTR conflict.

  I have tried changing my interface language to Arabic, but it just ends up flipping the issue so now its English suffering from misplaced periods instead of Arabic.

  Funny enough the Jetpack mobile app doesn’t seem to have any problem with this… At least not during writing. Because when I check the preview of this mixed English/Arabic post, I see that it once again misplaces periods.

  I’m concerned this is gonna pose a bigger problem for me down the line. I already looked around a bit but I thought it’s worth asking here if anyone has any good solutions for mixing RTL/LTF languages in a single post.

  Thanks.

  The blog I need help with is: (visible only to logged in users)

• 

  staff-rick · Staff · Mar 14, 2026 at 5:51 pm

  • Copy link

  Hey there! 👋

  Great question — mixing RTL (Arabic) and LTR (English) content in a single post is definitely doable, and the punctuation issues you’re seeing are a well-known quirk of how browsers handle bidirectional (bidi) text. The periods and commas are “directionally neutral” characters, so they inherit the direction of their surrounding context — that’s why they end up in the wrong place.

  Here’s the good news: your Idea 1 (Page Breaks with a button to switch) is a solid approach, and the RTL issue can be solved. Here’s how:

  Use the Custom HTML Block for Arabic Sections

  Instead of using a regular Paragraph block for your Arabic content, use a Custom HTML block and wrap your Arabic text with a dir="rtl" attribute. This explicitly tells the browser: “this section is Right-to-Left.”

  For example:

  <div dir=”rtl” lang=”ar”>
  <p>هنا يكون النص العربي. النقاط والفواصل ستظهر في المكان الصحيح.</p>
  </div>

  This ensures punctuation, commas, and periods all behave correctly — no more flying to the wrong side of the paragraph!

  Keep Your Interface in English

  Since your blog is primarily English, keep your WordPress interface language set to English. The dir="rtl" attribute on individual blocks handles the Arabic direction independently, so you don’t need to switch the whole interface back and forth.

  Pro Tip: Create a Reusable Block

  To save time, you can create a Synced Pattern (formerly called Reusable Block) with the Custom HTML template already set up:

  <div dir=”rtl” lang=”ar”>

  <p>Arabic text goes here</p>

  </div>

  Then every time you write a new translated section, just insert the pattern and edit the text inside. Quick and easy!

  For Inline Mixed Text (Arabic words inside English sentences or vice versa)

  If you ever need to mix both languages within the same paragraph, you can use inline direction tags:

  <p>This is an English sentence with an Arabic word: <span dir="rtl" lang="ar">مرحبا</span> embedded in it.</p>

  About the Editor vs. Preview Difference

  You may notice the editor doesn’t always render the direction perfectly — this is a known limitation in the block editor. The important thing is that the published post will display correctly when you use the dir="rtl" attribute, since browsers handle it properly on the frontend.

  I hope this helps you get your bilingual gaming blog up and running! Let us know if you have any follow-up questions.

• 

  bunmarion · Member · Mar 15, 2026 at 1:13 pm

  • Copy link

  Hi, thanks for the reply. It seems like a good solution. There was some funk with the quotation marks that didn’t make it work correctly but I fixed it and now it works. I just had to replace your quotation marks with ” these ones instead.

  Thanks again.

• 

  bunmarion · Member · Mar 15, 2026 at 1:15 pm

  • Copy link

  If I may ask for future’s sake, how would I insert hyperlinks and change the size of the text via the HTML editor? I’m no programmer but I at least I can understand what I’m typing in.

• 

  staff-rick · Staff · Mar 15, 2026 at 6:46 pm

  • Copy link

  Hey again!

  Glad the solution worked out — sorry about the quotation mark issue, that was likely a formatting glitch.

  Great question! Here’s a quick cheat sheet for the two things you need inside a Custom HTML block:

  Hyperlinks

  To create a clickable link, use the <a> tag:

  <a href=”https://example.com”>Click here</a>

  For Arabic text inside your RTL block, it would look like:

  <div dir=”rtl” lang=”ar”>
  <p>يمكنك زيارة <a href=”https://example.com”>هذا الموقع</a> لمزيد من المعلومات.</p>
  </div>

  If you’d like the link to open in a new tab, add target="_blank":

  Changing Text Size

  To make text bigger or smaller, you can wrap it in a <span> tag with a style attribute:

  <span style=”font-size: 24px;”>This text is larger</span>
  <span style=”font-size: 14px;”>This text is smaller</span>

  For example, a larger Arabic heading-style line inside your RTL block:

  <div dir=”rtl” lang=”ar”>
  <p><span style=”font-size: 28px;”>عنوان كبير</span></p>
  <p>هذا نص عادي بحجم طبيعي.</p>
  </div>

  You can combine these too! For example, a large bold Arabic link:

  <span style="font-size: 24px;">
<strong>
<a href="proxy.php?url=https://example.com">رابط كبير وعريض</a>
</strong>
</span>

  You’re doing great picking this up. Let us know if you have any other questions!

  Happy gaming

• 

  bunmarion · Member · Mar 16, 2026 at 9:50 am

  • Copy link

  Thanks, they’re all working great. I noticed I don’t need to cap off most codes with a / if it’s just one single block since they apply to everything that comes after them. I saved multiple patterns for easy access in the future, now I gotta see which post I’d like to translate first.

  Now if I had two nickels for every time in my life I had to learn some measure of programming to do something, I’d have two nickels but it’s funny that its happened twice.