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: "』";
}