Setting up Neos for Arabic, RTL languages

One of our recent project need was to have website in English as well as Arabic. So we implemented this in Neos and it was very easy to achieve this in Neos. Below is how we did it.

Settings.yaml

Add Arabic language to language dimension in Settings.yaml file of site package.       

  TYPO3CR:
     contentDimensions:
       'language':
        default: 'en_US'
        defaultPreset: 'en_US'
        presets:
          'all': ~
          'en_US':
            label: 'English (US)'
            values: ['en_US']
            uriSegment: 'en'
          'ar':
            label: 'Arabic'
            values: ['ar', 'en_US']
            uriSegment: 'ar'

Node migration

./flow node:migrate 20140326143834

Typoscript

   a. To support Right-To-Left direction in Neos Inspector input elements.

            page = Page {
            bodyTag.attributes.class = ${node.context.targetDimensions.language == 'ar' ? 'arabic-lang' : 'other'}
        }


  With bove typoscript 'arabic-lang' class will be applied to body tag if current language is 'Arabic' else the class will be 'other'. Purpose to applying 'arabic-lang' to body tag is, Neos Inspector has input elements and only the direction of input elements need to change other icons and labels in the Neos  Inspector  should have default direction Left-To-Right.


So following css need to add which is going load in Neos Backend only.        

body.arabic-lang #neos-inspector input {
            direction: rtl;

}      


        So with above css only inputs inside Neos Inspector will have direction Right-To-Left. So this change is only happened when Neos  Backend user changes language to Arabic using dimension selector. (Once you change the language, you need to refresh/reload the whole page again to reflect those changes.)


     b. To support Right-To-Left direction in editable content on page in Neos Backend and in frontend as well.

page = Page {
            body {
                languageClass = ${node.context.targetDimensions.language == 'ar' ? 'arabic-lang' : 'other'}
           }
}        



        Here 'languageClass' typoscript path will have specific class name depending upon above condition.
   
        Next step is, in Pages/Default.html and in other layouts also(if available). We need to wrap the content into
       

       
       

 
           

                {content.main -> f:format.raw()}
           

       
        Following css need to add which is going load in both frontend and Neos Backend as well.
       
div.arabic-lang {
            direction: rtl;
        }


        With above css content inside div which has class 'arabic-lang' will have direction Right-To-Left. (child elements of this div also inherits the "direction: rtl" property).

        So when Neos Backend user changes the language to Arabic and tries to edit content, direction of editor will be right to left. And in frontend also when user changes the language to Arabic, direction of content will be right to left.

Clear cache

Clear the flow cache using "./flow flow:cache:flush --force" command and don't forget to clear browser cache to affect css changes.

Categories: Neos CMS
Tags: Arabic, RTL

Copyright © 2019 Lelesys Informatik GmbH, Deutschland. All Rights Reserved.