Skip to content

Instantly share code, notes, and snippets.

@newtone

newtone/multilingual

Created September 7, 2022 22:34
Show Gist options
  • Save newtone/849f7683c5308dfc49b060c5dbb609f8 to your computer and use it in GitHub Desktop.
Save newtone/849f7683c5308dfc49b060c5dbb609f8 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
multilingual
// Define the text direction on your website
<html lang=”ar-MA” dir=”rtl”>
// Use CSS logical properties
<style>
/* old way */
.absolute-element {
position: absolute;
}
[dir="rtl"] .absolute-element {
right: 50px;
}
[dir="ltr"] .absolute-element {
left: 50px;
}
/* new way */
border-block-start: 10px; // border-top: 10px;
padding-inline-end: 10px; // padding-right: 10px;
margin-block-start: 10px; // margin-top: 10px;
text-align: start; // text-align: left;
inline-size: 100px; // width: 100px;
max-block-size: 100px; // max-height: 100px;
// Give unicode ranges to fonts
@font-face {
font-family: "My Latin Font";
src: url("MyLatinFont.woff2") format("woff2-variations"),
url("MyLatinFont.woff2") format("woff2"),
url("MyLatinFont.woff") format("woff");
unicode-range: U+0000-007F; // Latin
}
@font-face {
font-family: "My Arabic Font";
src: url("MyArabicFont.woff2") format("woff2-variations"),
url("MyArabicFont.woff2") format("woff2"),
url("MyArabicFont.woff") format("woff");
unicode-range: U+0600-06FF; // Arabic
}
</style>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment