i18n(ar): apply review round 3

Co-Authored-By: Claude Opus 5.5 <[email protected]>

src/ui/railCardBlocks.js

@@ -1,7 +1,7 @@
 import { t } from '../i18n/index.js';
 import { syncChipGroup } from './chipGroup.js';
 import { syncRowList } from './rowList.js';
-import { formatScaleLabel, unitLabel } from './unitLabels.js';
+import { formatScaleRange } from './unitLabels.js';
 import { createSlider } from './slider.js';
 
 const set = (node, key, value) => {
@@ -16,13 +16,6 @@ const order = (parent, nodes) =>
       parent.insertBefore(node, parent.children[i] || null);
   });
 
-// "960 — 1050+ гПа": the unit stays with the last number.
-const scaleText = (low, high, units) => {
-  const unit = unitLabel(units);
-  const range = `${formatScaleLabel(low)} — ${formatScaleLabel(high)}`;
-  return unit ? `${range}\u00a0${unit}` : range;
-};
-
 /** Optional, ordered blocks without disclosure state. All controls are keyed. */
 export function createRailCardBlocks({ container, cardId, onParams }) {
   const document = container.ownerDocument;
@@ -309,7 +302,11 @@ export function createRailCardBlocks({ container, cardId, onParams }) {
             block.scale,
             'textContent',
             visible
-              ? scaleText(legend.labels[0], legend.labels.at(-1), legend.units)
+              ? formatScaleRange(
+                  legend.labels[0],
+                  legend.labels.at(-1),
+                  legend.units,
+                )
               : '',
           );
         } else if (props.type === 'actions') {

src/ui/streetLevelPresentation.js

@@ -1,4 +1,11 @@
-import { formatNumber, msg, t, tn, translateKnown } from '../i18n/index.js';
+import {
+  formatNumber,
+  isolate,
+  msg,
+  t,
+  tn,
+  translateKnown,
+} from '../i18n/index.js';
 import { keyGuidanceText, keyRequirementText } from './keyGuidance.js';
 
 // Street Level UI state to panel strings and flags. Pure, so it is testable.
@@ -174,7 +181,10 @@ function presentViewer(state) {
   if (street.capturedAt)
     right.push(formatDate(street.capturedAt, street.capturedAtPrecision));
   const left = [];
-  if (street.title) left.push(street.title);
+  // A provider address mixes Latin and the page language ("602 Congress Ave,
+  // أوستن"); each part is isolated so a house number stays with its street
+  // in right-to-left text. A no-op in left-to-right languages.
+  if (street.title) left.push(street.title.split(', ').map(isolate).join(', '));
   if (street.creator)
     left.push(t('Image by {creator}', { creator: street.creator }));
   if (street.license) left.push(street.license);

src/ui/streetLevelPresentation.test.mjs

@@ -5,6 +5,7 @@ import {
   sinceStopIndex,
 } from './streetLevelPresentation.js';
 import { providerSnapshot } from '../testSupport/streetLevelFakes.mjs';
+import { getLocale, setLocale } from '../i18n/index.js';
 
 const provider = providerSnapshot;
 
@@ -321,6 +322,29 @@ test('a Street View caption names the place, dates it by month, and offers no FI
   assert.equal(view.viewer.renderModes, false);
 });
 
+test('in Arabic each part of a provider address keeps its own order', () => {
+  const previous = getLocale();
+  setLocale('ar');
+  try {
+    const view = presentStreetLevelPanel(
+      snapshot({
+        enabled: true,
+        street: {
+          open: true,
+          imageId: 'pano-1',
+          title: '602 Congress Ave, أوستن, تكساس',
+        },
+      }),
+    );
+    assert.equal(
+      view.viewer.captionLeft,
+      '\u2068602 Congress Ave\u2069, \u2068أوستن\u2069, \u2068تكساس\u2069',
+    );
+  } finally {
+    setLocale(previous);
+  }
+});
+
 test('the meta line keeps the sequence count and adds the other providers’ hints', () => {
   const view = presentStreetLevelPanel(
     snapshot({

src/ui/styles/voice-card.css

@@ -26,7 +26,7 @@
     0 0 1.2rem rgba(0, 212, 255, 0.08);
   backdrop-filter: blur(24px) saturate(1.3);
   -webkit-backdrop-filter: blur(24px) saturate(1.3);
-  text-align: left;
+  text-align: start;
   transform: translateX(-50%);
   transform-origin: bottom center;
   animation: gev-voice-card-in 180ms cubic-bezier(0.2, 0.8, 0.2, 1);
@@ -95,7 +95,7 @@
 }
 
 .gev-voice-card-dismiss {
-  margin-left: auto;
+  margin-inline-start: auto;
   width: 1.1rem;
   height: 1.1rem;
   padding: 0;
@@ -415,7 +415,7 @@ body.recording-mode .gev-pointer-reticle {
   -webkit-backdrop-filter: blur(24px) saturate(1.3);
   color-scheme: dark;
   font: 0.75rem/1.45 var(--font-sans);
-  text-align: left;
+  text-align: start;
   transform: translateX(-50%);
 }
 :root[data-ui-theme='cyber'] #gev-voice-control .gev-voice-panel {
@@ -443,7 +443,7 @@ body.recording-mode .gev-pointer-reticle {
   letter-spacing: 0.14em;
 }
 .gev-voice-panel-tabs {
-  margin-left: auto;
+  margin-inline-start: auto;
 }
 #gev-voice-control .gev-voice-panel-header .gev-voice-panel-tab {
   display: inline-flex;

src/ui/unitLabels.js

@@ -51,3 +51,14 @@ export function formatScaleLabel(label) {
     })}${match[2]}`,
   );
 }
+
+/**
+ * A legend range with its unit: "960 — 1050+ hPa". The unit stays with the
+ * last number. In right-to-left text the unit is isolated as well, so a Latin
+ * unit keeps its own order ("°C", not "C°").
+ */
+export function formatScaleRange(low, high, units) {
+  const unit = unitLabel(units);
+  const range = `${formatScaleLabel(low)} — ${formatScaleLabel(high)}`;
+  return unit ? `${range}\u00a0${isolate(unit)}` : range;
+}