SCSS – Internationalization of Quotation Marks

In written language, different cultures use different symbols to denote quotations. For instance, English typically uses “curly quotes,” while French favors «angle quotes», and German uses „bottom quotes“. Ensuring that the correct quotation marks appear based on the language of the text is an important detail for maintaining the authenticity and readability of multilingual content on the web.

The Solution: CSS Pseudo-elements and :lang Selector

Our approach leverages the power of CSS to dynamically insert the appropriate quotation marks before and after the q element’s content, which is the standard HTML tag for short inline quotations.

The Base Style

q {
  &::before {
    content: open-quote;
  }

  &::after {
    content: close-quote;
  }
}

Here, we use the ::before and ::after pseudo-elements to automatically insert the open and close quotation marks around the content of every q element.

Language-Specific Styles

:lang(en) q {
  quotes: '“' '”';
}

:lang(fr) q {
  quotes: '«' '»';
}

:lang(de) q {
  quotes: '»' '«';
}

:lang(pt) & {
  quotes: '‘' '’';
}

To tailor the quotation marks to different languages, we use the :lang() pseudo-class. This selector targets elements based on their language attribute. By defining the quotes property within each language-specific rule, we ensure that English, French, and German texts are wrapped with their respective culturally correct quotation marks.

Conclusion

With just a few lines of CSS, we can greatly enhance the international user experience on our websites. This approach is a testament to the flexibility and power of CSS in creating culturally aware web content.