Globalization in React Gantt component

02 Feb 2023 / 8 minutes to read

Localization

The Localization library allows you to localize default text content of the Gantt. The Gantt component has static text on some features (like column headers, add and edit dialog, tooltip, toolbar, etc.) that can be changed to other cultures (Arabic, Deutsch, French, etc.) by defining the locale value and translation object.

The following list of properties and its values are used in the Gantt.

Locale key words	Text
emptyRecord	No records to display
id	ID
name	Name
startDate	Start Date
endDate	End Date
duration	Duration
progress	Progress
dependency	Dependency
notes	Notes
baselineStartDate	Baseline Start Date
baselineEndDate	Baseline End Date
type	Type
offset	Offset
resourceName	Resources
resourceID	Resource ID
day	day
hour	hour
minute	minute
days	days
hours	hours
minutes	minutes
generalTab	General
customTab	Custom Columns
writeNotes	Write Notes
addDialogTitle	New Task
editDialogTitle	Task Information
add	Add
edit	Edit
update	Update
delete	Delete
cancel	Cancel
search	Search
task	task
tasks	tasks
zoomIn	Zoom in
zoomOut	Zoom out
zoomToFit	Zoom to fit
expandAll	Expand all
collapseAll	Collapse all
nextTimeSpan	Next timespan
prevTimeSpan	Previous timespan
saveButton	Save
taskBeforePredecessor_FS	You moved “{0}” to start before “{1}” finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_FS	You moved “{0}” away from “{1}” and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskBeforePredecessor_SS	You moved “{0}” to start before “{1}” starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_SS	You moved “{0}” to start after “{1}” starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskBeforePredecessor_FF	You moved “{0}” to finish before “{1}” finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_FF	You moved “{0}” to finish after “{1}” finishes and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskBeforePredecessor_SF	You moved “{0}” away from “{1}” to starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
taskAfterPredecessor_SF	You moved “{0}” to finish after “{1}” starts and the two tasks are linked. As the result, the links cannot be honored. Select one action below to perform
okText	Ok
confirmDelete	Are you sure you want to Delete Record?
from	From
to	To
taskLink	Task Link
lag	Lag
start	Start
finish	Finish
enterValue	Enter the value
taskInformation	Task Information
deleteTask	Delete Task
deleteDependency	Delete Dependency
convert	Convert
save	Save
above	Above
below	Below
child	Child
milestone	Milestone
toTask	To Task
toMilestone	To Milestone
eventMarkers	Event markers
leftTaskLabel	Left task label
rightTaskLabel	Right task label
timelineCell	Timeline cell
confirmPredecessorDelete	Are you sure you want to remove dependency link?taskMode
changeScheduleMode	Change Schedule Mode
subTasksStartDate	SubTasks Start Date
subTasksEndDate	SubTasks End Date
scheduleStartDate	Schedule Start Date
scheduleEndDate	Schedule End Date
auto	Auto
manual	Manual
excelExport	Excel export
csvExport	CSV export
pdfExport	Pdf export
unit	Unit
work	Work
taskType	Task Type
unassignedTask	Unassigned Task
group	Group

Loading translations

To load translation object in an application use load function of L10n class.

The below example demonstrates the Gantt in Deutsch culture.

Source

Preview

index.jsx

index.html

index.tsx

import { L10n, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('de-DE');
L10n.load({
    'de-DE': {
        'gantt': {
            "id": "Ich würde",
            "name": "Name",
            "startDate": "Anfangsdatum",
            "duration": "Dauer",
            "progress": "Fortschritt",
        }
    }
});
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
    }
    render() {
        return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.taskFields} height='450px'>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
    <div id='root'>
        <div id='loader'>Loading....</div>
    </div>
</body>

</html>

import { L10n, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('de-DE');

L10n.load({
  'de-DE': {
      'gantt': {
           "id": "Ich würde",
            "name": "Name",
            "startDate": "Anfangsdatum",
            "duration": "Dauer",
            "progress": "Fortschritt",
     }
  }
});

class App extends React.Component<{}, {}> {
    public taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };
    render() {
        return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.taskFields}  height = '450px'>
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

Internationalization

The Internationalization library is used to globalize number, date, and time values in gantt component.

Source

Preview

index.jsx

index.html

index.tsx

import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
loadCldr(cagregorian, numbers);
setCulture('de-DE');
L10n.load({
    'de-DE': {
        'gantt': {
            "id": "Ich würde",
            "name": "Name",
            "startDate": "Anfangsdatum",
            "duration": "Dauer",
            "progress": "Fortschritt",
        }
    }
});
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
    }
    render() {
        return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.taskFields} height='450px'>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
