

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.