RTL Support

_locales/_languages.json

@@ -1,10 +1,10 @@
 {
-  "ar": "العربیة",
+  "ar": { "name": "العربیة", "dir": "rtl" },
   "az": "Azeri",
   "bg": "Български език",
   "bqi": "Luri Bakhtiari",
   "ca": "Català",
-  "ckb": "کوردی",
+  "ckb": { "name": "کوردی", "dir": "rtl" },
   "cs": "Čeština",
   "da": "Dansk",
   "de": "Deutsch",
@@ -13,7 +13,7 @@
   "eo": "Esperanto",
   "es": "Español",
   "eu": "Euskara",
-  "fa": "فارسی",
+  "fa": { "name": "فارسی", "dir": "rtl" },
   "fi": "Suomi",
   "fr": "Français",
   "gl": "Galego",

docs/STYLES.md

@@ -16,6 +16,7 @@ We use `prettier` for CSS formatting. Use `pnpm -w fix:format` before committing
 ### General
 
 - Prefer `padding-top`, `padding-bottom`, `padding-left` etc. over `padding` to avoid bugs through order-critical dependencies between properties, except when you only need `padding` or `border` etc.
+- Avoid `padding-right`, `margin-left`, `float: left` and so on, instead use `padding-inline-end`, `margin-inline-start` and `float: inline-start` to avoid bugs with RTL Layout (some languages are written right to left, so the interface should also be "mirrored").
 - Try to avoid hacky `!important` as much as possible (goal is to get rid of them altogether at one point), if your components are well composed and styles isolated you don't need them
 - Avoid setting styles directly on elements via the `style` attribute. Exception: the value is dynamically set through an JavaScript variable
 - Prefer `0` instead of `0px` when setting zero values

packages/frontend/scss/chat/_chat-list-item.scss

@@ -23,7 +23,7 @@
     margin-top: 1px;
 
     font-size: 9pt;
-    margin-left: 5px;
+    margin-inline-start: 5px;
     height: 20px;
     padding: 0 5pt;
     line-height: 20px;
@@ -33,7 +33,7 @@
 
   & > .content {
     flex-grow: 1;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     // parent - 48px (for avatar) - 10px (our right padding)
     max-width: calc(100% - 58px);
 
@@ -76,7 +76,7 @@
 
       & > div > .timestamp {
         flex-shrink: 0;
-        margin-left: 6px;
+        margin-inline-start: 6px;
         font-size: 11px;
         line-height: 16px;
         letter-spacing: 0.3px;
@@ -128,8 +128,8 @@
         }
 
         & > .summary {
-          float: left;
-          margin-right: 2px;
+          float: inline-start;
+          margin-inline-end: 2px;
           &.draft {
             color: var(--draftTextColor);
           }
@@ -142,7 +142,7 @@
       border-radius: 2px;
       font-size: 11px;
       padding: 1px 4px;
-      margin-left: 2px;
+      margin-inline-start: 2px;
     }
   }
 
@@ -253,7 +253,7 @@
     @include color-svg('./images/pin.svg', var(--globalText));
     width: 16px;
     height: 16px;
-    margin-left: 6px;
+    margin-inline-start: 6px;
   }
 }
 

packages/frontend/scss/contact/_contact-list.scss

