Task #737: fix reversed ص/م (AM/PM) in Arabic booking time ranges
- Root cause: time-range containers forced dir="ltr" while the strings mix
Latin digits with Arabic ص/م, so the bidi algorithm flipped the segments
(showed "م - 1:30 م 12:30" instead of "12:30 م – 1:30 م").
- artifacts/tx-os/src/pages/protocol.tsx:
- fmtTimeOnly now uses "ar-u-nu-latn" in Arabic (Latin digits kept) and
is rendered in the natural RTL flow.
- Removed dir="ltr" from: bookings list time cell, day-grid booking block
time, and details dialog time range.
- fmtSlotRange / fmtSlotLabel callsites already use locale-aware dir (rtl
in Arabic) — unchanged. English display unchanged.
- tsc clean; architect review passed.
This commit is contained in:
@@ -621,7 +621,7 @@ function BookingDayGrid({
|
|||||||
{roomName(ev.b.roomId)}
|
{roomName(ev.b.roomId)}
|
||||||
</div>
|
</div>
|
||||||
{height >= 44 && (
|
{height >= 44 && (
|
||||||
<div className="truncate opacity-70" dir="ltr">
|
<div className="truncate opacity-70">
|
||||||
{timeLabel(ev.b.startsAt)} – {timeLabel(ev.b.endsAt)}
|
{timeLabel(ev.b.startsAt)} – {timeLabel(ev.b.endsAt)}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
@@ -1024,8 +1024,12 @@ export default function ProtocolPage() {
|
|||||||
new Date(iso).toLocaleDateString(isAr ? "ar" : "en", {
|
new Date(iso).toLocaleDateString(isAr ? "ar" : "en", {
|
||||||
dateStyle: "medium",
|
dateStyle: "medium",
|
||||||
});
|
});
|
||||||
|
// Latin digits even in Arabic (ar-u-nu-latn) so times look like "12:30 م".
|
||||||
|
// Rendered inside RTL containers WITHOUT dir="ltr": forcing LTR on text
|
||||||
|
// that mixes Latin digits with Arabic ص/م makes the bidi algorithm flip
|
||||||
|
// the order (e.g. "م 1:30 – م 12:30").
|
||||||
const fmtTimeOnly = (iso: string) =>
|
const fmtTimeOnly = (iso: string) =>
|
||||||
new Date(iso).toLocaleTimeString(isAr ? "ar" : "en", {
|
new Date(iso).toLocaleTimeString(isAr ? "ar-u-nu-latn" : "en", {
|
||||||
timeStyle: "short",
|
timeStyle: "short",
|
||||||
});
|
});
|
||||||
|
|
||||||
@@ -1096,7 +1100,7 @@ export default function ProtocolPage() {
|
|||||||
<TableCell className="whitespace-nowrap text-center align-middle text-slate-600">
|
<TableCell className="whitespace-nowrap text-center align-middle text-slate-600">
|
||||||
<div className="flex flex-col items-center gap-0.5 leading-tight">
|
<div className="flex flex-col items-center gap-0.5 leading-tight">
|
||||||
<div>{fmtDateOnly(b.startsAt)}</div>
|
<div>{fmtDateOnly(b.startsAt)}</div>
|
||||||
<div className="text-xs text-slate-400" dir="ltr">
|
<div className="text-xs text-slate-400">
|
||||||
{fmtTimeOnly(b.startsAt)} – {fmtTimeOnly(b.endsAt)}
|
{fmtTimeOnly(b.startsAt)} – {fmtTimeOnly(b.endsAt)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
@@ -2320,7 +2324,7 @@ export default function ProtocolPage() {
|
|||||||
<DetailRow
|
<DetailRow
|
||||||
label={t("protocol.bookings.details.time")}
|
label={t("protocol.bookings.details.time")}
|
||||||
value={
|
value={
|
||||||
<span dir="ltr">
|
<span>
|
||||||
{fmtTimeOnly(detailsBooking.startsAt)} –{" "}
|
{fmtTimeOnly(detailsBooking.startsAt)} –{" "}
|
||||||
{fmtTimeOnly(detailsBooking.endsAt)}
|
{fmtTimeOnly(detailsBooking.endsAt)}
|
||||||
</span>
|
</span>
|
||||||
|
|||||||
Reference in New Issue
Block a user