Skip to content

Commit 38b274f

Browse files
marcpruxmarcprux
authored
Set RTL for site based on locale (#130)
1 parent e580a45 commit 38b274f

File tree

2 files changed

+55
-46
lines changed

2 files changed

+55
-46
lines changed

‎src/i18n/config.ts‎

Lines changed: 7 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -24,6 +24,13 @@ export const languages = {
2424
export type Locale = keyof typeof languages;
2525
export const defaultLocale: Locale = "en";
2626

27+
const rtlLanguages = new Set(["ar", "he", "fa", "ur"]);
28+
29+
/** Returns true if the given language code is a right-to-left script. */
30+
export function isRtl(lang: string): boolean {
31+
return rtlLanguages.has(lang.split("-")[0].toLowerCase());
32+
}
33+
2734
import { marked } from "marked";
2835

2936
/** Render a markdown string to inline HTML (no wrapping <p> tags). */

‎src/layouts/Base.astro‎

Lines changed: 48 additions & 46 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
---
2-
import { languages, markdownify } from '../i18n/config';
2+
import { languages, markdownify, isRtl } from '../i18n/config';
33
import ThemeToggle from '../components/ThemeToggle.astro';
44
55
interface Props {
@@ -14,9 +14,10 @@ const {
1414
description,
1515
} = Astro.props;
1616
17+
const dir = isRtl(lang) ? "rtl" : "ltr";
1718
---
1819
<!DOCTYPE html>
19-
<html lang={lang}>
20+
<html lang={lang} dir={dir}>
2021
<head>
2122
<title>{title}</title>
2223
<meta charset="UTF-8">
@@ -114,78 +115,78 @@ const {
114115
vertical-align: middle;
115116
background-repeat: no-repeat;
116117
background-position: left center;
117-
padding-left: 2em;
118+
padding-inline-start: 2em;
118119
line-height: 1.5;
119120
content: "➤ ";
120121
}
121122

122123
.li-list::before {
123-
margin-right: 0.5em;
124+
margin-inline-end: 0.5em;
124125
}
125126

126127
.li-money::before {
127-
mask: url('/img/money_bag.svg') no-repeat center / contain;
128+
mask: url('/img/money_bag.svg') no-repeat center / contain;
128129
-webkit-mask: url('/img/money_bag.svg') no-repeat center / contain;
129130
background-color: var(--pico-color);
130-
width: 1em;
131-
height: 1em;
132-
content: "";
133-
display: inline-block;
134-
margin-left: -1.5em;
135-
margin-right: 0.5em;
131+
width: 1em;
132+
height: 1em;
133+
content: "";
134+
display: inline-block;
135+
margin-inline-start: -1.5em;
136+
margin-inline-end: 0.5em;
136137
}
137138

138139
.li-terms::before {
139-
mask: url('/img/contract_edit.svg') no-repeat center / contain;
140+
mask: url('/img/contract_edit.svg') no-repeat center / contain;
140141
-webkit-mask: url('/img/contract_edit.svg') no-repeat center / contain;
141142
background-color: var(--pico-color);
142-
width: 1em;
143-
height: 1em;
144-
content: "";
145-
display: inline-block;
146-
margin-left: -1.5em;
147-
margin-right: 0.5em;
143+
width: 1em;
144+
height: 1em;
145+
content: "";
146+
display: inline-block;
147+
margin-inline-start: -1.5em;
148+
margin-inline-end: 0.5em;
148149
}
149150

150151
.li-id::before {
151-
mask: url('/img/id_card.svg') no-repeat center / contain;
152+
mask: url('/img/id_card.svg') no-repeat center / contain;
152153
-webkit-mask: url('/img/id_card.svg') no-repeat center / contain;
153154
background-color: var(--pico-color);
154-
width: 1em;
155-
height: 1em;
156-
content: "";
157-
display: inline-block;
158-
margin-left: -1.5em;
159-
margin-right: 0.5em;
155+
width: 1em;
156+
height: 1em;
157+
content: "";
158+
display: inline-block;
159+
margin-inline-start: -1.5em;
160+
margin-inline-end: 0.5em;
160161
}
161162

162163
.li-signing::before {
163-
mask: url('/img/fingerprint.svg') no-repeat center / contain;
164+
mask: url('/img/fingerprint.svg') no-repeat center / contain;
164165
-webkit-mask: url('/img/fingerprint.svg') no-repeat center / contain;
165166
background-color: var(--pico-color);
166-
width: 1em;
167-
height: 1em;
168-
content: "";
169-
display: inline-block;
170-
margin-left: -1.5em;
171-
margin-right: 0.5em;
167+
width: 1em;
168+
height: 1em;
169+
content: "";
170+
display: inline-block;
171+
margin-inline-start: -1.5em;
172+
margin-inline-end: 0.5em;
172173
}
173174

174175
.li-appids::before {
175-
mask: url('/img/receipt.svg') no-repeat center / contain;
176+
mask: url('/img/receipt.svg') no-repeat center / contain;
176177
-webkit-mask: url('/img/receipt.svg') no-repeat center / contain;
177178
background-color: var(--pico-color);
178-
width: 1em;
179-
height: 1em;
180-
content: "";
181-
display: inline-block;
182-
margin-left: -1.5em;
183-
margin-right: 0.5em;
179+
width: 1em;
180+
height: 1em;
181+
content: "";
182+
display: inline-block;
183+
margin-inline-start: -1.5em;
184+
margin-inline-end: 0.5em;
184185
}
185186

186187
.header-icons {
187-
float: right;
188-
margin-right: 1rem;
188+
float: inline-end;
189+
margin-inline-end: 1rem;
189190
z-index: 1000;
190191
display: inline-flex;
191192
align-items: center;
@@ -205,11 +206,12 @@ const {
205206
}
206207

207208
.callout-warning {
208-
border-left: 4px solid #d32f2f;
209+
border-inline-start: 4px solid #d32f2f;
209210
background: rgba(211, 47, 47, 0.08);
210211
padding: 1rem 1.5rem;
211212
margin: 1.5rem 0;
212-
border-radius: 0 0.5rem 0.5rem 0;
213+
border-start-end-radius: 0.5rem;
214+
border-end-end-radius: 0.5rem;
213215
}
214216

215217
.callout-warning h3 {
@@ -218,7 +220,7 @@ const {
218220
}
219221

220222
.callout-warning blockquote {
221-
border-left: none;
223+
border-inline-start: none;
222224
background: rgba(211, 47, 47, 0.08);
223225
border-radius: 0.5rem;
224226
padding: 1rem 1.5rem;
@@ -234,7 +236,7 @@ const {
234236
font-size: 1.5em;
235237
font-weight: bold;
236238
color: #d32f2f;
237-
margin-right: 0.15em;
239+
margin-inline-end: 0.15em;
238240
vertical-align: -0.15em;
239241
line-height: 0;
240242
}
@@ -244,7 +246,7 @@ const {
244246
font-size: 1.5em;
245247
font-weight: bold;
246248
color: #d32f2f;
247-
margin-left: 0.1em;
249+
margin-inline-start: 0.1em;
248250
vertical-align: -0.15em;
249251
line-height: 0;
250252
}

0 commit comments

Comments
 (0)