How to use RTL (right-to-left) in Ionic 4
Tags: ionic, rtl, arabic, urdu
Published: 2020-01-10 11:20:18

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors" lang="en"><div class="postArticle-content js-postField js-notesSource editable" id="editor_6" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…" spellcheck="false"><section name="33e2" class="section section--body section--first"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><p name="3023" class="graf graf--p graf-after--figure">RTL is a very specific feature desired by people whose language is written from right to left. In this post you’ll learn how to implement RTL in Ionic 4. I will also show how various Ionic components look in an RTL layout.</p><blockquote name="b622" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">All the layouts used in this blogpost can be found in </strong><a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 Full app starter</strong></a></blockquote><p name="cae3" class="graf graf--p graf-after--blockquote">Ionic 4 has updated majority of its features with RTL capability, but a stable version is yet to be officially released. You can follow <a href="https://github.com/ionic-team/ionic/issues/17012"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this issue </a>for more detailed information</p><h3 name="b8ec" class="graf graf--h3 graf-after--p">What is RTL (Right to&nbsp;Left)</h3><p name="ff09" class="graf graf--p graf-after--h3">LTR (left-to-right) and RTL (right-to-left) are the two major layout patterns based on various languages in the world. The major difference between LTR and RTL language scripts is the direction in which content is displayed:</p><ul class="postList"><li name="8ec3" class="graf graf--li graf-after--p">LTR languages display content from left to right</li><li name="0339" class="graf graf--li graf-after--li">RTL languages display content from right to left</li></ul><p name="3055" class="graf graf--p graf-after--li">RTL content also affects the direction in which some icons and images are displayed, particularly those depicting a sequence of events. For example, <code class="markup--code markup--p-code">ion-item</code> component has a left-to-right flow by default, whatever element is added inside it. But making the content RTL makes the whole layout mirrored.</p><p name="bd06" class="graf graf--p graf-after--p">In general, the passage of time is depicted as left to right for LTR languages, and right to left for RTL languages.</p><figure tabindex="0" contenteditable="false" name="91da" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*dqOlnMx1fvFcvE5tp2X2zA.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*dqOlnMx1fvFcvE5tp2X2zA.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">LTR and RTL layout comparison for a simple&nbsp;form</figcaption></figure><p name="9209" class="graf graf--p graf-after--figure">In the above image, notice the</p><ul class="postList"><li name="9533" class="graf graf--li graf-after--p">Change in text alignment</li><li name="f7f3" class="graf graf--li graf-after--li">Change in position of * on the words</li><li name="d6f3" class="graf graf--li graf-after--li">Position of down arrow for the dropdown</li><li name="be1f" class="graf graf--li graf-after--li">Change is position of Hamburger menu and filter icon in header</li></ul><p name="d3b4" class="graf graf--p graf-after--li">This will give you a basic idea of RTL layouts.</p><blockquote name="9ee4" class="graf graf--blockquote graf-after--p">Notice that since both the images above have English as the language, you still see the actual sentence going from left-to-right. But when you are writing in an RTL language, this will be exact opposite.</blockquote><h3 name="2977" class="graf graf--h3 graf-after--blockquote">What is Ionic&nbsp;4</h3><p name="295e" class="graf graf--p graf-after--h3">I know most of the readers reading this blog will know what is Ionic 4, but just for the sake of beginners, I explain this in my every blog.</p><p name="a6fd" class="graf graf--p graf-after--p"><strong class="markup--strong markup--p-strong">Ionic</strong> is a complete open-source SDK for hybrid mobile app development. Ionic provides tools and services for developing hybrid mobile apps using Web technologies like CSS, HTML5, and Sass. Apps can be built with these Web technologies and then distributed through native app stores to be installed on devices.</p><p name="de54" class="graf graf--p graf-after--p">In other words&#8202;—&#8202;If you create native apps in Android, you code in <strong class="markup--strong markup--p-strong">Java</strong>. If you create native apps in iOS, you code in <strong class="markup--strong markup--p-strong">Obj-C</strong> or <strong class="markup--strong markup--p-strong">Swift</strong>. Both of these are powerful, but complex languages. With Cordova (and Ionic) you can write a single piece of code for your app that can run on both iOS and Android (and windows!), that too with the simplicity of HTML, CSS, and JS. I’m a huge fan of Ionic and been developing Ionic apps for last 4 years.</p><h3 name="34ac" class="graf graf--h3 graf-after--p">How to implement RTL in Ionic 4&nbsp;apps</h3><p name="201c" class="graf graf--p graf-after--h3">Implementing RTL in Ionic 4 apps is very easy. It can be done in two ways</p><ul class="postList"><li name="a592" class="graf graf--li graf-after--p">Using <code class="markup--code markup--li-code">dir="rtl"</code> attribute in HTML tags</li><li name="e7d9" class="graf graf--li graf-after--li">Using <code class="markup--code markup--li-code">direction= rtl</code> in css</li></ul><p name="6720" class="graf graf--p graf-after--li is-selected">All implementations revolve around these two methods. Following are the ways you can implement RTL in your Ionic 4 app.</p><h4 name="b187" class="graf graf--h4 graf-after--p">1. Using HTML&nbsp;tag</h4><p name="070d" class="graf graf--p graf-after--h4">If you want to convert the complete app into RTL layout, then use <code class="markup--code markup--p-code">dir="rtl"</code> on <code class="markup--code markup--p-code">&lt;html&gt;</code> tag itself. For Ionic 4 apps, the parent HTML is <code class="markup--code markup--p-code">index.html</code> in <code class="markup--code markup--p-code">src</code> folder</p><figure tabindex="0" contenteditable="false" name="bcef" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 333px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 47.599999999999994%;"></div><img class="graf-image" data-image-id="1*2eZwViFlFpnC90a_43OIyA.png" data-width="869" data-height="414" src="https://cdn-images-1.medium.com/max/800/1*2eZwViFlFpnC90a_43OIyA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Global RTL setting on &lt;html&gt;&nbsp;tag</figcaption></figure><h4 name="aee6" class="graf graf--h4 graf-after--figure">2. Using router-outlet or&nbsp;ion-app</h4><p name="c627" class="graf graf--p graf-after--h4">Editing HTML tag with <code class="markup--code markup--p-code">dir="rtl"</code> is not a good solution if you want to change the layout dynamically from a setting inside the app.</p><p name="3a86" class="graf graf--p graf-after--p">In such case, you can make use of <code class="markup--code markup--p-code">ion-router-outlet</code> or <code class="markup--code markup--p-code">&lt;ion-app&gt;</code> tag which is the parent of all the pages in Ionic 4 apps. Use <code class="markup--code markup--p-code">dir="rtl"</code> on <code class="markup--code markup--p-code">&lt;ion-router-outlet&gt;</code> or <code class="markup--code markup--p-code">&lt;ion-app&gt;</code>tag, and all the pages under that will get RTL layout</p><figure tabindex="0" contenteditable="false" name="3ec7" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 326px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 46.5%;"></div><img class="graf-image" data-image-id="1*WLHE11ih-NQVfIzIX5kbLA.png" data-width="821" data-height="382" src="https://cdn-images-1.medium.com/max/800/1*WLHE11ih-NQVfIzIX5kbLA.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">RTL implementation on ion-router-outlet</figcaption></figure><p name="e4e0" class="graf graf--p graf-after--figure">One thing to notice here, when you apply RTL on <code class="markup--code markup--p-code">ion-router-outlet</code>&nbsp;, the sidemenu behaves opposite to how it behaves with <code class="markup--code markup--p-code">dir="rtl"</code> on <code class="markup--code markup--p-code">&lt;html</code> tag</p><figure tabindex="0" contenteditable="false" name="bce0" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*d2DW5lC_66CSOKnx9wGGow.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*d2DW5lC_66CSOKnx9wGGow.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="5bb2" class="graf graf--p graf-after--figure">Notice in both cases, the Hamburger menu icon in header is on right, but the menu opens in different way for both implementations.</p><h4 name="e7c4" class="graf graf--h4 graf-after--p">3. Using CSS at global&nbsp;level</h4><p name="1d9e" class="graf graf--p graf-after--h4">You can also convert the complete app to RTL using CSS in <code class="markup--code markup--p-code">global.scss</code></p><pre name="c835" class="graf graf--pre graf-after--p">:root {<br>   direction: rtl;<br>}</pre><p name="d12f" class="graf graf--p graf-after--pre">This will apply this to all pages and components. Again, sidemenu in this implementation behaves a little different from Method 1</p><figure tabindex="0" contenteditable="false" name="b958" class="graf graf--figure graf-after--p is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*35gksOBR8cDyrFwwz-KFGg.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*35gksOBR8cDyrFwwz-KFGg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="7f34" class="graf graf--p graf-after--figure">So RTL at root css level and <code class="markup--code markup--p-code">dir="rtl"</code> on <code class="markup--code markup--p-code">&lt;ion-app&gt;</code> tag have same effect.</p><h4 name="bd43" class="graf graf--h4 graf-after--p">4. Using CSS at Page&nbsp;level</h4><p name="bc22" class="graf graf--p graf-after--h4 graf--trailing">If you only want to convert a particular page to RTL, then you can make use of CSS at the page level. Just add <code class="markup--code markup--p-code">direction: rtl;</code> on a page level class, and you’ll get the page in RTL layout.</p></div></div></section><section name="7ab4" class="section section--body section--last"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="52a7" class="graf graf--h3 graf--leading">Ionic 4 components in RTL (right-to-left) Layout</h3><p name="344d" class="graf graf--p graf-after--h3">Now let’s take a good look at how different Ionic 4 components and pages look in RTL. Please note that these are valid for Ionic 4.12.0, as there may be changes after that.</p><blockquote name="1a3b" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">All the layouts used below can be found in </strong><a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 Full app starter</strong></a></blockquote><h4 name="68e4" class="graf graf--h4 graf-after--blockquote">Instagram Layout&#8202;—&#8202;ion-items ✅</h4><figure tabindex="0" contenteditable="false" name="d35b" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*t-w9JonhWBQl8sVDK4FirQ.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*t-w9JonhWBQl8sVDK4FirQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="9f2a" class="graf graf--h4 graf-after--figure">Whatsapp Layout&#8202;—&#8202;Header and ion-items ✅</h4><figure tabindex="0" contenteditable="false" name="151d" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*gnPpSAs0BVmGqg3APLFeDA.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*gnPpSAs0BVmGqg3APLFeDA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="adc1" class="graf graf--h4 graf-after--figure">Youtube layout&#8202;—&#8202;ion-items ✅</h4><figure tabindex="0" contenteditable="false" name="49ff" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*zl3M-UWsorwvk7owy_Li9A.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*zl3M-UWsorwvk7owy_Li9A.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="c710" class="graf graf--h4 graf-after--figure">Horizontal Sliders&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="757f" class="graf graf--figure graf-after--h4"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 599px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 171.1%;"></div><img class="graf-image" data-image-id="1*T3TlJLINAxHAdyJqcY8aKg.gif" data-width="350" data-height="599" src="https://cdn-images-1.medium.com/max/800/1*T3TlJLINAxHAdyJqcY8aKg.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Horizontal slider in&nbsp;LTR</figcaption></figure><figure tabindex="0" contenteditable="false" name="ee87" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 599px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 171.1%;"></div><img class="graf-image" data-image-id="1*ZUc-NVP5BEg-tgLGdIskIQ.gif" data-width="350" data-height="599" src="https://cdn-images-1.medium.com/max/800/1*ZUc-NVP5BEg-tgLGdIskIQ.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Horizontal slider in&nbsp;RTL</figcaption></figure><h4 name="23a7" class="graf graf--h4 graf-after--figure">Segments ❌</h4><figure tabindex="0" contenteditable="false" name="b207" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*qjGEPxyki9YL1BX0MszqJw.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*qjGEPxyki9YL1BX0MszqJw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="dd53" class="graf graf--p graf-after--figure">Notice the segment in the header. RTL layout has small border issue in Segments. I believe this has been resolved in future release 4.5.0, as mentioned in <a href="https://github.com/ionic-team/ionic/issues/17012"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">this Github issue</a>.</p><h4 name="5e2b" class="graf graf--h4 graf-after--p">Ion-items ✅</h4><figure tabindex="0" contenteditable="false" name="545f" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*8aRN1iMR0bJjPTvtvgCybA.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*8aRN1iMR0bJjPTvtvgCybA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f3a3" class="graf graf--p graf-after--figure">Notice how both the left-side and right-side icons have shifted in RTL layout</p><h4 name="419a" class="graf graf--h4 graf-after--p">Content-loaders (Skeleton text)&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="0d22" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*JmqsAp3uJJHPHhEGat7NgA.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*JmqsAp3uJJHPHhEGat7NgA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="332e" class="graf graf--p graf-after--figure">Skeleton text changes as per RTL layout as well.</p><h4 name="4a68" class="graf graf--h4 graf-after--p">Chat Layout&nbsp;🤔</h4><figure tabindex="0" contenteditable="false" name="4762" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*AgMDWgReJfstTKoADEDq_Q.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*AgMDWgReJfstTKoADEDq_Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="92fe" class="graf graf--p graf-after--figure">As you can see, the chat layout is a edge case for RTL. You really need to know if the users of your RTL language are habitual of seeing their text on the right or left. Accordingly, you’ll have to change the CSS of your chat layout</p><h4 name="0241" class="graf graf--h4 graf-after--p">Date pickers&nbsp;🤔</h4><figure tabindex="0" contenteditable="false" name="9199" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*4wbT-SK1957N1tFnXa6bug.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*4wbT-SK1957N1tFnXa6bug.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="ff98" class="graf graf--p graf-after--figure">You can see most of the Date picker input fields adjusted as per RTL, but the floating type input couldn’t. Also the ticker shown for picking value does not change as per RTL.</p><h4 name="2250" class="graf graf--h4 graf-after--p">Action sheet&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="9c85" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*k0raQQtVET_d0PUZporFVA.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*k0raQQtVET_d0PUZporFVA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="0fe9" class="graf graf--h4 graf-after--figure">Alert and prompts&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="4220" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*CwEyE3txIYiKLNn7rIQP_Q.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*CwEyE3txIYiKLNn7rIQP_Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="9161" class="graf graf--h4 graf-after--figure">Range selectors ✅</h4><figure tabindex="0" contenteditable="false" name="037b" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*xOMUDFWaeyyaiKjEqeUKKw.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*xOMUDFWaeyyaiKjEqeUKKw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="fd1a" class="graf graf--p graf-after--figure">Notice the minimum and maximum value of range selectors get swapped in RTL, and so is the movement of slider to increase value.</p><h4 name="5df0" class="graf graf--h4 graf-after--p">Grid layout</h4><figure tabindex="0" contenteditable="false" name="7d20" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*nowG_XBry4tiKX6OEtqBxw.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*nowG_XBry4tiKX6OEtqBxw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="302b" class="graf graf--p graf-after--figure">These two almost look the same, but if you look closely, you’ll notice that the first product in the grid starts from the right in RTL layout.</p><h4 name="d817" class="graf graf--h4 graf-after--p">Slider ❌</h4><p name="34d2" class="graf graf--p graf-after--h4">Ionic slider does not work correctly in RTL layout. This is probably the most noticeable bug in RTL layout so far.</p><figure tabindex="0" contenteditable="false" name="c4a0" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 599px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 171.1%;"></div><img class="graf-image" data-image-id="1*LVTPoI-T-ENS02mV1fUP3Q.gif" data-width="350" data-height="599" src="https://cdn-images-1.medium.com/max/800/1*LVTPoI-T-ENS02mV1fUP3Q.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Slider in LTR (left-to-right)</figcaption></figure><figure tabindex="0" contenteditable="false" name="babc" class="graf graf--figure graf-after--figure"><div class="aspectRatioPlaceholder is-locked" style="max-width: 350px; max-height: 601px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 171.70000000000002%;"></div><img class="graf-image" data-image-id="1*7VG6P0hkgZoHqJIjqXeUXw.gif" data-width="350" data-height="601" src="https://cdn-images-1.medium.com/max/800/1*7VG6P0hkgZoHqJIjqXeUXw.gif"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Slider bugs out in RTL (right-to-left)</figcaption></figure><h4 name="2ae4" class="graf graf--h4 graf-after--figure">Buttons ✅</h4><figure tabindex="0" contenteditable="false" name="ac30" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*25kvGp41apy_EYlXrDGLPQ.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*25kvGp41apy_EYlXrDGLPQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="c084" class="graf graf--p graf-after--figure">Notice how the button icons shift in RTL layout. The text centered in the button stays centered.</p><h4 name="f7dd" class="graf graf--h4 graf-after--p">Filtering List&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="56ea" class="graf graf--figure graf-after--h4 is-defaultValue"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 464px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 66.3%;"></div><img class="graf-image" data-image-id="1*q5WRV-y5ov3Jw2yICUNxZw.jpeg" data-width="1000" data-height="663" src="https://cdn-images-1.medium.com/max/800/1*q5WRV-y5ov3Jw2yICUNxZw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="efa6" class="graf graf--h3 graf-after--figure">Conclusion</h3><p name="c8cb" class="graf graf--p graf-after--h3">We looked at various methods of implementation of RTL in Ionic 4. We also had a look at various layouts and how they look in RTL layout.</p><p name="be2c" class="graf graf--p graf-after--p">This is not an exhaustive list of all Ionic components and what all combination are possible. But all these example give us an idea of how the app will look and behave if we use RTL layouts.</p><blockquote name="1359" class="graf graf--blockquote graf-after--p"><strong class="markup--strong markup--blockquote-strong">All the layouts used in this blogpost can be found in </strong><a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--blockquote-anchor" rel="noopener"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 4 Full app starter</strong></a></blockquote><h3 name="9be7" class="graf graf--h3 graf-after--blockquote">Next Steps</h3><p name="178a" class="graf graf--p graf-after--h3">Now that you have learned the implementation RTL layout in Ionic 4, you can also try</p><ul class="postList"><li name="9f48" class="graf graf--li graf-after--p"><a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 PayPal payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="aa95" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/ionic-4-stripe-payment-integration-with-firebase-for-apps-and-pwa/17"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Stripe payment integration&#8202;—&#8202;for Apps and PWA</a></li><li name="fc67" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Apple Pay integration</a></li><li name="b1fc" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Twitter login in Ionic 4 with Firebase</a></li><li name="57fe" class="graf graf--li graf-after--li"><a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Facebook login in Ionic 4 with Firebase</a></li><li name="97f4" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/using-geolocation-and-beacon-plugins-in-ionic-4-754b41304007"  class="markup--anchor markup--li-anchor"    target="_blank">Geolocation</a> in Ionic 4</li><li name="34a6" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4-95fd46be91dd"  class="markup--anchor markup--li-anchor"    target="_blank">QR Code and scanners</a> in Ionic 4 and</li><li name="de81" class="graf graf--li graf-after--li"><a href="https://medium.com/enappd/how-to-translate-in-ionic-4-globalization-internationalization-and-localization-31ec5807a8bc"  class="markup--anchor markup--li-anchor"    target="_blank">Translations in Ionic 4</a></li></ul><p name="2930" class="graf graf--p graf-after--li">If you need a base to start your next Ionic 4 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-4-full-app/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener nofollow noopener noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Ionic 4 Full App</a></p><figure tabindex="0" contenteditable="false" name="89dc" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 442px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63.2%;"></div><img class="graf-image" data-image-id="1*2BzL8TesnBHuazHr3VA4SQ.jpeg" data-width="760" data-height="480" src="https://cdn-images-1.medium.com/max/800/1*2BzL8TesnBHuazHr3VA4SQ.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Use Ionic 4 Full app template for your next awesome&nbsp;app</figcaption></figure><p name="1238" class="graf graf--p graf-after--figure graf--trailing">This article was originally published on <a href="http://enappd.com/?source=post_page---------------------------"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Enappd</a>.</p></div></div></section></div></article></main>