Posts Tagged ‘WebInternationalization’
[DotCSS2018] DotCSS 2018: Elika J. Etemad – A Primer on Web Internationalization
Elika J. Etemad, known as fantasai, is a seasoned expert in the CSS Working Group, with a deep focus on internationalization (i18n). At DotCSS 2018, Elika provided a concise yet comprehensive overview of how the web platform supports multiple languages and locales, offering practical guidance for developers to create globally accessible websites.
Language and Localization
Elika distinguishes between translation (converting text to another language) and localization (adapting content to cultural and regional norms). For example, a website operating in Canada and the US may not require translation but must account for differences in currency, dates, or marketing strategies. She emphasizes the importance of explicit language selection, allowing users to choose their preferred language regardless of their location. The lang attribute in HTML is crucial, as it informs CSS about typographic nuances, such as hyphenation dictionaries or glyph shapes, that vary by language.
Elika also highlights the role of content negotiation, where browsers use language headers to signal user preferences. By adopting UTF-8 encoding universally, developers can ensure compatibility across all writing systems, simplifying the internationalization process.
Bidirectional Text and Layout
A significant challenge in i18n is handling bidirectional (bidi) text, particularly for right-to-left (RTL) languages like Arabic and Hebrew. Elika explains the Unicode Bidirectional Algorithm, which orders text logically rather than visually, ensuring correct display even when mixing scripts (e.g., Arabic names in an English sentence). The dir attribute in HTML, not the CSS direction property, is the correct tool for setting base directionality, as it creates isolated contexts for text rendering.
This bidirectionality extends to layout, affecting alignment, column ordering, and scrolling direction. Logical properties like margin-inline-start and values like text-align: start adapt dynamically to the writing direction, making layouts robust across languages. Elika’s insights underscore the importance of these tools in creating seamless, multilingual user experiences.
Sizing and Typography Considerations
Elika also addresses sizing challenges in multilingual design. Character density varies across languages—Chinese is compact, while French is verbose—impacting layout when fixed sizes are used. Intrinsic sizing, enabled by keywords like auto, min-content, and max-content, allows layouts to adapt to content length. For instance, a poster design translated into Chinese retains its visual relationships when using intrinsic sizing, ensuring consistency across languages.
Typography also requires attention, as line spacing needs differ (e.g., Vietnamese requires more vertical space for accents). By leveraging CSS’s logical properties and language-based selectors, developers can tailor layouts to these nuances, enhancing readability and aesthetics.