Typography
I18n / L10n
This section details how ModulateCSS supports the creation of globally accessible websites by allowing developers to tailor content and interfaces to diverse audiences.
Learn how to effectively adapt your web projects to meet regional languages, cultural nuances, and local formatting conventions, enhancing the global reach and user experience of your applications.
Logical CSS Properties
CSS logical properties offer a dynamic styling approach that adapts seamlessly to different writing modes, including left-to-right (LTR), right-to-left (RTL), and vertical orientations. These properties are invaluable for crafting layouts that respond to varying text directions, ensuring inclusivity without requiring direction-specific styles.
Below is a comprehensive table mapping CSS logical properties to their traditional physical counterparts. This comparison not only deepens your understanding but also serves as a handy reference for transitioning to logical property usage in your web development projects.
| Logical Property | Physical Counterpart |
|---|---|
| Size and Dimension | |
inline-size | width |
block-size | height |
| Margin | |
margin-inline | margin-left + margin-right |
margin-inline-start | margin-left |
margin-inline-end | margin-right |
margin-block | margin-top + margin-bottom |
margin-block-start | margin-top |
margin-block-end | margin-bottom |
| Padding | |
padding-inline | padding-left + padding-right |
padding-inline-start | padding-left |
padding-inline-end | padding-right |
padding-block | padding-top + padding-bottom |
padding-block-start | padding-top |
padding-block-end | padding-bottom |
| Positioning and Offsets | |
inset | top + right + bottom + left |
inset-inline | left + right |
inset-inline-start | left |
inset-inline-end | right |
inset-block | top + bottom |
inset-block-start | top |
inset-block-end | bottom |
| Text and Alignment | |
text-align: start | text-align: left |
text-align: end | text-align: right |
| Border Width | |
border-inline-width | border-left-width + border-right-width |
border-inline-start-width | border-left-width |
border-inline-end-width | border-right-width |
border-block-start | border-top-width + border-bottom-width |
border-block-start-width | border-top-width |
border-block-end-width | border-bottom-width |
| Border Color | |
border-inline-color | border-left-color + border-right-color |
border-inline-start-color | border-left-color |
border-inline-end-color | border-right-color |
border-block-color | border-top-color + border-bottom-color |
border-block-start-color | border-top-color |
border-block-end-color | border-bottom-color |
| Border Style | |
border-inline-style | border-left-style + border-right-style |
border-inline-start-style | border-left-style |
border-inline-end-style | border-right-style |
border-block-style | border-top-style + border-bottom-style |
border-block-start-style | border-top-style |
border-block-end-style | border-bottom-style |
| Border Radius | |
border-start-start-radius | border-top-left-radius |
border-start-end-radius | border-top-right-radius |
border-end-end-radius | border-bottom-right-radius |
border-end-start-radius | border-bottom-left-radius |
Understanding and adopting CSS logical properties is a key step toward more adaptable, flexible, and inclusive web design, ensuring content is effectively presented, no matter the writing direction or layout requirements.
Quotation Marks
The precise handling of quotes and blockquotes is paramount. This precision not only preserves the integrity of textual quotations but also significantly enhances their readability, especially in a multilingual and multicultural landscape.
ModulateCSS leverages CSS's capabilities to manage quotation marks, adhering to the typographic conventions of various languages. This commitment to linguistic accuracy plays a crucial role in the internationalization of web projects.
Proper Quotation Management
- Cultural Respect: Each language has unique quotation mark symbols. Accurate representation of these symbols shows respect for the linguistic traditions and the communities that use them.
- Enhanced Readability: Properly formatted quotes and blockquotes contribute to a seamless reading experience, an aspect that's especially vital in complex, multilingual texts.
- Semantic Clarity: Utilizing semantic HTML alongside CSS for quotations ensures that content is accessible and correctly interpreted by assistive technologies.
Enhanced Quotations
The CSS quotes property allows for the specification of quotation marks across different levels of quotations. This is particularly useful for languages with distinct quotation styles or nested quotes.
Configuring Quotation Marks
With the quotes property, you can set the style for opening and closing quotation marks. This enables language-specific configurations within a stylesheet using language selectors.
/* English Language Setup */
:lang(en) {
--dir: ltr;
--quotes-spacing: 0.12em; /* Define spacing units */
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}You can extend this setup to include any required languages, similar to the example provided. ModulateCSS seamlessly integrates these configurations behind the scenes.
Conclusion
By adeptly applying CSS to quotes and blockquotes, web developers can greatly enhance the global appeal and inclusivity of their content. Strategic use of the quotes property and semantic HTML, along with culturally considerate design, ensures accurate and respectful presentation of quotations across linguistic boundaries. This approach is integral to creating web experiences that resonate on a truly global scale.
Languages (i18n)
Afrikaans
:lang(af) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "“";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "‘";
}Arabic
:lang(ar) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (United Arab Emirates)
:lang(ar-ae) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Bahrain)
:lang(ar-bh) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Algeria)
:lang(ar-dz) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Egypt)
:lang(ar-eg) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Iraq)
:lang(ar-iq) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Jordan)
:lang(ar-jo) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Kuwait)
:lang(ar-kw) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Lebanon)
:lang(ar-lb) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Libya)
:lang(ar-ly) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Morocco)
:lang(ar-ma) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Oman)
:lang(ar-om) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Qatar)
:lang(ar-qa) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Saudi Arabia)
:lang(ar-sa) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Syria)
:lang(ar-sy) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Tunisia)
:lang(ar-tn) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Arabic (Yemen)
:lang(ar-ye) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Belarusian
:lang(be) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "„";
--quotes-secondary-close: "“";
}Bulgarian
:lang(bg) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Catalan (Spain)
:lang(ca-es) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Czech
:lang(cs) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Danish
:lang(da) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Danish (Denmark)
:lang(da-dk) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}German
:lang(de) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}German (Austria)
:lang(de-at) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}German (Switzerland)
:lang(de-ch) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}German (Germany)
:lang(de-de) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}German (Liechtenstein)
:lang(de-li) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}German (Luxembourg)
:lang(de-lu) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .25;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Greek
:lang(el) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}English
:lang(en) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}English (Australia)
:lang(en-au) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "‘";
--quotes-primary-close: "’";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}English (Canada)
:lang(en-ca) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "‘";
--quotes-primary-close: "’";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}English (United Kingdom)
:lang(en-gb) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "‘";
--quotes-primary-close: "’";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}English (Ireland)
:lang(en-ie) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "‘";
--quotes-primary-close: "’";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}English (New Zealand)
:lang(en-nz) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "‘";
--quotes-primary-close: "’";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}English (United States)
:lang(en-us) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}English (South Africa)
:lang(en-za) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "‘";
--quotes-primary-close: "’";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}English (Zimbabwe)
:lang(en-zw) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "‘";
--quotes-primary-close: "’";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}Spanish
:lang(es) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Argentina)
:lang(es-ar) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Bolivia)
:lang(es-bo) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Chile)
:lang(es-cl) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Colombia)
:lang(es-co) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Costa Rica)
:lang(es-cr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Dominican Republic)
:lang(es-do) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Ecuador)
:lang(es-ec) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Spain)
:lang(es-es) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Guatemala)
:lang(es-gt) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Honduras)
:lang(es-hn) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Mexico)
:lang(es-mx) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Nicaragua)
:lang(es-ni) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Panama)
:lang(es-pa) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Peru)
:lang(es-pe) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Puerto Rico)
:lang(es-pr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Paraguay)
:lang(es-py) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (El Salvador)
:lang(es-sv) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Uruguay)
:lang(es-uy) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Spanish (Venezuela)
:lang(es-ve) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Estonian
:lang(et) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "”";
--quotes-secondary-open: "„";
--quotes-secondary-close: "”";
}Basque
:lang(eu) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Persian
:lang(fa) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "«";
--quotes-secondary-close: "»";
}Finnish
:lang(fi) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "”";
--quotes-primary-close: "”";
--quotes-secondary-open: "’";
--quotes-secondary-close: "’";
}Finnish (Finland)
:lang(fi-fi) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "”";
--quotes-primary-close: "”";
--quotes-secondary-open: "’";
--quotes-secondary-close: "’";
}Faroese
:lang(fo) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}French
:lang(fr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .25;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}French (France)
:lang(fr-fr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .25;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}French (Belgium)
:lang(fr-be) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .25;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}French (Canada)
:lang(fr-ca) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .25;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}French (Switzerland)
:lang(fr-ch) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}French (Luxembourg)
:lang(fr-lu) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .25;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}French (Monaco)
:lang(fr-mc) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .25;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Galician
:lang(gl) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Gujarati
:lang(gu) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Hebrew
:lang(he) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "«";
--quotes-secondary-close: "»";
}Hindi
:lang(hi) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Croatian
:lang(hr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "”";
--quotes-secondary-open: "›";
--quotes-secondary-close: "‹";
}Hungarian
:lang(hu) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "”";
--quotes-secondary-open: "„";
--quotes-secondary-close: "”";
}Hungarian (Hungary)
:lang(hu-hu) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "”";
--quotes-secondary-open: "„";
--quotes-secondary-close: "”";
}Armenian
:lang(hy) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "„";
--quotes-secondary-close: "“";
}Indonesian
:lang(id) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "”";
--quotes-primary-close: "”";
--quotes-secondary-open: "’";
--quotes-secondary-close: "’";
}Icelandic
:lang(is) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Italian
:lang(it) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Italian (Switzerland)
:lang(it-ch) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Italian (Italy)
:lang(it-it) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .12;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Japanese
:lang(ja) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "「";
--quotes-primary-close: "」";
--quotes-secondary-open: "『";
--quotes-secondary-close: "』";
}Japanese (Japan)
:lang(ja-jp) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "「";
--quotes-primary-close: "」";
--quotes-secondary-open: "『";
--quotes-secondary-close: "』";
}Georgian
:lang(ka) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "„";
--quotes-secondary-close: "“";
}Kazakh
:lang(kk) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Kannada
:lang(kn) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Korean
:lang(ko) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Konkani
:lang(kok) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Kyrgyz
:lang(ky) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Lithuanian
:lang(lt) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Latvian
:lang(lv) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Latvian (Latvia)
:lang(lv-lv) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Macedonian
:lang(mk) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Mongolian
:lang(mn) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Marathi
:lang(mr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Malay
:lang(ms) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Malay (Brunei)
:lang(ms-bn) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Malay (Malaysia)
:lang(ms-my) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Burmese
:lang(my) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Burmese (Myanmar)
:lang(my-mm) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Dutch
:lang(nl) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Dutch (Belgium)
:lang(nl-be) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Dutch (Netherlands)
:lang(nl-nl) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Norwegian
:lang(no) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Norwegian (Norway)
:lang(no-no) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Punjabi
:lang(pa) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Polish
:lang(pl) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "”";
--quotes-secondary-open: "«";
--quotes-secondary-close: "»";
}Polish (Poland)
:lang(pl-pl) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "”";
--quotes-secondary-open: "«";
--quotes-secondary-close: "»";
}Portuguese
:lang(pt) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}Portuguese (Brazil)
:lang(pt-br) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Portuguese (Portugal)
:lang(pt-pt) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .04;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "“";
--quotes-secondary-close: "”";
}Romanian
:lang(ro) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "”";
--quotes-secondary-open: "«";
--quotes-secondary-close: "»";
}Russian
:lang(ru) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "„";
--quotes-secondary-close: "“";
}Russian (Russia)
:lang(ru-ru) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "„";
--quotes-secondary-close: "“";
}Sanskrit
:lang(sa) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Slovak
:lang(sk) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Slovenian
:lang(sl) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Albanian
:lang(sq) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "‹";
--quotes-secondary-close: "›";
}Serbian
:lang(sr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Swedish
:lang(sv) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "”";
--quotes-primary-close: "”";
--quotes-secondary-open: "’";
--quotes-secondary-close: "’";
}Swedish (Finland)
:lang(sv-fi) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "”";
--quotes-primary-close: "”";
--quotes-secondary-open: "’";
--quotes-secondary-close: "’";
}Swedish (Sweden)
:lang(sv-se) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "”";
--quotes-primary-close: "”";
--quotes-secondary-open: "’";
--quotes-secondary-close: "’";
}Swahili
:lang(sw) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Tamil
:lang(ta) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Telugu
:lang(te) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Thai
:lang(th) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Turkish
:lang(tr) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Tatar
:lang(tt) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Ukrainian
:lang(uk) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: .08;
--quotes-primary-open: "«";
--quotes-primary-close: "»";
--quotes-secondary-open: "„";
--quotes-secondary-close: "“";
}Urdu
:lang(ur) {
--dir: rtl;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Vietnamese
:lang(vi) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "„";
--quotes-primary-close: "“";
--quotes-secondary-open: "‚";
--quotes-secondary-close: "‘";
}Chinese
:lang(zh) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Chinese (China)
:lang(zh-cn) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Chinese (Hong Kong)
:lang(zh-hk) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Chinese (Macau)
:lang(zh-mo) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Chinese (Singapore)
:lang(zh-sg) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "“";
--quotes-primary-close: "”";
--quotes-secondary-open: "‘";
--quotes-secondary-close: "’";
}Chinese (Taiwan)
:lang(zh-tw) {
--dir: ltr;
--writing-mode: horizontal-tb;
--quotes-spacing: 0;
--quotes-primary-open: "「";
--quotes-primary-close: "」";
--quotes-secondary-open: "『";
--quotes-secondary-close: "』";
}