All “administration pages” in English and admin menu always LTR?

Question

I added a RTL language translation file (e.g. Arabic, Persian, Farsi) to my Drupal 8 site. I want all the administration menus to always be in English and LTR. On the other hand, I want the front-end pages of my site to be in another language (e.g. Persian, Farsi).

I did the following.

1. I enabled the Language module, and set up one additional language. Installation was done in English; I added Persian.

   

2. I configured the administration language using the following settings.

   • /admin/config/regional/language/detection
     Account administration pages: enabled

   

3. Admin >> Edit Profile >> Edit

   

This works properly for all the administration pages. Those are in English and LTR except the front page, user/1/, and admin/structure/block/demo/[theme name] where the administration menu is in Persian and RTL.

Answer 1

After you change default site language to Farsi, and admin pages language to English, go to your user:admin page and change the admin's language to English as well to bring it in accordance with the management backend language (English).

Maybe flushing of cache will be needed; In any case if it didn't work then it's a bug and should be reported at Drupal.org ...

Answer 2

For forcing the administration menu to be LTR, and get rid of jumping to right side, you can add the following styles to the style.css file in the template folder of your site.

/* Administration Toolbar
------------------------------------------------------------------ */
//#toolbar-administration, #toolbar-administration *{
    box-sizing: border-box;
    float: left;
    direction: ltr;
}

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab,
[dir="rtl"] .toolbar .toolbar-tray-horizontal li {
  float: left;
}

[dir="rtl"] .toolbar .toolbar-tray-horizontal > .toolbar-lining {
  padding-right: 5em;
  padding-left: 0;
}

[dir="rtl"] .toolbar .toolbar-bar .contextual-toolbar-tab.toolbar-tab {
    float: right;
}

[dir="rtl"] .toolbar .toolbar-icon {
    padding-right: 1.3333em;
    padding-left: 2.75em;
}

[dir="rtl"] .toolbar .toolbar-icon::before {
    right: auto;
    left: 0.6667em;
}

[dir="rtl"] .toolbar-oriented .toolbar-tray-horizontal .toolbar-toggle-orientation {
    right: 0;
    left: auto;
}

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon {
    background-position: right center;
    padding-right: 1.3333em;
    padding-left: 2.75em;
}

[dir="rtl"] .toolbar .toolbar-bar .toolbar-tab > .toolbar-icon::before {
    right: auto;
    left: 0.6667em;
}

/* Toolbar Tray Vertical
------------------------------------------------------------------ */
[dir="rtl"] .toolbar-oriented .toolbar-tray-vertical.is-active {
    right: auto;
    left: 0;
}

[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu a {
    padding-right: 4em;
    padding-left: 2.75em;
    text-align: left;
}

[dir="rtl"] .toolbar .toolbar-icon.toolbar-handle {
    right: 0;
    padding: 0;
    left: auto;
}

[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul a {
    padding-right: 0;
    padding-left: 2.75em;
}

[dir="rtl"] .toolbar .toolbar-tray-vertical .toolbar-menu ul ul a {
    padding-right: 0;
    padding-left: 3.75em;
}

[dir="rtl"] .toolbar .toolbar-toggle-orientation > .toolbar-lining {
  float: right;
}

See also Admin toolbar should always be rendered in the admin language (if set).