Initial RTL support for Farsi localisation (#3350)

Co-authored-by: Sepideh Adamiat <12543653+sepideh-adamiat@users.noreply.github.com>

Author: fonsp

frontend/common/lang.js

@@ -125,6 +125,9 @@ export const getCurrentLanguage = () => {
     return getLanguage(to_search)
 }
 
+export const getWritingDirection = () => {
+    return t("t_language_direction") === "rtl" ? "rtl" : "ltr"
+}
 const getLanguage = _.memoize((to_search) => {
     for (const lang of to_search) {
         if (lang != null) {

frontend/components/CellOutput.js

@@ -612,7 +612,7 @@ export let RawHTMLContainer = ({ body, className = "", persist_js_state = false,
         }
     }, [body, last_run_timestamp, pluto_actions, sanitize_html])
 
-    return html`<div class="raw-html-wrapper ${className}" ref=${container_ref}></div>`
+    return html`<div dir="auto" class="raw-html-wrapper ${className}" ref=${container_ref}></div>`
 }
 
 // https://github.com/fonsp/Pluto.jl/issues/1692

frontend/components/Editor.js

@@ -48,7 +48,7 @@ import { open_pluto_popup } from "../common/open_pluto_popup.js"
 import { get_included_external_source } from "../common/external_source.js"
 import { ProjectTomlEditor } from "./ProjectTomlEditor.js"
 import { LanguagePicker } from "./LanguagePicker.js"
-import { getCurrentLanguage, t, th } from "../common/lang.js"
+import { getCurrentLanguage, getWritingDirection, t, th } from "../common/lang.js"
 import { PlutoLandUpload } from "./PlutoLandUpload.js"
 import { BigPkgTerminal } from "./PkgTerminalView.js"
 import { is_desktop, move_notebook, wait_for_file_move } from "./DesktopInterface.js"
@@ -1470,6 +1470,7 @@ ${t("t_key_autosave_description")}`
     updateLang() {
         const lang = this.state.notebook.metadata?.frontmatter?.language
         document.documentElement.lang = lang ?? getCurrentLanguage()
+        document.documentElement.dir = getWritingDirection()
     }
 
     componentDidMount() {

frontend/components/Logs.js

@@ -179,5 +179,5 @@ const LogViewAnsiUp = (/** @type {{value: string}} */ { value }) => {
         node_ref.current.innerHTML = ansi_to_html(value)
     }, [node_ref.current, value])
 
-    return html`<pre ref=${node_ref}></pre>`
+    return html`<pre dir="auto" ref=${node_ref}></pre>`
 }

frontend/components/PkgTerminalView.js

@@ -31,7 +31,7 @@ const TerminalViewAnsiUp = ({ value, hide_button = false }) => {
           ></button>`
 
     return !!value
-        ? html`<pkg-terminal
+        ? html`<pkg-terminal dir="ltr"
               >${button}
               <div class="scroller" tabindex="0"><pre ref=${node_ref} class="pkg-terminal"></pre></div
           ></pkg-terminal>`

frontend/components/welcome/Open.js

@@ -41,7 +41,7 @@ export const Open = ({ client, connected, CustomPicker, show_samples, on_start_n
 
     return html`<${PasteHandler} on_start_navigation=${on_start_navigation} />
         <h2>${picker.text}</h2>
-        <div id="new" class=${is_desktop() ? "desktop_opener" : ""}>
+        <div id="new" dir="ltr" class=${is_desktop() ? "desktop_opener" : ""}>
             ${is_desktop()
                 ? html`
                       <div class="desktop_picker_group">

frontend/components/welcome/Welcome.js

@@ -171,7 +171,7 @@ export const Welcome = ({ launch_params }) => {
                 />
             </div>
         </section>
-        <section id="featured">
+        <section id="featured" dir="ltr">
             <div>
                 <${Featured} sources=${featured_sources} direct_html_links=${launch_params.featured_direct_html_links} />
             </div>

frontend/editor.css

@@ -76,6 +76,7 @@ pluto-editor {
     min-width: 0;
     container-type: inline-size;
     container-name: editor;
+    overflow-x: clip;
 }
 
 main {
@@ -106,6 +107,7 @@ pluto-editor main {
         /* Second part: push away from the right to take up all free space */ min((100% - (700px + 25px + 6px)), /* but don't do this more than */ 500px)
     );
     position: relative;
+    margin-left: auto;
 }
 
 pluto-notebook {
@@ -632,7 +634,7 @@ dialog#export div#container {
     flex-direction: row;
     display: flex;
     max-width: 1000px;
-    padding-right: 10em;
+    padding-inline-end: 10em;
     margin: 0 auto;
     position: relative;
     height: var(--header-height);
@@ -693,7 +695,7 @@ dialog#export .export_small_btns {
     padding: 0.9em;
     border-radius: 0.9em;
     position: absolute;
-    right: 0.8em;
+    inset-inline-end: 0.8em;
     top: 0em;
     background: var(--export-bg-color);
 }
@@ -953,9 +955,9 @@ div.desktop_picker_group span {
     color: var(--nav-filepicker-color);
     border: 2px solid var(--footer-input-border-color);
     border-radius: 3px;
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-inline-end: none;
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
 }
 
 pluto-filepicker .cm-scroller {
@@ -1088,7 +1090,7 @@ nav#at_the_top:after {
     nav#at_the_top > pluto-filepicker .cm-editor,
     nav#at_the_top > div.desktop_picker_group span {
         border: 2px solid transparent;
-        border-right: none;
+        border-inline-end: none;
         transition: border 0.15s ease-in-out;
     }
     nav#at_the_top > pluto-filepicker button,
@@ -1101,7 +1103,7 @@ nav#at_the_top:after {
     header:hover > nav#at_the_top > div.desktop_picker_group span,
     header:focus-within > nav#at_the_top > div.desktop_picker_group span {
         border: 2px solid var(--footer-input-border-color);
-        border-right: none;
+        border-inline-end: none;
     }
     header:hover > nav#at_the_top > pluto-filepicker button,
     header:focus-within > nav#at_the_top > pluto-filepicker button,
@@ -1643,6 +1645,7 @@ pluto-input .cm-editor {
     /* Make sure that scrolling an editor into view gives some breathing room */
     scroll-margin-block: 20vh;
     min-height: 25px;
+    direction: ltr;
 }
 pluto-input:focus-within .cm-editor {
     /* z-index increased by 1 to make sure that the autocomplete window shows above all other editors, see https://developer.mozilla.org/en-US/docs/Web/CSS/CSS_Positioning/Understanding_z_index/The_stacking_context */
@@ -1708,7 +1711,6 @@ pluto-shoulder {
     --invisible-border: calc(0.5 * var(--pluto-cell-spacing));
     --shoulder-width: calc(28px + var(--invisible-border));
     --border-radius: calc(5px + var(--invisible-border));
-
     left: calc(0px - var(--shoulder-width));
     width: var(--shoulder-width);
     border-radius: var(--border-radius) 0px 0px var(--border-radius);
@@ -1722,6 +1724,7 @@ pluto-shoulder {
     bottom: calc(0px - var(--invisible-border));
     border: var(--invisible-border) solid rgba(0, 0, 0, 0);
     border-right: none;
+    direction: ltr;
 }
 pluto-editor.fullscreen pluto-shoulder {
     --shoulder-width: 2000px;
@@ -2103,9 +2106,8 @@ pluto-input > .input_context_menu li button {
     margin-top: 1px;
     background-size: var(--size) var(--size);
     background-position: center;
-    margin-right: calc(var(--size) / 3);
+    margin-inline-end: calc(var(--size) / 3);
 }
-
 .ctx_icon {
     filter: var(--image-filters);
 }
@@ -2748,7 +2750,7 @@ pluto-helpbox > header > button.helpbox-tab-key > .tabicon {
     background-size: var(--size);
     margin-bottom: calc(-0.15 * var(--size));
     filter: var(--image-filters);
-    margin-right: 0.6em;
+    margin-inline-end: 0.6em;
     display: inline-block;
 }
 pluto-helpbox > header > button.helpbox-docs > .tabicon {
@@ -2901,7 +2903,7 @@ button.helpbox-tab-key {
 }
 
 button.helpbox-tab-key.helpbox-process {
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 
 button.helpbox-process.busy {
@@ -3309,7 +3311,7 @@ footer form > label {
 }
 
 footer form > label {
-    margin-right: 1em;
+    margin-inline-end: 1em;
     flex: 0 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -3339,17 +3341,21 @@ footer input {
     background: var(--white);
     font-family: inherit;
     font-size: inherit;
-    border-radius: 3px 0 0 3px;
+    border-radius: 3px;
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
     padding: 3px;
-    border-right: none;
+    border-inline-end: none;
 }
 
 header#pluto-nav pluto-filepicker button,
 header#pluto-nav .desktop_picker_group button,
 footer button {
     margin: 0px;
     background: var(--footer-filepicker-focus-color);
-    border-radius: 0 3px 3px 0;
+    border-radius: 3px;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
     border: 3px solid var(--footer-filepicker-focus-color);
     color: var(--footer-filepicker-button-color);
     /* border: none; */
@@ -3378,7 +3384,7 @@ footer #info {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-right: 1rem;
+    margin-inline-end: 1rem;
     font-size: 0.75rem;
     flex: 0 2 auto;
 }

frontend/index.css

@@ -53,7 +53,7 @@ p {
 }
 
 ul {
-    padding-left: 0;
+    padding-inline-start: 0;
     list-style: none;
 }
 
@@ -105,9 +105,9 @@ pluto-filepicker .cm-editor {
     color: var(--nav-filepicker-color);
     border: 2px solid var(--footer-filepicker-focus-color);
     border-radius: 3px;
-    border-right: none;
-    border-top-right-radius: 0;
-    border-bottom-right-radius: 0;
+    border-inline-end: none;
+    border-end-end-radius: 0;
+    border-start-end-radius: 0;
     flex: 1 1 auto;
     width: 0px;
     /* min-width: 0px; */
@@ -155,8 +155,8 @@ pluto-filepicker button,
 
 #new pluto-filepicker button {
     cursor: pointer;
-    border-top-left-radius: 0;
-    border-bottom-left-radius: 0;
+    border-start-start-radius: 0;
+    border-end-start-radius: 0;
     flex: 0 1 auto;
 }
 
@@ -261,7 +261,7 @@ body.nosessions ul#new ~ * {
 
 #recent button {
     margin: 0px;
-    margin-right: 0.2em;
+    margin-inline-end: 0.2em;
     padding: 1px;
     opacity: 0.6;
     border: none;

frontend/index.js

@@ -2,6 +2,7 @@ import { html, render } from "./imports/Preact.js"
 import "./common/NodejsCompatibilityPolyfill.js"
 
 import { Welcome } from "./components/welcome/Welcome.js"
+import { getCurrentLanguage, getWritingDirection } from "./common/lang.js"
 
 const url_params = new URLSearchParams(window.location.search)
 
@@ -29,5 +30,8 @@ const launch_params = {
 
 console.log("Launch parameters: ", launch_params)
 
+document.documentElement.lang = getCurrentLanguage()
+document.documentElement.dir = getWritingDirection()
+
 // @ts-ignore
 render(html`<${Welcome} launch_params=${launch_params} />`, document.querySelector("#app"))