@@ -1,6 +1,6 @@
 .contact-list-item {
   display: flex;
-  padding-left: 20px;
+  padding-inline-start: 20px;
 
   &:hover {
     background-color: var(--contactListItemBgHover);
@@ -11,7 +11,7 @@
   }
 
   .chat-list & {
-    padding-left: 0px;
+    padding-inline-start: 0px;
   }
 
   &[disabled] {
@@ -23,7 +23,7 @@
 }
 
 .delta-checkbox {
-  margin-right: 10px;
+  margin-inline-end: 10px;
   input {
     -webkit-appearance: none;
     width: 20px;

packages/frontend/scss/contact/_contact.scss

@@ -16,7 +16,7 @@
     display: inline-block;
     width: calc(100% - 64px);
     // height: 54px;
-    margin-left: 10px;
+    margin-inline-start: 10px;
     .chat-list & {
       width: calc(100% - 37px);
     }

packages/frontend/scss/main_screen/_navbar_wrapper.scss

@@ -41,8 +41,8 @@
   }
 
   span.views {
-    margin-left: auto;
-    margin-right: 15px;
+    margin-inline-start: auto;
+    margin-inline-end: 15px;
     display: flex;
   }
 

packages/frontend/scss/overwrites/_bp4-overwrites.scss

@@ -208,3 +208,11 @@ input[type='text']:focus {
 .bp4-tab-list {
   padding: 5px;
 }
+
+.bp4-navbar-group.bp4-align-left {
+  float: inline-start;
+}
+
+.bp4-navbar-group.bp4-align-right {
+  float: inline-end;
+}

packages/frontend/src/App.tsx

@@ -13,8 +13,6 @@ import { runPostponedFunctions } from './onready'
 import { I18nContext } from './contexts/I18nContext'
 
 export default function App(_props: any) {
-  const [localeData, setLocaleData] = useState<LocaleData | null>(null)
-
   useEffect(() => {
     runtime.emitUIReady()
     window.addEventListener('keydown', function (ev: KeyboardEvent) {
@@ -48,6 +46,23 @@ export default function App(_props: any) {
   useLayoutEffect(() => {
     startBackendLogging()
     runPostponedFunctions()
+  }, [])
+
+  return (
+    <CrashScreen>
+      <ThemeContextWrapper>
+        <I18nContextWrapper>
+          <ScreenController />
+        </I18nContextWrapper>
+      </ThemeContextWrapper>
+    </CrashScreen>
+  )
+}
+
+function I18nContextWrapper({ children }: { children: React.ReactChild }) {
+  const [localeData, setLocaleData] = useState<LocaleData | null>(null)
+
+  useLayoutEffect(() => {
     ;(async () => {
       const desktop_settings = await runtime.getDesktopSettings()
       await reloadLocaleData(desktop_settings.locale || 'en')
@@ -72,15 +87,17 @@ export default function App(_props: any) {
 
   if (!localeData) return null
   return (
-    <CrashScreen>
-      <ThemeContextWrapper>
-        <I18nContext.Provider value={window.static_translate}>
-          <ScreenController />
-        </I18nContext.Provider>
-      </ThemeContextWrapper>
-    </CrashScreen>
+    <I18nContext.Provider
+      value={{
+        tx: window.static_translate,
+        writingDirection: window.localeData.dir,
+      }}
+    >
+      <div dir={window.localeData.dir}>{children}</div>
+    </I18nContext.Provider>
   )
 }
+
 function ThemeContextWrapper({ children }: { children: React.ReactChild }) {
   /** on each theme change this var changes */
   const [theme_rand, setThemeRand] = useState(0)

packages/frontend/src/components/Gallery.tsx

@@ -19,6 +19,7 @@ import FullscreenMedia, {
   NeighboringMediaMode,
 } from './dialogs/FullscreenMedia'
 import { DialogContext } from '../contexts/DialogContext'
+import { useTranslationWritingDirection } from '../hooks/useTranslationFunction'
 
 const log = getLogger('renderer/Gallery')
 
@@ -411,6 +412,7 @@ function FileTable({
   mediaLoadResult: Record<number, Type.MessageLoadResult>
   queryText: string
 }) {
+  const writingDirection = useTranslationWritingDirection()
   return (
     <FixedSizeList
       width={width}
@@ -419,6 +421,7 @@ function FileTable({
       itemCount={mediaMessageIds.length}
       overscanCount={10}
       itemData={mediaMessageIds}
+      direction={writingDirection}
     >
       {({ index, style, data }) => {
         const msgId = data[index]

packages/frontend/src/components/LoginForm.tsx

@@ -156,7 +156,7 @@ export default function LoginForm({ credentials, setCredentials }: LoginProps) {
 
   return (
     <I18nContext.Consumer>
-      {tx => (
+      {({ tx }) => (
         <div className='login-form'>
           <DeltaInput
             key='addr'

packages/frontend/src/components/chat/ChatList.tsx

@@ -36,7 +36,9 @@ import useChat from '../../hooks/chat/useChat'
 import useCreateChatByContactId from '../../hooks/chat/useCreateChatByContactId'
 import useDialog from '../../hooks/dialog/useDialog'
 import useKeyBindingAction from '../../hooks/useKeyBindingAction'
-import useTranslationFunction from '../../hooks/useTranslationFunction'
+import useTranslationFunction, {
+  useTranslationWritingDirection,
+} from '../../hooks/useTranslationFunction'
 
 import type {
   ChatListItemData,
@@ -76,6 +78,8 @@ export function ChatListPart({
     | MessageChatListItemData
   itemHeight: number
 }) {
+  const writingDirection = useTranslationWritingDirection()
+
   const infiniteLoaderRef = useRef<InfiniteLoader | null>(null)
 
   // By default InfiniteLoader assumes that each item's index in the list
@@ -115,6 +119,7 @@ export function ChatListPart({
           width={width}
           itemKey={itemKey}
           itemData={itemData}
+          direction={writingDirection}
         >
           {children}
         </List>

packages/frontend/src/components/composer/ComposerMessageInput.tsx

@@ -4,6 +4,7 @@ import debounce from 'debounce'
 import { ActionEmitter, KeybindAction } from '../../keybindings'
 import { getLogger } from '../../../../shared/logger'
 import { DialogContext } from '../../contexts/DialogContext'
+import { I18nContext } from '../../contexts/I18nContext'
 
 const log = getLogger('renderer/composer/ComposerMessageInput')
 
@@ -214,22 +215,30 @@ export default class ComposerMessageInput extends React.Component<
 
   render() {
     return (
-      <textarea
-        className='message-input-area'
-        id='composer-textarea'
-        ref={this.textareaRef}
-        rows={1}
-        // intent={this.state.error ? 'danger' : 'none'}
-        // large
-        value={this.state.text}
-        onKeyDown={this.onKeyDown}
-        onChange={this.onChange}
-        onPaste={this.props.onPaste}
-        placeholder={window.static_translate('write_message_desktop')}
-        disabled={this.state.loadingDraft}
-        dir='auto'
-        spellCheck={true}
-      />
+      <I18nContext.Consumer>
+        {({ writingDirection }) => (
+          <textarea
+            className='message-input-area'
+            id='composer-textarea'
+            ref={this.textareaRef}
+            rows={1}
+            // intent={this.state.error ? 'danger' : 'none'}
+            // large
+            value={this.state.text}
+            onKeyDown={this.onKeyDown}
+            onChange={this.onChange}
+            onPaste={this.props.onPaste}
+            placeholder={window.static_translate('write_message_desktop')}
+            disabled={this.state.loadingDraft}
+            dir={
+              writingDirection === 'rtl'
+                ? 'rtl'
+                : 'auto' /* auto is based on content but defaults to ltr */
+            }
+            spellCheck={true}
+          />
+        )}
+      </I18nContext.Consumer>
     )
   }
 }

packages/frontend/src/components/dialogs/AddMember/AddMemberInnerDialog.tsx

@@ -1,6 +1,7 @@
 import React, {
   ChangeEvent,
   useCallback,
+  useContext,
   useEffect,
   useLayoutEffect,
   useRef,
@@ -16,11 +17,11 @@ import { BackendRemote, onDCEvent, Type } from '../../../backend-com'
 import { selectedAccountId } from '../../../ScreenController'
 import { DialogBody, DialogHeader, OkCancelFooterAction } from '../../Dialog'
 import useDialog from '../../../hooks/dialog/useDialog'
-import useTranslationFunction from '../../../hooks/useTranslationFunction'
 import { VerifiedContactsRequiredDialog } from '../ProtectionStatusDialog'
 import InfiniteLoader from 'react-window-infinite-loader'
 import { AddMemberChip } from './AddMemberDialog'
 import styles from './styles.module.scss'
+import { I18nContext } from '../../../contexts/I18nContext'
 
 export function AddMemberInnerDialog({
   onCancel,
@@ -53,7 +54,7 @@ export function AddMemberInnerDialog({
   isBroadcast: boolean
   isVerificationRequired: boolean
 }) {
-  const tx = useTranslationFunction()
+  const { tx, writingDirection } = useContext(I18nContext)
   const { openDialog } = useDialog()
   const accountId = selectedAccountId()
   const contactIdsInGroup: number[] = contactIds.filter(contactId =>
@@ -290,6 +291,7 @@ export function AddMemberInnerDialog({
                     // which might be different, e.g. currently they're smaller for
                     // "Rocket Theme", which results in gaps between the elements.
                     itemSize={64}
+                    direction={writingDirection}
                   >
                     {({ index, style, data: contactIds }) => {
                       const isExtraItem = index >= contactIds.length

packages/frontend/src/components/dialogs/CreateChat/index.tsx

@@ -55,6 +55,7 @@ import styles from './styles.module.scss'
 import { makeContextMenu } from '../../ContextMenu'
 import { ContextMenuContext } from '../../../contexts/ContextMenuContext'
 import ImageCropper from '../../ImageCropper'
+import { I18nContext } from '../../../contexts/I18nContext'
 
 type ViewMode = 'main' | 'createGroup' | 'createBroadcastList'
 
@@ -119,7 +120,7 @@ type CreateChatMainProps = {
 
 function CreateChatMain(props: CreateChatMainProps) {
   const { setViewMode, onClose } = props
-  const tx = useTranslationFunction()
+  const { tx, writingDirection } = useContext(I18nContext)
   const { userFeedback } = useContext(ScreenContext)
   const openConfirmationDialog = useConfirmationDialog()
   const accountId = selectedAccountId()
@@ -293,6 +294,7 @@ function CreateChatMain(props: CreateChatMainProps) {
                   // which might be different, e.g. currently they're smaller for
                   // "Rocket Theme", which results in gaps between the elements.
                   itemSize={64}
+                  direction={writingDirection}
                 >
                   {({ index, style }) => {
                     const item = contactsAndExtraItems[index]

packages/frontend/src/contexts/I18nContext.tsx

@@ -2,4 +2,10 @@ import { createContext } from 'react'
 
 import { getMessageFunction } from '../../../shared/localize'
 
-export const I18nContext = createContext<getMessageFunction>(key => key as any)
+export const I18nContext = createContext<{
+  tx: getMessageFunction
+  writingDirection: 'ltr' | 'rtl'
+}>({
+  tx: key => key as any,
+  writingDirection: 'ltr',
+})