Canvas Docs

Setting up RTL

Setting Up RTL

Canvas ships full right-to-left (RTL) support for languages like Arabic, Hebrew, and Persian. Enabling it takes two changes: set the document direction, and load the RTL stylesheet.

1. Set the direction on the html tag

<html dir="rtl" lang="en-US">

Set lang to your actual content language (for example ar for Arabic). The important part for layout is dir="rtl".

2. Load the RTL stylesheet

Canvas provides a prebuilt style-rtl.css. Use it in place of the standard style.css:

<link rel="stylesheet" href="style-rtl.css">
<link rel="stylesheet" href="css/font-icons.css">
<link rel="stylesheet" href="css/custom.css">

That is the complete setup. With dir="rtl" on <html> and style-rtl.css loaded, the entire layout, spacing, and alignment flip to read right to left.

Reference demos

The package includes working RTL pages you can copy from:

  • index-rtl.html is a full RTL homepage.
  • demo-academic-rtl.html shows a niche demo built in RTL.

The RTL source

If you compile from SASS, the RTL styles are generated from sass/_style-rtl.scss. Rebuilding produces the style-rtl.css you link in the head.

Tips

  • Always pair dir="rtl" with style-rtl.css. Setting the direction without the RTL stylesheet leaves spacing and alignment incorrect.
  • Keep your <link> order the same as a normal page, just swap style.css for style-rtl.css.
  • Open index-rtl.html side by side with your page to confirm the header, menus, and columns mirror correctly.

Code Example:

  1. 1

    Step 1

    Add the dir="rtl" to the <html> Tag.

    Example:

    <html dir="rtl" lang="ar">
  2. 2

    Step 2

    Add the RTL stylesheet to the Page replacing the existing stylesheet.

    Example:

    <link rel="stylesheet" href="style-rtl.css">
  3. 3

    Step 3

    Add the .rtl Class to the <body> Tag.

    Example:

    <body class="stretched rtl">
Was this page helpful?