@doenet/doenetml 0.7.21-dev.416 → 0.7.21-dev.417

package/style.css

@@ -276,6 +276,10 @@ div.jxgbox input[type="checkbox"] {
 
 /* CSS rules for the navigation bar */
 
+/*
+ * Physical `right`, because the board this sits in is pinned to `dir="ltr"` in
+ * `JSXGraphRenderer.tsx` — a graph is coordinate space and does not mirror.
+ */
 .JXG_navigation {
     position: absolute;
     right: 5px;
@@ -465,159 +469,178 @@ div.jxgbox input[type="checkbox"] {
  End JSXGraph styles 
  **************************************************/
 .inline {
-        display: inline;
+    display: inline;
 }
 
 .overline {
-        text-decoration-line: overline;
+    text-decoration-line: overline;
 }
 
 .blur {
-        --tw-blur: blur(8px);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    --tw-blur: blur(8px);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .filter {
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
+    filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
 }
 
 .keyboard-button {
-        display: inline-flex;
-        height: 2.5rem;
-        max-width: 4em;
-        flex-grow: 1;
-        flex-basis: 1rem;
-        justify-content: center;
-        align-items: center;
-        border-radius: 0.375rem;
-        border-width: 1px;
-        --tw-border-opacity: 1;
-        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+    display: inline-flex;
+    height: 2.5rem;
+    max-width: 4em;
+    flex-grow: 1;
+    flex-basis: 1rem;
+    justify-content: center;
+    align-items: center;
+    border-radius: 0.375rem;
+    border-width: 1px;
+    --tw-border-opacity: 1;
+    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
 }
 
 .keyboard-button:hover {
-        --tw-bg-opacity: 1;
-        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
 }
 
 .keyboard-button:active {
-        --tw-bg-opacity: 1;
-        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
 }
 
 .special-button {
-        --tw-border-opacity: 1;
-        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
-        --tw-bg-opacity: 1;
-        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
+    --tw-border-opacity: 1;
+    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
 
 .special-button:hover {
-        --tw-border-opacity: 1;
-        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
-        --tw-bg-opacity: 1;
-        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
+    --tw-border-opacity: 1;
+    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
 }
 
 .special-button:active {
-        --tw-border-opacity: 1;
-        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
-        --tw-bg-opacity: 1;
-        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
-        --tw-text-opacity: 1;
-        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+    --tw-border-opacity: 1;
+    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+}
+
+/*
+ * The keys are mathematical notation, so they stay left-to-right even when the
+ * tray around them is right-to-left. Every row is a flex row and every region a
+ * grid, both of which reverse under `rtl`, so an Arabic reader would otherwise
+ * get a mirrored QWERTY and a numeric pad running 3-2-1. The cursor keys are
+ * the sharpest case: `.key-left` sends MathQuill a `Left` keystroke whatever
+ * the CSS says, so a reversed row would leave the `←` key sitting on the right
+ * and moving the caret the other way.
+ *
+ * Stated here rather than as a `dir` attribute because `Keyboard` returns a
+ * different element per style; one rule covers all of them. The tab strip is
+ * included: its labels are `123`, `f(x)`, `ABC`, `αβγ` and `$%∞`, none of which
+ * is prose.
+ */
+.virtual-keyboard,
+.virtual-keyboard-tab-list {
+    direction: ltr;
 }
 
 .virtual-keyboard {
-        display: flex;
-        max-width: 42rem;
-        justify-content: center;
-        row-gap: 0.25rem;
-        -moz-column-gap: 0.75rem;
-             column-gap: 0.75rem;
+    display: flex;
+    max-width: 42rem;
+    justify-content: center;
+    row-gap: 0.25rem;
+    -moz-column-gap: 0.75rem;
+         column-gap: 0.75rem;
 }
 
 @media (min-width: 640px) {
 
-        .virtual-keyboard {
-                row-gap: 0.5rem;
-        }
+    .virtual-keyboard {
+        row-gap: 0.5rem;
+    }
 }
 
 .virtual-keyboard {
-        flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 
 @media (min-width: 640px) {
 
-        .virtual-keyboard {
-                flex-wrap: nowrap;
-        }
+    .virtual-keyboard {
+        flex-wrap: nowrap;
+    }
 }
 
 .virtual-keyboard .row {
-        display: flex;
-        flex-basis: 100%;
-        justify-content: center;
-        -moz-column-gap: 0.25rem;
-             column-gap: 0.25rem;
+    display: flex;
+    flex-basis: 100%;
+    justify-content: center;
+    -moz-column-gap: 0.25rem;
+         column-gap: 0.25rem;
 }
 
 @media (min-width: 640px) {
 
-        .virtual-keyboard .row {
-                -moz-column-gap: 0.5rem;
-                     column-gap: 0.5rem;
-        }
+    .virtual-keyboard .row {
+        -moz-column-gap: 0.5rem;
+             column-gap: 0.5rem;
+    }
 }
 
 .virtual-keyboard .keyboard-region {
-        display: grid;
-        grid-template-columns: repeat(4, minmax(0, 1fr));
-        -moz-column-gap: 0.25rem;
-             column-gap: 0.25rem;
-        row-gap: 0.25rem;
+    display: grid;
+    grid-template-columns: repeat(4, minmax(0, 1fr));
+    -moz-column-gap: 0.25rem;
+         column-gap: 0.25rem;
+    row-gap: 0.25rem;
 }
 
 @media (min-width: 640px) {
 
-        .virtual-keyboard .keyboard-region {
-                -moz-column-gap: 0.5rem;
-                     column-gap: 0.5rem;
-                row-gap: 0.5rem;
-        }
+    .virtual-keyboard .keyboard-region {
+        -moz-column-gap: 0.5rem;
+             column-gap: 0.5rem;
+        row-gap: 0.5rem;
+    }
 }
 
 .virtual-keyboard .keyboard-region .key {
-        padding-left: 0.5rem;
-        padding-right: 0.5rem;
+    padding-left: 0.5rem;
+    padding-right: 0.5rem;
 }
 
 @media (min-width: 640px) {
 
-        .virtual-keyboard .keyboard-region .key {
-                padding-left: 1rem;
-                padding-right: 1rem;
-        }
+    .virtual-keyboard .keyboard-region .key {
+        padding-left: 1rem;
+        padding-right: 1rem;
+    }
 }
 
 .virtual-keyboard .sub-keyboard {
-        display: flex;
-        max-width: 42rem;
-        flex-wrap: wrap;
-        justify-content: center;
-        row-gap: 0.25rem;
+    display: flex;
+    max-width: 42rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    row-gap: 0.25rem;
 }
 
 @media (min-width: 640px) {
 
-        .virtual-keyboard .sub-keyboard {
-                row-gap: 0.5rem;
-        }
+    .virtual-keyboard .sub-keyboard {
+        row-gap: 0.5rem;
+    }
 }
 
 .virtual-keyboard .sub-keyboard {
-        height: 100%;
+    height: 100%;
 }
 
 .virtual-keyboard button {
@@ -636,26 +659,26 @@ div.jxgbox input[type="checkbox"] {
     }
 
 .virtual-keyboard button:hover {
-        --tw-bg-opacity: 1;
-        background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(241 245 249 / var(--tw-bg-opacity, 1));
 }
 
 .virtual-keyboard button:active {
-        --tw-bg-opacity: 1;
-        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
 }
 
 .virtual-keyboard .break {
-        height: 0px;
-        flex-basis: 100%;
+    height: 0px;
+    flex-basis: 100%;
 }
 
 .virtual-keyboard .key {
-        font-weight: 700;
+    font-weight: 700;
 }
 
 .virtual-keyboard .key.math {
-        font-weight: 400;
+    font-weight: 400;
 }
 
 .virtual-keyboard .key-space,
@@ -664,10 +687,10 @@ div.jxgbox input[type="checkbox"] {
     .virtual-keyboard .key-right,
     .virtual-keyboard .key-shift,
     .virtual-keyboard .key-enter {
-        --tw-border-opacity: 1;
-        border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
-        --tw-bg-opacity: 1;
-        background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
+    --tw-border-opacity: 1;
+    border-color: rgb(226 232 240 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(226 232 240 / var(--tw-bg-opacity, 1));
 }
 
 .virtual-keyboard .key-space:hover,
@@ -676,10 +699,10 @@ div.jxgbox input[type="checkbox"] {
     .virtual-keyboard .key-right:hover,
     .virtual-keyboard .key-shift:hover,
     .virtual-keyboard .key-enter:hover {
-        --tw-border-opacity: 1;
-        border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
-        --tw-bg-opacity: 1;
-        background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
+    --tw-border-opacity: 1;
+    border-color: rgb(203 213 225 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(203 213 225 / var(--tw-bg-opacity, 1));
 }
 
 .virtual-keyboard .key-space:active,
@@ -688,23 +711,23 @@ div.jxgbox input[type="checkbox"] {
     .virtual-keyboard .key-right:active,
     .virtual-keyboard .key-shift:active,
     .virtual-keyboard .key-enter:active {
-        --tw-border-opacity: 1;
-        border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
-        --tw-bg-opacity: 1;
-        background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
-        --tw-text-opacity: 1;
-        color: rgb(248 250 252 / var(--tw-text-opacity, 1));
+    --tw-border-opacity: 1;
+    border-color: rgb(148 163 184 / var(--tw-border-opacity, 1));
+    --tw-bg-opacity: 1;
+    background-color: rgb(148 163 184 / var(--tw-bg-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(248 250 252 / var(--tw-text-opacity, 1));
 }
 
 .virtual-keyboard .key-shift,
     .virtual-keyboard .key-backspace {
-        max-width: none;
-        flex-grow: 1;
+    max-width: none;
+    flex-grow: 1;
 }
 
 .virtual-keyboard .key-space {
-        max-width: none;
-        flex-grow: 1;
+    max-width: none;
+    flex-grow: 1;
 }
 
 .virtual-keyboard .svg-inline--fa {
@@ -713,37 +736,37 @@ div.jxgbox input[type="checkbox"] {
     }
 
 .virtual-keyboard.numeric .key-backspace {
-        max-width: 4em;
+    max-width: 4em;
 }
 .virtual-keyboard.alpha,
 .virtual-keyboard.greek {
-        flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 .virtual-keyboard.symbol .keyboard-region {
-        grid-template-columns: repeat(5, minmax(0, 1fr));
+    grid-template-columns: repeat(5, minmax(0, 1fr));
 }
 
 .virtual-keyboard-tab-list {
-        display: flex;
-        flex-wrap: nowrap;
+    display: flex;
+    flex-wrap: nowrap;
 }
 
 .virtual-keyboard-tab-list button {
-        margin-bottom: 0.75rem;
-        border-bottom-width: 2px;
-        padding: 0.25rem;
-        padding-left: 0.25rem;
-        padding-right: 0.25rem;
-        padding-bottom: 0.25rem;
+    margin-bottom: 0.75rem;
+    border-bottom-width: 2px;
+    padding: 0.25rem;
+    padding-left: 0.25rem;
+    padding-right: 0.25rem;
+    padding-bottom: 0.25rem;
 }
 
 @media (min-width: 640px) {
 
-        .virtual-keyboard-tab-list button {
-                padding: 0.5rem;
-                padding-left: 0.75rem;
-                padding-right: 0.75rem;
-        }
+    .virtual-keyboard-tab-list button {
+        padding: 0.5rem;
+        padding-left: 0.75rem;
+        padding-right: 0.75rem;
+    }
 }
 
 .virtual-keyboard-tab-list button {
@@ -755,10 +778,10 @@ div.jxgbox input[type="checkbox"] {
     }
 
 .virtual-keyboard-tab-list button[aria-selected="true"] {
-        --tw-border-opacity: 1;
-        border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
-        --tw-text-opacity: 1;
-        color: rgb(37 99 235 / var(--tw-text-opacity, 1));
+    --tw-border-opacity: 1;
+    border-color: rgb(96 165 250 / var(--tw-border-opacity, 1));
+    --tw-text-opacity: 1;
+    color: rgb(37 99 235 / var(--tw-text-opacity, 1));
 }
 /*
 Tailwind base is purposely not included because we want all styles to be prefixed. We manually copy in whatever is needed from tailwind preflight.
@@ -855,7 +878,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 #virtual-keyboard-tray .close-keyboard-button {
         position: absolute;
         top: 0px;
-        right: 0px;
+        inset-inline-end: 0px;
         margin: 0.5rem;
         border-radius: 0.25rem;
 }
@@ -881,17 +904,20 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 }
 
 /*
-     * Right-edge footprint of this button (w-12 + me-4 = 4rem) is mirrored
+     * Inline-end footprint of this button (w-12 + me-4 = 4rem) is mirrored
      * by `--keyboard-tab-reserve-width` in
      * `packages/doenetml/src/EditorViewer/editor-viewer.css` so the editor
-     * footer can shift its rightmost element inward to clear it. Keep the
-     * two values in sync.
+     * footer can shift its last element inward to clear it. Keep the two
+     * values in sync — and keep both on the *same* axis. `end-0` here pairs
+     * with `margin-inline-end` there; making one logical and leaving the
+     * other physical would send the tab and the space reserved for it to
+     * opposite edges under `rtl`, which is worse than either alone.
      */
 
 #virtual-keyboard-tray .open-keyboard-button {
         position: absolute;
         top: -1.5rem;
-        right: 0px;
+        inset-inline-end: 0px;
         margin-inline-end: 1rem;
         border-top-left-radius: 0.25rem;
         border-top-right-radius: 0.25rem;
@@ -1130,19 +1156,18 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     &:not(.vertical) {
         flex-direction: row;
         .doenet-button {
-            margin-left: 0;
-            margin-right: 0;
+            margin-inline: 0;
             /* Remove border radius on all but the first and last buttons */
             &:not(:first-child):not(:last-child) {
                 border-radius: 0;
             }
             &:first-child {
-                border-top-right-radius: 0;
-                border-bottom-right-radius: 0;
+                border-start-end-radius: 0;
+                border-end-end-radius: 0;
             }
             &:last-child {
-                border-top-left-radius: 0;
-                border-bottom-left-radius: 0;
+                border-start-start-radius: 0;
+                border-end-start-radius: 0;
             }
         }
     }
@@ -1157,12 +1182,12 @@ Tailwind base is purposely not included because we want all styles to be prefixe
             border-radius: 0;
         }
         &:first-child {
-            border-bottom-left-radius: 0;
-            border-bottom-right-radius: 0;
+            border-end-start-radius: 0;
+            border-end-end-radius: 0;
         }
         &:last-child {
-            border-top-left-radius: 0;
-            border-top-right-radius: 0;
+            border-start-start-radius: 0;
+            border-start-end-radius: 0;
         }
     }
 }
@@ -1255,14 +1280,14 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 
     svg {
         flex-shrink: 0;
-        margin-left: 1px;
+        margin-inline-start: 1px;
     }
 
     &.vertical {
         width: 100%;
         height: 10px;
         svg {
-            margin-left: 0;
+            margin-inline-start: 0;
             margin-top: 0.5px;
         }
     }
@@ -1377,6 +1402,13 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     text-decoration-color: #9061d1;
 }
 
+/*
+ * The `border-left-color` rules below stay physical for two reasons: they
+ * recolor an accent bar CodeMirror itself declares as `border-left`, and
+ * mixing a logical override onto a physical declaration leaves the cascade
+ * deciding between two properties that mean the same thing; and the editor
+ * they sit in is pinned to `dir="ltr"` anyway, because it renders source.
+ */
 .cm-tooltip-lint
     .cm-diagnostic.cm-diagnostic-warning:has(
         .cm-lint-tooltip .heading.accessibility-level-1
@@ -1853,7 +1885,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 }
 .variant-select {
     display: flex;
-    margin-left: 0.5rem;
+    margin-inline-start: 0.5rem;
 
     * {
         box-sizing: border-box;
@@ -1871,19 +1903,19 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     .select-button {
         width: 12em;
         justify-content: space-between;
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
-        margin-right: 0;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
+        margin-inline-end: 0;
     }
     .prev-next-button {
-        border-top-left-radius: 0;
-        border-bottom-left-radius: 0;
-        margin-left: 0;
+        border-start-start-radius: 0;
+        border-end-start-radius: 0;
+        margin-inline-start: 0;
     }
     /* Make all .prev-next-button buttons except for the last one have zero border radius */
     .prev-next-button:not(:last-child) {
-        border-top-right-radius: 0;
-        border-bottom-right-radius: 0;
+        border-start-end-radius: 0;
+        border-end-end-radius: 0;
     }
 
     .wrapper {
@@ -1990,8 +2022,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
         border-radius: 0.25rem;
         border-style: none;
         background-color: hsl(204 20% 94%);
-        padding-left: 1rem;
-        padding-right: 1rem;
+        padding-inline: 1rem;
         font-size: 1rem;
         line-height: 1.5rem;
         color: black;
@@ -2039,7 +2070,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 
 .editor-panel .footer-menu-button {
     all: unset;
-    margin-left: auto;
+    margin-inline-start: auto;
     display: inline-flex;
     align-items: center;
     justify-content: center;
@@ -2057,25 +2088,29 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 }
 
 /*
- * When the footer's right edge meets the virtual keyboard's open-keyboard
+ * When the footer's trailing edge meets the virtual keyboard's open-keyboard
  * tab (showViewer={false} or viewerLocation in {"left","top"} with the
- * keyboard enabled), push the rightmost footer element inward so the icons
- * stay clickable. The reservation must match the keyboard tab's right-edge
+ * keyboard enabled), push the last footer element inward so the icons stay
+ * clickable. The reservation must match the keyboard tab's inline-end
  * footprint (`w-12` + `me-4` = 3rem + 1rem) defined in
  * `packages/virtual-keyboard/src/virtual-keyboard/keyboard-tray.css`. Keep
  * this value in sync if that footprint changes. Very narrow viewports may
  * still let the tab and the icons collide; that's accepted.
+ *
+ * Logical, and it has to stay paired with the tab's own `end-0`: the tab is
+ * portaled to `document.body`, so nothing but this axis agreement keeps the
+ * space and the thing it is reserved for on the same side of the screen.
  */
 .editor-panel .editor-footer.reserve-keyboard-button-space {
     --keyboard-tab-reserve-width: 4rem;
 }
 .editor-panel .editor-footer.reserve-keyboard-button-space .footer-menu-button {
-    margin-right: var(--keyboard-tab-reserve-width);
+    margin-inline-end: var(--keyboard-tab-reserve-width);
 }
 .editor-panel
     .editor-footer.reserve-keyboard-button-space:not(:has(.footer-menu-button))
     .footer-icons {
-    margin-right: var(--keyboard-tab-reserve-width);
+    margin-inline-end: var(--keyboard-tab-reserve-width);
 }
 
 .editor-panel .footer-menu {
@@ -2168,7 +2203,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 
 .editor-panel .diagnostic-tab-count {
     min-width: 1.5ch;
-    text-align: right;
+    text-align: end;
     font-variant-numeric: tabular-nums;
 }
 
@@ -2246,7 +2281,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 
 .editor-panel .diagnostic-entry-location {
     font-weight: 600;
-    margin-right: 0.35rem;
+    margin-inline-end: 0.35rem;
 }
 
 /* Dark mode overrides for .diagnostic-entry-message code — see [data-theme="dark"] block below. */
@@ -2522,6 +2557,8 @@ Tailwind base is purposely not included because we want all styles to be prefixe
  * Active-line gutter: CodeMirror base theme uses #e2f2ff (light blue), which
  * is garish on a dark gutter. Use a barely-lighter #363636 instead.
  */
+/* Physical, matching CodeMirror's own gutter rule; the editor renders source
+   and is pinned to `dir="ltr"` in `CodeMirror.tsx`. */
 [data-theme="dark"] .editor-panel .cm-gutters {
     background-color: #1e1e1e;
     color: #8b949e;
@@ -2830,7 +2867,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 .doenet-viewer .radio-container {
     display: block;
     position: relative;
-    padding-left: 24px;
+    padding-inline-start: 24px;
     margin-bottom: 4px;
     min-height: 24px;
     cursor: pointer;
@@ -2871,7 +2908,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 .doenet-viewer .radio-checkmark {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     height: 18px;
     width: 18px;
     background-color: var(--mainGray);
@@ -2934,7 +2971,14 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     display: block;
 }
 
-/* Style the indicator (dot/circle) */
+/*
+ * Style the indicator (dot/circle).
+ *
+ * Physical `left` on purpose: this centers a 6px dot in the 18px marker box
+ * above, whose own position is what follows the direction. Inside a
+ * fixed-size box the two are the same offset, and keeping it physical says
+ * that the glyph itself is not what mirrors.
+ */
 .doenet-viewer .radio-container .radio-checkmark:after {
     top: 6px;
     left: 6px;
@@ -2950,7 +2994,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 .doenet-viewer .checkbox-container {
     display: block;
     position: relative;
-    padding-left: 24px;
+    padding-inline-start: 24px;
     margin-bottom: 4px;
     min-height: 24px;
     cursor: pointer;
@@ -2993,7 +3037,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 .doenet-viewer .checkbox-checkmark {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     height: 18px;
     width: 18px;
     background-color: var(--mainGray);
@@ -3056,7 +3100,14 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     display: block;
 }
 
-/* Style the checkmark/indicator */
+/*
+ * Style the checkmark/indicator.
+ *
+ * Physical `left` on purpose: the tick is two borders of a rotated box, and a
+ * check mark is the same shape and sits at the same offset within its own box
+ * in every language. The marker box around it is what follows the direction.
+ * Same rule, same reason, as `booleanInput.css`.
+ */
 .doenet-viewer .checkbox-container .checkbox-checkmark:after {
     left: 5px;
     top: 1px;
@@ -3141,10 +3192,10 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     /* `display: inline-block` and `vertical-align` are set inline in
        booleanInput.tsx so the checkbox flows beside a wrapping label (#1245). */
     position: relative;
-    padding-left: 24px;
+    padding-inline-start: 24px;
     margin-bottom: 4px;
-    margin-right: 2px; /* 2px less than other components (6px marginRight) due to the 2px marginLeft on label */
-    margin-left: 4px;
+    margin-inline-end: 2px; /* 2px less than other components (6px inline-end margin) due to the 2px inline-start margin on label */
+    margin-inline-start: 4px;
     cursor: pointer;
     -webkit-user-select: none;
     -moz-user-select: none;
@@ -3181,7 +3232,7 @@ Tailwind base is purposely not included because we want all styles to be prefixe
 .doenet-viewer .checkmark {
     position: absolute;
     top: 0;
-    left: 0;
+    inset-inline-start: 0;
     height: 18px;
     width: 18px;
     background-color: var(--mainGray);
@@ -3239,7 +3290,13 @@ Tailwind base is purposely not included because we want all styles to be prefixe
     display: block;
 }
 
-/* Style the checkmark/indicator */
+/*
+ * Style the checkmark/indicator.
+ *
+ * Physical `left` on purpose: the tick is two borders of a rotated box, and a
+ * check mark is the same shape and sits at the same offset within its own box
+ * in every language. The marker box around it is what follows the direction.
+ */
 .doenet-viewer .boolean-container .checkmark:after {
     left: 5px;
     top: 1px;
@@ -3968,6 +4025,13 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     height: 1px;
     box-sizing: content-box;
 }
+/*
+ * The brackets stay physical, and deliberately so: `matrixInput.tsx` pins this
+ * element to `dir="ltr"`, because a matrix is notation and does not mirror.
+ * There is no direction here for a logical property to follow, and writing one
+ * would suggest the brackets could swap ends — which would leave the opening
+ * bracket closing and the closing one opening.
+ */
 .doenet-viewer .matrix-input {
     position: relative;
     margin: 6px;
@@ -4058,8 +4122,8 @@ html body .mq-editable-field .mq-selection .mq-nthroot-container * {
     .pretzelWrapper {
         display: grid;
         gap: 0px;
-        border-left: 1px solid var(--canvasText);
-        border-right: 1px solid var(--canvasText);
+        /* Both sides, so the pair is the same either way round. */
+        border-inline: 1px solid var(--canvasText);
     }
 
     .pretzelWrapperTop {