How to use RTL (right-to-left) in Ionic 5 apps and PWA
Tags: angular, ionic, rtl, righttoleft
Published: 2020-08-16 11:16:56

<main role="main"><article class=" u-minHeight100vhOffset65 u-overflowHidden postArticle postArticle--full is-supplementalPostContentLoaded is-withAccentColors"><div class="postArticle-content js-postField js-notesSource editable" id="editor_142" g_editable="true" role="textbox" contenteditable="true" data-default-value="Title
Tell your story…"><section name="7098" 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="7215" 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 5.<br>&nbsp;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-full-app/"  class="markup--anchor markup--blockquote-anchor"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 5 Full app starter</strong></a></blockquote><h3 name="bd8c" class="graf graf--h3 graf-after--blockquote">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="1ecf" 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*h9eBYKF0LEK7tZfTZk6gfg.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*h9eBYKF0LEK7tZfTZk6gfg.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="f69c" 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 in 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, the text will start from right to left.</blockquote><h3 name="62c7" class="graf graf--h3 graf-after--blockquote">What is Ionic&nbsp;5</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 5, 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">You probably already know about Ionic, but put this section in every blog just for the sake of beginners. <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="71e4" class="graf graf--h3 graf-after--p">How to implement RTL in Ionic 5&nbsp;apps</h3><p name="201c" class="graf graf--p graf-after--h3">Implementing RTL in Ionic 5 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">All implementations revolve around these two methods. Following are the ways you can implement RTL in your Ionic 5 app.</p><h4 name="53bb" 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 5 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="2387" 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*dX9FWTMFf2SiNEdBM3RgNw.png" data-width="800" data-height="381" src="https://cdn-images-1.medium.com/max/800/1*dX9FWTMFf2SiNEdBM3RgNw.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="e6b8" 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 5 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="5de8" 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*om9k12_nfNz9AhBa-HfrUA.png" data-width="800" data-height="372" src="https://cdn-images-1.medium.com/max/800/1*om9k12_nfNz9AhBa-HfrUA.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="b02a" 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="bb26" 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*j6LLe6yK2729rDCpIaaCsA.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*j6LLe6yK2729rDCpIaaCsA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="debf" 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="d39d" 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>&nbsp;</p><pre name="ac0b" class="graf graf--pre graf-after--p">:root {<br>direction: rtl;<br>}</pre><p name="777d" class="graf graf--p graf-after--pre">This will apply RTL to all pages and components. Again, sidemenu in this implementation behaves a little different from Method 1</p><figure tabindex="0" contenteditable="false" name="83d7" 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*st1F4teHcq18aljYky3Utw.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*st1F4teHcq18aljYky3Utw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="8df1" 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="07ff" 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="510c" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="af42" class="graf graf--h3 graf--leading">Ionic 5 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 5 components and pages look in RTL.</p><blockquote name="a092" 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-full-app/"  class="markup--anchor markup--blockquote-anchor"    target="_blank"><strong class="markup--strong markup--blockquote-strong">Ionic 5 Full app starter</strong></a></blockquote><h4 name="68e4" class="graf graf--h4 graf-after--blockquote">Instagram Layout&#8202;—&#8202;Ion-item&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="3d91" 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*pMW9MELbO3Z7124YgdQZvA.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*pMW9MELbO3Z7124YgdQZvA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="aeca" class="graf graf--h4 graf-after--figure">Whatsapp Layout&#8202;—&#8202;Header and Ion-item&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="948a" 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*q2CYVjtSVpifn82Cz6Zrzw.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*q2CYVjtSVpifn82Cz6Zrzw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="424d" class="graf graf--h4 graf-after--figure">Youtube layout&#8202;—&#8202;Ion-item&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="8d6f" 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*vQzgZMjiEj0J81DtdTvZXA.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*vQzgZMjiEj0J81DtdTvZXA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="f072" class="graf graf--h4 graf-after--figure">Horizontal Sliders&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="ca13" 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*Ik-HJBsldahXZf0_gyJv_A.gif" data-width="350" data-height="599" src="https://cdn-images-1.medium.com/max/800/1*Ik-HJBsldahXZf0_gyJv_A.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="7394" 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*LZQ5MFd5E8rIzXMkJmcfww.gif" data-width="350" data-height="599" src="https://cdn-images-1.medium.com/max/800/1*LZQ5MFd5E8rIzXMkJmcfww.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="d38e" class="graf graf--h4 graf-after--figure">Segments ✅</h4><figure tabindex="0" contenteditable="false" name="0135" 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*dupFGlbuMt5lvdJxjUj7mA.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*dupFGlbuMt5lvdJxjUj7mA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="e5ab" class="graf graf--h4 graf-after--figure">Ion-item ✅</h4><figure tabindex="0" contenteditable="false" name="41bb" 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*KaZtC6CafdXttfZSm0RhYw.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*KaZtC6CafdXttfZSm0RhYw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="bb70" 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="681b" 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*jJyDg8S4UDcxeVDWbmTZ8w.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*jJyDg8S4UDcxeVDWbmTZ8w.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="0bb8" 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="14b7" 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*aTFX0JUbKQvJmtqOUiSqmA.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*aTFX0JUbKQvJmtqOUiSqmA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="fd83" class="graf graf--p graf-after--figure">As you can see, the chat layout is an 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="7245" 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*hNz3pjTG8eFUe5X8OIu5Vw.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*hNz3pjTG8eFUe5X8OIu5Vw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="089a" 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="0d4e" class="graf graf--h4 graf-after--p">Action sheet&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="e2af" 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*lEktHW-vxCBuf2B6TpNt7Q.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*lEktHW-vxCBuf2B6TpNt7Q.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="2bc6" class="graf graf--h4 graf-after--figure">Alert and prompts&nbsp;✅</h4><figure tabindex="0" contenteditable="false" name="c775" 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*fe2TQ0r5KaJon780c4797w.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*fe2TQ0r5KaJon780c4797w.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h4 name="1ba0" class="graf graf--h4 graf-after--figure">Range selectors ✅</h4><figure tabindex="0" contenteditable="false" name="1f2f" 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*_-uEdreOSoIqpoLmr_Tu2g.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*_-uEdreOSoIqpoLmr_Tu2g.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="f304" 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="a74e" 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*M88wRtSNIB4PEkEb6euftA.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*M88wRtSNIB4PEkEb6euftA.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="fad4" 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="e615" class="graf graf--h4 graf-after--p">Buttons ✅</h4><figure tabindex="0" contenteditable="false" name="84fe" 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*VT65q-V0doIUZbGwbyULpw.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*VT65q-V0doIUZbGwbyULpw.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><p name="a614" 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="0be2" 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*OCk58mhezOcNBXpkhOUITg.jpeg" data-width="800" data-height="530" src="https://cdn-images-1.medium.com/max/800/1*OCk58mhezOcNBXpkhOUITg.jpeg"><div class="crosshair u-ignoreBlock"></div></div></figure><h3 name="63cc" 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 5. 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 graf--trailing"><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 5 Full app starter</strong></a></blockquote></div></div></section><section name="aecd" class="section section--body"><div class="section-divider"><hr class="section-divider"></div><div class="section-content"><div class="section-inner sectionLayout--insetColumn"><h3 name="01a8" class="graf graf--h3 graf--leading">Next Steps</h3><p name="01b7" class="graf graf--p graf-after--h3">If you liked this blog, you will also find the following blogs interesting and helpful. Feel free to ask any questions in the comment section</p><ul class="postList"><li name="1a12" class="graf graf--li graf-after--p">Ionic Payment Gateways&#8202;—&#8202;<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="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Stripe</a> | <a href="https://enappd.com/blog/ionic-4-paypal-payment-integration-for-apps-and-pwa/16"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">PayPal</a> | <a href="https://enappd.com/blog/how-to-integrate-apple-pay-in-ionic-4-apps/21"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Apple Pay</a> | <a href="https://enappd.com/blog/how-to-integrate-razorpay-in-ionic-4-apps-and-pwa/20"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">RazorPay</a></li><li name="9210" class="graf graf--li graf-after--li">Ionic Charts with&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-charts-using-google-charts/66"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Google Charts </a>| <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-3/60"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">HighCharts</a> | <a href="https://enappd.com/blog/adding-charts-in-ionic-4-apps-and-pwa-part-2/54"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">d3.js</a> | <a href="https://enappd.com/blog/charts-in-ionic-4-apps-and-pwa-part-1/52"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Chart.js</a></li><li name="e50b" class="graf graf--li graf-after--li">Ionic Social Logins&#8202;—&#8202;<a href="https://enappd.com/blog/facebook-login-in-ionic-4-apps-using-firebase/25"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Facebook</a> | <a href="https://enappd.com/blog/google-login-in-ionic-4-apps-using-firebase/39"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Google</a> | <a href="https://enappd.com/blog/twitter-login-in-ionic-4-apps-using-firebase/24"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Twitter</a></li><li name="ce2c" class="graf graf--li graf-after--li">Ionic Authentications&#8202;—&#8202;<a href="https://enappd.com/blog/email-authentication-with-firebase-in-ionic-4/38"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Via Email</a> | <a href="https://enappd.com/blog/firebase-anonymous-login-in-ionic-4/37"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Anonymous</a></li><li name="7bd1" class="graf graf--li graf-after--li">Ionic Features&#8202;—&#8202;<a href="https://enappd.com/blog/using-geolocation-geocoding-and-reverse-geocoding-in-ionic-4/45"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Geolocation</a> | <a href="https://enappd.com/blog/qr-code-scanning-and-optical-character-recognition-ocr-in-ionic-4/9"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">QR Code reader </a>| <a href="https://enappd.com/blog/best-fitness-plugins-for-ionic-4-how-to-use-pedometer/15"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Pedometer</a>| <a href="https://enappd.com/blog/implement-signature-pad-in-ionic-apps/145/"  class="markup--anchor markup--li-anchor" rel="noopener"    target="_blank">Signature Pad</a></li><li name="bba3" class="graf graf--li graf-after--li">Media in Ionic&#8202;—&#8202;<a href="https://enappd.com/blog/spotify-like-music-in-ionic-4-apps/48"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Audio</a> | <a href="https://enappd.com/blog/adding-video-player-in-ionic-4-app/64"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Video</a> | <a href="https://enappd.com/blog/image-picker-in-ionic-4-app/67"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Image Picker</a> | <a href="https://enappd.com/blog/how-to-add-image-cropper-in-ionic-4-app/68"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Image Cropper</a></li><li name="ca53" class="graf graf--li graf-after--li">Ionic Essentials&#8202;—&#8202;<a href="https://enappd.com/blog/ionic-4-save-and-retrieve-data-locally-on-device/59"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Native Storage</a> | <a href="https://enappd.com/blog/how-to-translate-in-ionic-4-globalization-internationalization-and-localization/11"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Translations</a> | <a href="https://enappd.com/blog/rtl-right-to-left-use-in-ionic-4/50"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">RTL</a></li><li name="b3a4" class="graf graf--li graf-after--li">Ionic messaging&#8202;—&#8202;<a href="https://enappd.com/blog/implement-ionic-4-firebase-push/34"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Firebase Push</a> | <a href="https://enappd.com/blog/automatically-read-sms-in-ionic-4-apps/42"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Reading SMS</a></li><li name="1cc4" class="graf graf--li graf-after--li graf--trailing">Ionic with Firebase&#8202;—&#8202;<a href="https://enappd.com/blog/how-to-integrate-firebase-in-ionic-4-apps/23"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Basics</a> | <a href="https://enappd.com/blog/firebase-with-ionic-4-hosting-auth-and-db-connection/58"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Hosting and DB</a> | <a href="https://enappd.com/blog/firebase-cloud-functions-in-ionic-4-complete-guide/32"  class="markup--anchor markup--li-anchor" rel="noopener nofollow noopener noopener noopener noopener noopener noopener"    target="_blank">Cloud functions</a></li></ul></div></div></section><section name="5071" 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="ad14" class="graf graf--h3 graf--leading">Ionic React Full App with Capacitor</h3><p name="4fa5" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 React Capacitor app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-react-full-app-capacitor/"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 React Full App in Capacitor</a></p><figure tabindex="0" contenteditable="false" name="0d2d" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 441px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 63%;"></div><img class="graf-image" data-image-id="1*G3yOFVX4oABx9MhUy-3kng.png" data-width="760" data-height="479" alt="Ionic 5 React Full App in Capacitor from Enappd" src="https://cdn-images-1.medium.com/max/800/1*G3yOFVX4oABx9MhUy-3kng.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic 5 React Full App in Capacitor from&nbsp;Enappd</figcaption></figure><h3 name="30ba" class="graf graf--h3 graf-after--figure">Ionic Capacitor Full App (Angular)</h3><p name="9a60" class="graf graf--p graf-after--h3">If you need a base to start your next Angular <strong class="markup--strong markup--p-strong">Capacitor app</strong>, you can make your next awesome app using <a href="https://store.enappd.com/product/capacitor-full-app-with-ionic-angular/"  class="markup--anchor markup--p-anchor" rel="noopener nofollow noopener noopener"    target="_blank">Capacitor Full App</a></p><figure tabindex="0" contenteditable="false" name="c219" class="graf graf--figure graf-after--p"><div class="aspectRatioPlaceholder is-locked" style="max-width: 700px; max-height: 761px;"><div class="aspectRatioPlaceholder-fill" style="padding-bottom: 108.7%;"></div><img class="graf-image" data-image-id="0*UwSHcofTMStMnzAX.png" data-width="736" data-height="800" alt="Capacitor Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*UwSHcofTMStMnzAX.png"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Capacitor Full App with huge number of layouts and&nbsp;features</figcaption></figure><h3 name="2f1c" class="graf graf--h3 graf-after--figure">Ionic Full App (Angular and&nbsp;Cordova)</h3><p name="1008" class="graf graf--p graf-after--h3">If you need a base to start your next Ionic 5 app, you can make your next awesome app using <a href="https://store.enappd.com/product/ionic-full-app"  class="markup--anchor markup--p-anchor" rel="noopener"    target="_blank">Ionic 5 Full App</a></p><figure tabindex="0" contenteditable="false" name="16d6" 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.1%;"></div><img class="graf-image" data-image-id="0*1ArpKyhiDHZnevwB.jpeg" data-width="700" data-height="442" alt="Ionic Full App with huge number of layouts and features" src="https://cdn-images-1.medium.com/max/800/0*1ArpKyhiDHZnevwB.jpeg"><div class="crosshair u-ignoreBlock"></div></div><br/><figcaption class="imageCaption" contenteditable="true" data-default-value="Type caption for image (optional)">Ionic Full App in Cordova, with huge number of layouts and&nbsp;features</figcaption></figure><p name="dbe7" class="graf graf--p graf--empty graf-after--figure"><br></p><p name="7299" class="graf graf--p graf--empty graf-after--p graf--trailing"><br></p></div></div></section></div></article></main>