| 1 | <!doctype html>
|
| 2 | <html lang="en">
|
| 3 | <head>
|
| 4 | ${require('./_head.html')
|
| 5 | title="RTL (Right-To-Left)"
|
| 6 | description="Support for right-to-left text in Pico with dir='rtl'"
|
| 7 | canonical="rtl.html"
|
| 8 | }
|
| 9 | </head>
|
| 10 |
|
| 11 | <body>
|
| 12 | ${require('./_nav.html')}
|
| 13 |
|
| 14 | <main class="container" id="docs">
|
| 15 | ${require('./_sidebar.html') active="rtl-link"}
|
| 16 |
|
| 17 | <div role="document">
|
| 18 | <section id="rtl">
|
| 19 | <hgroup>
|
| 20 | <h1>RTL</h1>
|
| 21 | <h2>Support for right-to-left text in Pico.</h2>
|
| 22 | </hgroup>
|
| 23 | <p>To enable RTL in Pico you need to set <code><i>dir</i>=<u>"rtl"</u></code>on the <code><<b>html</b>></code> element (<a href="https://picocss.com/examples/preview-rtl/">example</a>).</p>
|
| 24 |
|
| 25 | <pre><code><em><!doctype html></em>
|
| 26 | <<b>html</b> <i>dir</i>=<u>"rtl"</u> <i>lang</i>=<u>"ar"</u>>
|
| 27 | <em>...</em>
|
| 28 | </<b>html</b>></code></pre>
|
| 29 |
|
| 30 | <p>ℹ️ The RTL feature is still experimental and will probably evolve.</p>
|
| 31 | </section>
|
| 32 |
|
| 33 | ${require('./_footer.html')}
|
| 34 |
|
| 35 | </div>
|
| 36 | </main>
|
| 37 | <script src="js/commons.min.js"></script>
|
| 38 | </body>
|
| 39 | </html>
|