SponsorsBecome a sponsor

RTL Layout

Framework7 has full support for RTL (right to left) languages like Arabic and Hebrew. To enable RTL mode you simply need to include CSS file with RTL styles instead of usual one and add dir="rtl" attribute on html element:

<!DOCTYPE html>
  <html dir="rtl">
    <head>
      ...
      <title>My App</title>
      <!-- Path to Framework7 RTL stylesheet -->
      <link rel="stylesheet" href="path/to/framework7-bundle-rtl.min.css">

      <!-- Path to your custom app styles-->
      <link rel="stylesheet" href="path/to/my-app.css">
      ...

Note that all RTL "mirrors" in RTL mode are made using CSS only, so you should not change order of HTML elements and keep it in LTR way.

Improve this Doc