/* ============================================================================
RTL style suggestions for the Persian (fa) locale.
----------------------------------------------------------------------------
STATUS: suggestion only. No shared layout/template was modified, so this file
is inert until it is linked from a `fa`-specific template (or gets
dir="rtl"). Load it ONLY for the Persian language, e.g. in a future
layouts/partials/head-additions.fa.html or a baseof.fa.html:
{{ if eq site.Language.Lang "fa" }}
{{ end }}
and set the document direction:
========================================================================== */
/* ---- 1. Direction + Persian typography ---------------------------------- */
/* Apply to a wrapper class instead of if the base template must stay
untouched: wrap the home/fa output in
. */
html[dir="rtl"],
html[dir="rtl"] {
direction: rtl;
text-align: right;
font-family: "Vazirmatn", "IRANSans", "Tahoma", "Segoe UI", system-ui, sans-serif;
line-height: 1.9; /* Persian needs a taller line box */
font-feature-settings: "ss01"; /* Persian digit shaping where supported */
}
/* Latin technical tokens (model codes, units) should stay LTR inside RTL copy. */
html[dir="rtl"] code,
html[dir="rtl"] .ltr,
html[dir="rtl"] [data-ltr] {
direction: ltr;
unicode-bidi: isolate;
}
/* ---- 2. Bidirectional isolation ----------------------------------------- */
/* Numbers, ranges (120 × 90 × 60 mm) and mixed LTR/RTL runs otherwise reorder
visually. `isolate` keeps each run atomic. */
html[dir="rtl"] :is(p, li, td, th, dd, dt) {
unicode-bidi: isolate;
}
/* ---- 3. Logical properties (replace physical left/right) ---------------- */
/* Prefer margin-inline / padding-inline / inset-inline so existing components
mirror automatically: e.g. tailwind ml-*/mr-* -> ms-*/me-*, pl-*/pr-* ->
ps-*/pe-*, left-*/right-* -> start-*/end-*, text-left/right -> text-start/end. */
html[dir="rtl"] .max-w-7xl,
html[dir="rtl"] .max-w-3xl,
html[dir="rtl"] .mx-auto {
/* keep centered containers centered under RTL */
margin-inline: auto;
}
/* ---- 4. Icon / arrow mirroring ------------------------------------------ */
/* Directional glyphs must flip; logos and product photos must NOT. */
html[dir="rtl"] .rtl-flip,
html[dir="rtl"] [data-flip] {
transform: scaleX(-1);
}
html[dir="rtl"] img:not(.rtl-flip),
html[dir="rtl"] svg:not(.rtl-flip):not([data-flip]) {
transform: none; /* never mirror product imagery */
}
/* ---- 5. Sidebar, breadcrumbs, timeline, floating actions ---------------- */
/* components using border-left / border-right accents must move to the start
edge. Adjust the specific selectors used by the theme: */
html[dir="rtl"] .sidebar-series-list {
border-inline-start: 2px solid rgba(100, 116, 139, .4);
border-inline-end: 0;
margin-inline-start: 1rem;
padding-inline-start: .5rem;
}
html[dir="rtl"] .product-card,
html[dir="rtl"] .floating-actions {
/* floating action buttons sit bottom-left in LTR -> bottom-right in RTL */
inset-inline-end: 1rem;
inset-inline-start: auto;
}
/* ---- 6. Forms & tables -------------------------------------------------- */
html[dir="rtl"] input,
html[dir="rtl"] textarea,
html[dir="rtl"] select {
direction: rtl;
text-align: right;
}
html[dir="rtl"] table {
direction: rtl;
}
html[dir="rtl"] table th,
html[dir="rtl"] table td {
text-align: right;
}
/* spec tables hold mostly model codes + numeric values: keep those cells LTR */
html[dir="rtl"] table td[data-ltr],
html[dir="rtl"] table th[data-ltr] {
direction: ltr;
text-align: left;
}
/* ---- 7. Persian digits (optional) --------------------------------------- */
/* Uncomment to render Persian-Indic digits everywhere. */
/*
html[dir="rtl"] { font-variant-numeric: Persian; }
*/
/* ---- 8. Letter-spacing / uppercase ------------------------------------- */
/* Persian is a connected script: tracking and uppercase transforms are wrong. */
html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4,
html[dir="rtl"] .tracking-wide, html[dir="rtl"] .uppercase {
letter-spacing: normal;
text-transform: none;
}