feat: add RTL language layout (#48287)

* add the previous layout * add the import logic Co-authored-by: Nestor <elnestinatorHD@gmail.com> * WIP: RTL layout * WIP: code snippet * WIP: RTL layout * WIP: RTL layout * WIP: add selector that don't work * WIP: fix code in tables direction * change the dynamic import to static import Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * remove redundant imports * fix the broken splitter and broken code element Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> * revert the wrapper editor layout * WIP: Timeline RTL layout * add row reverse to account for splitter direction reverse * Revert "add row reverse to account for splitter direction reverse" This reverts commit f67ad002c8. * add row reverse to account for splitter direction reverse Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com> * mirrior the nav bar by placing the logo in the right * Use notosans as RTL font family * Remove Arabic from the hiddenLangs * fix(feedbac): the search and table alignment Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com> * fix(feedback): text alignment, icons rotation Co-authered-by: moT01 <20648924+moT01@users.noreply.github.com> * Revert "fix(feedback): text alignment, icons rotation" This reverts commit 0c6dc4f909. * fix(feedback): text-alignment, and icon rotation Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com> Co-authored-by: Nestor <elnestinatorHD@gmail.com> Co-authored-by: Oliver Eyton-Williams <ojeytonwilliams@gmail.com> Co-authored-by: Ahmad Abdolsaheb <ahmad.abdolsaheb@gmail.com> Co-authored-by: Zaira <33151350+zairahira@users.noreply.github.com> Co-authored-by: moT01 <20648924+moT01@users.noreply.github.com>
2026-05-28 18:26:54 +00:00 · 2022-12-16 18:03:18 +02:00
parent c24755d2b9
commit 4291e153f7
9 changed files with 250 additions and 2 deletions
@@ -437,7 +437,7 @@ button.nav-link[aria-disabled='true'] {
  max-height: calc(var(--header-height) - 6px);
  padding: 4px 12px;
  margin-left: 2px;
-  font-family: 'Hack-ZeroSlash', monospace !important;
+  font-family: 'Hack-ZeroSlash', monospace;
  display: flex;
  align-items: center;
  justify-content: center;
@@ -39,6 +39,7 @@ import OfflineWarning from '../OfflineWarning';
 import './fonts.css';
 import './global.css';
 import './variables.css';
+import './rtl-layout.css';

 const mapStateToProps = createSelector(
  isSignedInSelector,
@@ -38,6 +38,44 @@
  font-display: fallback;
 }

+/* NotoSansArabic */
+
+@font-face {
+  font-family: 'NotoSansArabic';
+  src: url('../../../static/fonts/noto-sans-arabic/NotoSansArabic-Light.woff')
+    format('woff');
+  font-weight: 300;
+  font-style: normal;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'NotoSansArabic';
+  src: url('../../../static/fonts/noto-sans-arabic/NotoSansArabic-Regular.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'NotoSansArabic';
+  src: url('../../../static/fonts/noto-sans-arabic/NotoSansArabic-Bold.woff')
+    format('woff');
+  font-weight: bold;
+  font-style: normal;
+  font-display: fallback;
+}
+
+@font-face {
+  font-family: 'NotoSansArabic';
+  src: url('../../../static/fonts/noto-sans-arabic/NotoSansArabic-Black.woff')
+    format('woff');
+  font-weight: 900;
+  font-style: normal;
+  font-display: fallback;
+}
+
 /* hack zeroslash */

@font-face {
@@ -0,0 +1,209 @@
+/* 
+breadcrumbs section
+*/
+[dir='rtl'] .breadcrumb-left::after {
+  content: '';
+  display: none;
+}
+
+[dir='rtl'] .breadcrumb-left::before {
+  background-color: var(--secondary-background);
+  content: '';
+  border-top: calc(1.375rem / 2) solid transparent;
+  border-bottom: calc(1.2rem / 2) solid transparent;
+  border-right: calc(1.1rem / 2) solid var(--quaternary-background);
+  position: absolute;
+  top: 0;
+  left: 0;
+  height: 100%;
+}
+
+[dir='rtl'] .challenge-title-breadcrumbs ol {
+  padding-right: 0;
+}
+
+/* 
+Intro project buttons and headings 
+*/
+
+[dir='rtl'] .monaco-editor-tabs {
+  margin-right: 0;
+}
+
+[dir='rtl'] .panel-display-tabs button:first-child,
+.tabs-row > button:first-child {
+  margin-right: 0;
+  margin-left: 10px;
+}
+
+[dir='rtl'] .map-ui .superblock-link .map-icon {
+  margin-right: 5px;
+  margin-left: 20px;
+}
+
+[dir='rtl'] .map-ui .superblock-link > svg {
+  transform: rotate(180deg);
+}
+
+/* 
+fix misaligned text in button and in donation 
+*/
+
+[dir='rtl'] .link-btn,
+[dir='rtl'] .faq-item h4 {
+  text-align: right;
+}
+
+/* 
+ intro to courses section
+*/
+
+[dir='rtl'] .link-btn.btn-lg > svg {
+  transform: rotate(180deg);
+}
+
+[dir='rtl'] .block-grid .map-title > svg:last-child,
+[dir='rtl'] .map-title .course-title:last-of-type {
+  margin-right: auto;
+  margin-left: 0;
+}
+
+[dir='rtl'] .map-title .course-title:first-of-type {
+  margin-right: 0.35em;
+  margin-left: auto;
+}
+
+/* 
+this is used to rotate arrow mark in certification block and donation
+the "not" and "is" selector is used to stop it from affecting other section and pages
+*/
+
+/* arrow icon */
+[dir='rtl']
+  :is(.block:is(:not(.open)), .faq-item:is(:not(.open)))
+  .map-title:not(.title-wrapper, .block-header-button-text)
+  > svg:first-child {
+  transform: rotate(180deg);
+}
+
+/* 
+external fontawesome link icon
+*/
+
+[dir='rtl'] .nav-link > svg,
+[dir='rtl'] td a[target='_blank'] > svg {
+  transform: rotate(270deg);
+}
+
+/* 
+universal-nav-bar
+and menu secion
+*/
+
+@media (min-width: 767.5px) {
+  [dir='rtl'] .nav-list {
+    right: auto;
+    left: 0;
+  }
+}
+
+@media (max-width: 980px) {
+  [dir='rtl'] #universal-nav-logo {
+    left: inherit;
+    right: 17px;
+  }
+}
+
+/* had to change overflow, because it clips the first words of the english articles */
+[dir='rtl'] .footer-container {
+  overflow-x: inherit;
+}
+
+/* 
+dropdown links 
+*/
+
+[dir='rtl'] .dropdown-menu {
+  text-decoration-skip-ink: all;
+}
+
+/* 
+New RWD project challenge
+*/
+
+[dir='rtl'] .tabs-row {
+  gap: 10px;
+}
+
+[dir='rtl'] .panel-display-tabs {
+  margin-left: auto;
+}
+
+[dir='rtl'] .monaco-editor-tabs button:not(:first-child) {
+  border-left: 2px solid;
+  border-right: none;
+}
+
+/* Align the the Arabic head with the corresponding English word */
+
+[dir='rtl'] .table thead:first-child tr:first-child th {
+  text-align: right;
+}
+
+/* 
+sections that need to stay left to right
+*/
+
+/* Code snippet*/
+[dir='rtl'] code,
+/* trending articles */
+[dir='rtl'] .trending-guides .trending-guides-row div a,
+[dir='rtl'] .quote-partial,
+[dir='rtl'] .overflow-guard,
+[dir='rtl'] .challenge-preview,
+[dir='rtl'] .output-text,
+/* timeline*/
+[dir='rtl'] .timeline-pagination_list {
+  direction: ltr;
+}
+
+[dir='rtl'] code {
+  word-break: normal;
+  unicode-bidi: isolate;
+}
+
+[dir='rtl'] .description-container,
+[dir='rtl'] .action-row-container,
+[dir='rtl']
+  .timeline-pagination_list
+  .timeline-pagination_list_item:not(:has(button)) {
+  direction: rtl;
+}
+
+/* Revert the editor layout to account for reverted splitter */
+
+[dir='rtl'] .desktop-layout .tabs-row,
+[dir='rtl'] .desktop-layout .reflex-container:not(.horizontal) {
+  flex-direction: row-reverse;
+}
+
+/* new Font Family because 'Hack-ZeroSlash' add letter spacing in Arabic letter which is extermely bad */
+
+[dir='rtl'] body,
+[dir='rtl'] .signup-btn,
+[dir='rtl'] h1,
+[dir='rtl'] h2,
+[dir='rtl'] h3,
+[dir='rtl'] h4,
+[dir='rtl'] h5,
+[dir='rtl'] h6,
+[dir='rtl'] p,
+[dir='rtl'] td,
+[dir='rtl'] th,
+[dir='rtl'] .donate-page-wrapper,
+[dir='rtl'] .donate-page-wrapper b,
+[dir='rtl'] .donate-page-wrapper h3,
+[dir='rtl'] .donate-page-wrapper p,
+[dir='rtl'] [name='payment-method'] {
+  font-family: 'NotoSansArabic';
+}
@@ -101,7 +101,7 @@ export const LangCodes = {
 /**
 * This array contains languages that should NOT appear in the language selector.
 */
-export const hiddenLangs = ['arabic'];
+export const hiddenLangs = [''];

 /**
 * This array contains languages that use the RTL layouts.