Farsi localisation

frontend/common/lang.js

@@ -8,6 +8,7 @@ import {
     deutsch,
     ellinika,
     english,
+    farsi,
     french,
     nederlands,
     norsk_bokmål,
@@ -31,6 +32,9 @@ i18next.use(LanguageDetector).init({
         en: {
             translation: without_empty_keys(english),
         },
+        fa: {
+            translation: without_empty_keys(farsi),
+        },
         fi: {
             translation: without_empty_keys(suomi),
         },
@@ -90,6 +94,10 @@ export const getCurrentLanguage = () => {
     return i18next.language
 }
 
+export const getWritingDirection = () => {
+    return t("t_language_direction") === "rtl" ? "rtl" : "ltr"
+}
+
 /**
  * Like t, but you can interpolate Preact elements.
  * @param {string} key

frontend/common/lang_imports.js

@@ -8,6 +8,7 @@
 export { default as deutsch } from "../lang/deutsch.json" with { type: "json" }
 export { default as ellinika } from "../lang/ellinika.json" with { type: "json" }
 export { default as english } from "../lang/english.json" with { type: "json" }
+export { default as farsi } from "../lang/farsi.json" with { type: "json" }
 export { default as french } from "../lang/french.json" with { type: "json" }
 export { default as nederlands } from "../lang/nederlands.json" with { type: "json" }
 export { default as norsk_bokmål } from "../lang/norsk_bokmål.json" with { type: "json" }

frontend/components/CellInput.js

@@ -1024,7 +1024,13 @@ const InputContextMenu = ({
         >
             ${open
                 ? html`<ul onMouseenter=${mouseenter}>
-                      <${InputContextMenuItem} tag="delete" contents=${t("t_delete_cell_action")} title=${t("t_delete_cell_action")} onClick=${on_delete} setOpen=${setOpen} />
+                      <${InputContextMenuItem}
+                          tag="delete"
+                          contents=${t("t_delete_cell_action")}
+                          title=${t("t_delete_cell_action")}
+                          onClick=${on_delete}
+                          setOpen=${setOpen}
+                      />
 
                       <${InputContextMenuItem}
                           title=${running_disabled ? t("t_enable_and_run_cell") : t("t_disable_this_cell_and_all_cells_that_depend_on_it")}

frontend/components/CellOutput.js

@@ -610,7 +610,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

@@ -47,7 +47,7 @@ import { SafePreviewUI } from "./SafePreviewUI.js"
 import { open_pluto_popup } from "../common/open_pluto_popup.js"
 import { get_included_external_source } from "../common/external_source.js"
 import { LanguagePicker } from "./LanguagePicker.js"
-import { getCurrentLanguage, t, th } from "../common/lang.js"
+import { getCurrentLanguage, getWritingDirection, t, th } from "../common/lang.js"
 
 // This is imported asynchronously - uncomment for development
 // import environment from "../common/Environment.js"
@@ -1469,7 +1469,8 @@ ${t("t_key_autosave_description")}`
     updateLang() {
         const lang = this.state.notebook.metadata?.frontmatter?.language
         document.documentElement.lang = lang ?? getCurrentLanguage()
-        console.error("Updated lang to", document.documentElement.lang)
+        document.documentElement.dir = getWritingDirection()
+        console.error("Updated lang to", document.documentElement.lang, document.documentElement.dir)
     }
 
     componentDidMount() {

frontend/components/Logs.js

@@ -178,5 +178,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

@@ -17,7 +17,7 @@ const TerminalViewAnsiUp = ({ value }) => {
     }, [node_ref.current, value])
 
     return !!value
-        ? html`<pkg-terminal
+        ? html`<pkg-terminal dir="ltr"
               ><div class="scroller" tabindex="0"><pre ref=${node_ref} class="pkg-terminal"></pre></div
           ></pkg-terminal>`
         : null

frontend/components/welcome/Open.js

@@ -37,7 +37,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=${!!window.plutoDesktop ? "desktop_opener" : ""}>
+        <div dir="ltr" id="new" class=${!!window.plutoDesktop ? "desktop_opener" : ""}>
             <${FilePicker}
                 key=${picker.placeholder}
                 client=${client}

frontend/components/welcome/Welcome.js

@@ -164,7 +164,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

@@ -74,6 +74,7 @@ pluto-editor {
     min-width: 0;
     container-type: inline-size;
     container-name: editor;
+    overflow-x: clip;
 }
 
 main {
@@ -104,6 +105,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 {
@@ -626,7 +628,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);
@@ -684,7 +686,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);
 }
@@ -789,9 +791,9 @@ nav#at_the_top > div.desktop_picker 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 {
@@ -924,7 +926,7 @@ nav#at_the_top:after {
     nav#at_the_top > pluto-filepicker .cm-editor,
     nav#at_the_top > div.desktop_picker 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,
@@ -937,7 +939,7 @@ nav#at_the_top:after {
     header:hover > nav#at_the_top > div.desktop_picker span,
     header:focus-within > nav#at_the_top > div.desktop_picker 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,
@@ -1474,6 +1476,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 */
@@ -1539,7 +1542,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);
@@ -1553,6 +1555,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;
@@ -1934,9 +1937,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);
 }
@@ -2533,7 +2535,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 {
@@ -2686,7 +2688,7 @@ button.helpbox-tab-key {
 }
 
 button.helpbox-tab-key.helpbox-process {
-    margin-right: auto;
+    margin-inline-end: auto;
 }
 
 button.helpbox-process.busy {
@@ -3094,7 +3096,7 @@ footer form > label {
 }
 
 footer form > label {
-    margin-right: 1em;
+    margin-inline-end: 1em;
     flex: 0 1 auto;
     overflow: hidden;
     text-overflow: ellipsis;
@@ -3124,16 +3126,20 @@ 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,
 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; */
@@ -3161,7 +3167,7 @@ footer #info {
     display: flex;
     align-items: center;
     gap: 0.5rem;
-    margin-right: 1rem;
+    margin-inline-end: 1rem;
     font-size: 0.75rem;
     flex: 0 0 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; */
@@ -151,8 +151,8 @@ pluto-filepicker button,
 
 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;
 }
 
@@ -257,7 +257,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"))

frontend/lang/english.json

@@ -1,5 +1,6 @@
 {
     "t_language_name": "English",
+    "t_language_direction": "ltr",
     "t_my_work": "My work",
     "t_newnotebook": "Create a <strong>new notebook</strong>",
     "t_welcome_to_pluto": "welcome to {{pluto}}",