import * as cagregorian from './ca-gregorian.json';
import * as numbers from './numbers.json';
loadCldr(cagregorian, numbers);
setCulture('de-DE');

L10n.load({
  'de-DE': {
      'gantt': {
           "id": "Ich würde",
            "name": "Name",
            "startDate": "Anfangsdatum",
            "duration": "Dauer",
            "progress": "Fortschritt",
      }
  }
});

class App extends React.Component<{}, {}> {
    public taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };
    render() {
        return <GanttComponent dataSource={data} locale='de-DE' allowSelection={true} taskFields={this.taskFields}  height = '450px'>
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

In the above sample, Timeline is formatted by NumberFormatOptions and DateFormatOptions.

By default, locale value is en-US. If you want to change en-US culture, then set the locale.

Right to left (RTL)

RTL provides an option to switch the text direction and layout of the Gantt component from right to left. It improves the user experiences and accessibility for users who use right-to-left languages (Arabic, Urdu, etc.). To enable RTL Gantt, set the enableRtl to true.

Source

Preview

index.jsx

index.html

index.tsx

import { L10n, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('ar-AE');
L10n.load({
    'ar-AE': {
        "gantt": {
            "emptyRecord": "لا سجلات لعرضها",
            "id": "هوية شخصية",
            "name": "اسم",
            "startDate": "تاريخ البدء",
            "endDate": "تاريخ الانتهاء",
            "duration": "المدة الزمنية",
            "progress": "تقدم",
            "dependency": "الاعتماد",
            "notes": "ملاحظات",
            "baselineStartDate": "تاريخ البدء الأساسي",
            "baselineEndDate": "تاريخ نهاية خط الأساس",
            "taskMode": "وضع المهام",
            "changeScheduleMode": "تغيير وضع الجدول",
            "subTasksStartDate": "تاريخ بدء المهام الفرعية",
            "subTasksEndDate": "تاريخ انتهاء المهام الفرعية",
            "scheduleStartDate": "جدولة تاريخ البدء",
            "scheduleEndDate": "تاريخ انتهاء الجدول الزمني",
            "auto": "تلقاءي",
            "manual": "كتيب",
            "type": "اكتب",
            "offset": "عوض",
            "resourceName": "مصادر",
            "resourceID": "معرف المورد",
            "day": "يوم",
            "hour": "ساعة",
            "minute": "دقيقة",
            "days": "أيام",
            "hours": "ساعات",
            "minutes": "الدقائق",
            "generalTab": "جنرال لواء",
            "customTab": "أعمدة مخصصة",
            "writeNotes": "اكتب ملاحظات",
            "addDialogTitle": "مهمة جديدة",
            "editDialogTitle": "معلومات المهمة",
            "saveButton": "حفظ",
            "add": "إضافة",
            "edit": "تعديل",
            "update": "تحديث",
            "delete": "حذف",
            "cancel": "إلغاء",
            "search": "بحث",
            "task": " مهمة",
            "tasks": " مهام",
            "zoomIn": "تكبير",
            "zoomOut": "تصغير",
            "zoomToFit": "تكبير لتناسب",
            "excelExport": "اكسل التصدير",
            "csvExport": "تصدير CSV",
            "expandAll": "توسيع الكل",
            "collapseAll": "انهيار جميع",
            "nextTimeSpan": "الجدول الزمني التالي",
            "prevTimeSpan": "الجدول الزمني السابق",
            "okText": "حسنا",
            "confirmDelete": "هل أنت متأكد أنك تريد حذف السجل؟",
            "from": "من عند",
            "to": "إلى",
            "taskLink": "رابط المهمة",
            "lag": "بطئ",
            "start": "بداية",
            "finish": "إنهاء",
            "enterValue": "أدخل القيمة",
            "taskBeforePredecessor_FS": "قمت بنقل '{0}' للبدء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FS": "قمت بنقل '{0}' بعيدًا عن '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SS": "قمت بنقل '{0}' للبدء قبل أن يبدأ '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SS": "قمت بنقل '{0}' للبدء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_FF": "قمت بنقل '{0}' للإنهاء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FF": "قمت بنقل '{0}' للإنهاء بعد انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SF": "قمت بنقل '{0}' بعيدًا عن '{1}' لبدء التشغيل وترتبط المهمتان. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SF": "قمت بنقل '{0}' للإنهاء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskInformation": "معلومات المهمة",
            "deleteTask": "حذف المهمة",
            "deleteDependency": "حذف التبعية",
            "convert": "تحويل",
            "save": "حفظ",
            "above": "في الاعلى",
            "below": "أدناه",
            "child": "طفل",
            "milestone": "معلما",
            "toTask": "لمهمة",
            "toMilestone": "إلى معلم",
            "eventMarkers": "علامات الحدث",
            "leftTaskLabel": "تسمية المهمة اليسرى",
            "rightTaskLabel": "تسمية المهمة الصحيحة",
            "timelineCell": "خلية الجدول الزمني",
            "confirmPredecessorDelete": "هل أنت متأكد أنك تريد إزالة رابط التبعية؟",
            "unit": "وحدة",
            "work": "عمل",
            "taskType": "نوع المهمة",
            "unassignedTask": "مهمة غير محددة",
            "group": "مجموعة",
            "indent": "مسافة بادئة",
            "outdent": "عفا عليها الزمن",
            "segments": "شرائح",
            "splitTask": "تقسيم المهمة",
            "mergeTask": "مهمة الدمج",
            "left": "اليسار",
            "right": "حق"
        }
    }
});
class App extends React.Component {
    constructor() {
        super(...arguments);
        this.taskFields = {
            id: 'TaskID',
            name: 'TaskName',
            startDate: 'StartDate',
            duration: 'Duration',
            progress: 'Progress',
            child: 'subtasks'
        };
    }
    render() {
        return <GanttComponent dataSource={data} locale='ar-AE' allowSelection={true} taskFields={this.taskFields} enableRtl={true} height='450px'>
        </GanttComponent>;
    }
}
;
ReactDOM.render(<App />, document.getElementById('root'));

<!DOCTYPE html>
<html lang="en">

<head>
            
    <title>Syncfusion React Gantt</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta name="description" content="Essential JS 2 for React Components" />
    <meta name="author" content="Syncfusion" />
    <link href="https://cdn.syncfusion.com/ej2/20.4.48/material.css" rel="stylesheet" type="text/css"/>
    <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
    <script src="https://cdnjs.cloudflare.com/ajax/libs/systemjs/0.19.38/system.js"></script>
    <script src="systemjs.config.js"></script>
     <style>
        #loader {
            color: #008cff;
            height: 40px;
            left: 45%;
            position: absolute;
            top: 45%;
            width: 30%;
        }
    </style>
</head>

<body>
        <div id='root'>
            <div id='loader'>Loading....</div>
        </div>
</body>

</html>

import { L10n, loadCldr, setCulture } from '@syncfusion/ej2-base';
import * as React from 'react';
import * as ReactDOM from 'react-dom';
import { GanttComponent, Inject } from '@syncfusion/ej2-react-gantt';
import { data } from './datasource';
setCulture('ar-AE');

L10n.load({
    'ar-AE': {
        "gantt": {
            "emptyRecord": "لا سجلات لعرضها",
            "id": "هوية شخصية",
            "name": "اسم",
            "startDate": "تاريخ البدء",
            "endDate": "تاريخ الانتهاء",
            "duration": "المدة الزمنية",
            "progress": "تقدم",
            "dependency": "الاعتماد",
            "notes": "ملاحظات",
            "baselineStartDate": "تاريخ البدء الأساسي",
            "baselineEndDate": "تاريخ نهاية خط الأساس",
            "taskMode": "وضع المهام",
            "changeScheduleMode": "تغيير وضع الجدول",
            "subTasksStartDate": "تاريخ بدء المهام الفرعية",
            "subTasksEndDate": "تاريخ انتهاء المهام الفرعية",
            "scheduleStartDate": "جدولة تاريخ البدء",
            "scheduleEndDate": "تاريخ انتهاء الجدول الزمني",
            "auto": "تلقاءي",
            "manual": "كتيب",
            "type": "اكتب",
            "offset": "عوض",
            "resourceName": "مصادر",
            "resourceID": "معرف المورد",
            "day": "يوم",
            "hour": "ساعة",
            "minute": "دقيقة",
            "days": "أيام",
            "hours": "ساعات",
            "minutes": "الدقائق",
            "generalTab": "جنرال لواء",
            "customTab": "أعمدة مخصصة",
            "writeNotes": "اكتب ملاحظات",
            "addDialogTitle": "مهمة جديدة",
            "editDialogTitle": "معلومات المهمة",
            "saveButton": "حفظ",
            "add": "إضافة",
            "edit": "تعديل",
            "update": "تحديث",
            "delete": "حذف",
            "cancel": "إلغاء",
            "search": "بحث",
            "task": " مهمة",
            "tasks": " مهام",
            "zoomIn": "تكبير",
            "zoomOut": "تصغير",
            "zoomToFit": "تكبير لتناسب",
            "excelExport": "اكسل التصدير",
            "csvExport": "تصدير CSV",
            "expandAll": "توسيع الكل",
            "collapseAll": "انهيار جميع",
            "nextTimeSpan": "الجدول الزمني التالي",
            "prevTimeSpan": "الجدول الزمني السابق",
            "okText": "حسنا",
            "confirmDelete": "هل أنت متأكد أنك تريد حذف السجل؟",
            "from": "من عند",
            "to": "إلى",
            "taskLink": "رابط المهمة",
            "lag": "بطئ",
            "start": "بداية",
            "finish": "إنهاء",
            "enterValue": "أدخل القيمة",
            "taskBeforePredecessor_FS": "قمت بنقل '{0}' للبدء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FS": "قمت بنقل '{0}' بعيدًا عن '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SS": "قمت بنقل '{0}' للبدء قبل أن يبدأ '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SS": "قمت بنقل '{0}' للبدء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_FF": "قمت بنقل '{0}' للإنهاء قبل انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_FF": "قمت بنقل '{0}' للإنهاء بعد انتهاء '{1}' ويتم ربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskBeforePredecessor_SF": "قمت بنقل '{0}' بعيدًا عن '{1}' لبدء التشغيل وترتبط المهمتان. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskAfterPredecessor_SF": "قمت بنقل '{0}' للإنهاء بعد بدء '{1}' وربط المهمتين. ونتيجة لذلك ، لا يمكن احترام الروابط. حدد إجراءً واحدًا أدناه للقيام به",
            "taskInformation": "معلومات المهمة",
            "deleteTask": "حذف المهمة",
            "deleteDependency": "حذف التبعية",
            "convert": "تحويل",
            "save": "حفظ",
            "above": "في الاعلى",
            "below": "أدناه",
            "child": "طفل",
            "milestone": "معلما",
            "toTask": "لمهمة",
            "toMilestone": "إلى معلم",
            "eventMarkers": "علامات الحدث",
            "leftTaskLabel": "تسمية المهمة اليسرى",
            "rightTaskLabel": "تسمية المهمة الصحيحة",
            "timelineCell": "خلية الجدول الزمني",
            "confirmPredecessorDelete": "هل أنت متأكد أنك تريد إزالة رابط التبعية؟",
            "unit": "وحدة",
            "work": "عمل",
            "taskType": "نوع المهمة",
            "unassignedTask": "مهمة غير محددة",
            "group": "مجموعة",
            "indent": "مسافة بادئة",
            "outdent": "عفا عليها الزمن",
            "segments": "شرائح",
            "splitTask": "تقسيم المهمة",
            "mergeTask": "مهمة الدمج",
            "left": "اليسار",
            "right": "حق"
        }
    }
});

class App extends React.Component<{}, {}> {
    public taskFields: any = {
        id: 'TaskID',
        name: 'TaskName',
        startDate: 'StartDate',
        duration: 'Duration',
        progress: 'Progress',
        child: 'subtasks'
    };
    render() {
        return <GanttComponent dataSource={data} locale='ar-AE' allowSelection={true} taskFields={this.taskFields} enableRtl= {true} height = '450px'>
        </GanttComponent>
    }
};
ReactDOM.render(<App />, document.getElementById('root'));

Globalization in React Gantt component

Localization

Loading translations

Internationalization

Right to left (RTL)

See Also