Adding Arabic and Hebrew RTL Support to an Existing HTML Template

How RTL Rendering Actually Works in a Browser

The browser applies two separate systems when rendering RTL content. The first is the Unicode Bidirectional Algorithm, which handles inline text direction automatically: Arabic and Hebrew characters display right-to-left without any CSS, while Latin characters embedded in the same sentence stay left-to-right. The second system is layout direction, controlled by the dir attribute or the CSS direction property.

Setting dir="rtl" on the <html> element activates layout direction for the entire document. Block elements align to the right, text aligns to the right, and the browser’s default scrollbar moves to the left. What it does not do is rewrite your custom CSS. Any rule using left, right, margin-left, padding-right, or float: left keeps its physical value regardless of dir.

<!-- Minimum viable RTL document shell -->
<html lang="ar" dir="rtl">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="css/bootstrap.rtl.min.css">
  <link rel="stylesheet" href="css/style.rtl.css">
</head>

For Hebrew, change lang="ar" to lang="he". The dir attribute and stylesheet swap remain identical.

Bootstrap 5 RTL Stylesheet: What It Covers

Bootstrap 5 introduced official RTL support in version 5.0. The compiled RTL stylesheet, bootstrap.rtl.min.css, is generated by the RTLCSS Node package applied to Bootstrap’s source. It mirrors every utility class with a directional meaning: .ms-3 becomes a margin-inline-end, .text-start aligns text to the right, .float-start floats right, and so on.

You swap the stylesheet reference and nothing else in your HTML. Do not load both bootstrap.min.css and bootstrap.rtl.min.css at the same time. They will conflict.

<!-- LTR (default) -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.min.css">

<!-- RTL replacement -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.3/dist/css/bootstrap.rtl.min.css">

Bootstrap’s RTL build covers its own utility classes reliably. It does not touch your template’s custom stylesheet, third-party plugin CSS, or any inline styles. Those require separate work, covered in the sections below.

Writing RTL-Safe CSS with Logical Properties

CSS logical properties replace physical directional values with writing-mode-relative equivalents. Adopt them in your custom stylesheet and the same rules work correctly in both LTR and RTL without conditional overrides.

• margin-inline-start replaces margin-left (in LTR) or margin-right (in RTL).
• padding-inline-end replaces padding-right (in LTR) or padding-left (in RTL).
• inset-inline-start replaces left in positioned elements.
• border-inline-start replaces border-left.
• text-align: start aligns to the reading start regardless of direction.

/ Physical — breaks in RTL /
.icon-label {
  padding-left: 0.5rem;
  border-left: 3px solid var(--cnvs-themecolor);
}

/ Logical — works in both directions /
.icon-label {
  padding-inline-start: 0.5rem;
  border-inline-start: 3px solid var(--cnvs-themecolor);
}

Browser support for CSS logical properties is excellent across all modern browsers as of 2025. If you need to support Internet Explorer 11, you will have to maintain separate LTR and RTL overrides, but that scenario is increasingly rare for new projects.

Loading Arabic and Hebrew Fonts Correctly

Latin system fonts do not contain Arabic or Hebrew glyphs, so a dedicated font covering the target Unicode range is required. For Arabic, common choices include Noto Sans Arabic, Cairo, and Tajawal. For Hebrew, Noto Sans Hebrew and Rubik (which also covers Latin) are well-supported options.

The cleanest approach is to declare a separate font-family on :root[dir="rtl"] so the RTL font only loads when the page is actually in RTL mode. If you are self-hosting fonts (recommended for performance and privacy compliance), subsetting to the specific Unicode block significantly reduces file size. The Arabic Unicode block runs from U+0600 to U+06FF, with supplementary ranges for extended forms.

/ In your style.rtl.css /
@import url('https://fonts.googleapis.com/css2?family=Cairo:wght@400;600;700&display=swap');

:root {
  --cnvs-body-font: 'Cairo', system-ui, sans-serif;
}

body {
  font-family: var(--cnvs-body-font);
  line-height: 1.8; / Arabic text benefits from looser line height /
}

For self-hosting guidance including subsetting commands, see our post on self-hosting Google Fonts in a Bootstrap 5 template.

Auditing Template Plugins and Third-Party Components

Bootstrap’s RTL stylesheet handles Bootstrap’s own classes. Everything else requires a manual audit. Common problem areas in any HTML template include the following.

• Swiper and Owl Carousel: both set slide transforms and navigation arrow positions using physical left/right values. Swiper exposes an rtl: true option in its configuration object. Owl Carousel requires the owl.carousel.rtl.css or a manual CSS override.
• Countdown timers and progress bars: animated widths that start from the left edge will need their origin point flipped.
• Tooltip and popover placement: Popper.js respects dir for its positioning calculations in Popper v2 and later, which is what Bootstrap 5 ships with, but you should verify placements when using placement: 'start' or 'end'.
• Icon libraries: Font Awesome icons that represent directionality (arrows, chevrons, quote marks) should be flipped with a transform: scaleX(-1) override scoped to [dir="rtl"].

/ Flip directional icons in RTL /
[dir="rtl"] .fa-arrow-right,
[dir="rtl"] .fa-chevron-right {
  transform: scaleX(-1);
  display: inline-block;
}

If your template uses a modular partial system, scoping all RTL overrides inside a [dir="rtl"] selector keeps them isolated and easy to remove later. For more on managing template partials, the post on splitting a large HTML template into reusable partials with Nunjucks is relevant background reading.

Handling Mixed-Direction Content

Real Arabic and Hebrew pages routinely contain embedded Latin text: product names, email addresses, phone numbers, URLs, code snippets. The Unicode Bidirectional Algorithm handles most of this automatically, but edge cases require explicit markup.

Use dir="ltr" on individual elements that must always render left-to-right regardless of document direction.

<!-- In an RTL document, a code snippet should stay LTR -->
<pre dir="ltr"><code>npm install bootstrap@5.3.3</code></pre>

<!-- Phone numbers with international prefixes -->
<span dir="ltr">+44 20 7946 0958</span>

The CSS property unicode-bidi: isolate achieves a similar result for inline elements without adding an HTML attribute. It is particularly useful when rendering dynamic content from a CMS where you cannot control the markup directly.

Applying RTL to the Canvas HTML Template

The Canvas HTML Template is built on Bootstrap 5 and uses CSS custom properties throughout, including --cnvs-themecolor for brand colour. That means colour and spacing tokens propagate cleanly to an RTL stylesheet without duplication.

A practical workflow for adding RTL to a Canvas project has four steps. First, duplicate your base HTML file and rename it, for example index-ar.html. Second, change <html lang="en"> to <html lang="ar" dir="rtl"> and swap the Bootstrap stylesheet reference. Third, add a style.rtl.css file containing logical property overrides, the Arabic or Hebrew font declaration, and any plugin-specific patches. Fourth, audit the page section by section in a browser with Arabic or Hebrew text content, noting any physical CSS that needs converting.

Canvas Builder can speed up the visual audit step significantly. You can inspect layout blocks in real time and spot alignment issues before writing a single line of override CSS. The post on editing a Canvas HTML template visually with Canvas Builder explains that workflow in detail.

Looking for a production-ready Bootstrap 5 HTML template? Browse Canvas Template demos and find the perfect starting point for your next project.

If you’re building with the Canvas HTML Template and want to ship production-ready Bootstrap 5 layouts faster, try Canvas Builder free — the visual builder that exports clean Canvas-ready markup in minutes.