Framework7
v3
Support Framework7
stars forks
Improve this Doc

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.rtl.min.css">

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

If you build your app only using iOS or MD theme then you can include theme-related RTL stylesheet:

<!-- For iOS theme only -->
<link rel="stylesheet" href="path/to/framework7.rtl.ios.min.css">
<!-- For MD theme only -->
<link rel="stylesheet" href="path/to/framework7.rtl.md.min.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.