Skip to Content
Course content

225: RTL Support in PHP-Rendered Pages

Click on the "Edit" button in the top corner of the screen to edit your slide content.

A few years ago, I was reviewing a PR for a colleague who was expanding a SaaS platform into the Middle Eastern market. He had spent nearly two days manually tweaking CSS margins and floats to "fix" the layout for the Arabic version of the site. He was essentially writing a second, mirrored version of the entire stylesheet by hand. When I asked why he wasn't using the dir attribute, he looked at me like I was speaking a foreign language. He had forgotten that the browser is actually designed to handle the heavy lifting of Right-to-Left (RTL) mirroring if you just give it the right hint in the HTML.

As a PHP developer, your job isn't to write the CSS that flips the page, but to build the logic that tells the browser which direction the content should flow. If you're rendering pages dynamically based on a user's language preference, you can't hardcode dir="ltr". You need a system that detects the locale and injects the correct attributes into your template.

Mapping Locales to Document Direction

Not every language is Left-to-Right, and not every non-English language is RTL. You'll want to create a helper function or a configuration array that maps ISO language codes to their respective directions. I usually keep this in a localization helper class. For example, while English (en) and French (fr) are ltr, Arabic (ar), Hebrew (he), and Persian (fa) must be rtl.

$rtl_languages = ['ar', 'he', 'fa', 'ur'];
$user_lang = $user->getLanguage(); // Assume this returns 'ar'
$dir = in_array($user_lang, $rtl_languages) ? 'rtl' : 'ltr';
?>
<html lang="" dir="">


By placing the dir attribute on the <html> tag, you set the global direction for the entire document. This automatically flips the alignment of text, the order of columns in a simple layout, and the behavior of scrollbars. It's a massive win for very little code.

Integrating Directional Logic with Stylesheets

While dir="rtl" handles the basics, you'll inevitably run into elements that need a specific touch—like an icon that represents "forward" (an arrow pointing right in LTR, but left in RTL). I've found that the cleanest way to handle this in PHP is to inject a direction-specific class into the body tag.

<body class="theme-dark ">


With that class in place, you can avoid writing entirely separate CSS files. Instead, you can use CSS Logical Properties. Instead of using margin-left, use margin-inline-start. The browser will automatically interpret "start" as "left" for LTR and "right" for RTL. If you're supporting older browsers that don't recognize logical properties, that .rtl-mode class allows you to override specific stubborn elements without polluting your main layout logic.

One last tip: be careful with "hard" directions. If you have a phone number or a credit card field, those should almost always remain LTR, regardless of the page direction. You can wrap those specific PHP-rendered inputs in a <span dir="ltr"> to keep them from flipping and confusing the user.




📋 Practical Task

Building a Locale-Aware Page Wrapper

Create a PHP script that simulates a user session with a language preference. Your task is to implement the following:

  • Create an array of RTL languages (at least Arabic, Hebrew, and Persian).
  • Write a logic block that checks a variable $current_user_lang against that array.
  • Render a complete HTML skeleton where the <html> tag dynamically receives the correct lang and dir attributes.
  • Add a <body> tag that receives a class of either dir-rtl or dir-ltr based on the result.
  • Inside the body, render a simple navigation menu (using a <ul>) and a "User ID" field. Ensure the User ID field is wrapped in a way that it remains ltr even if the rest of the page is rtl.
Rating
0 0

There are no comments for now.

to be the first to leave a comment.