Developing for Localization
summary
Site serves Getty Images localized into more than 20 languages and CSS prevents translated copy from wrecking layouts: use position: relative on figure plus absolute caption and constrain images with max-width: max-content (works where supported), switch quotes per language with lang and :lang, beware text-transform inconsistencies across browsers, align call‑to‑action buttons with flexbox and margin-top: auto, align paragraphs by giving H1s a min-height in rems, use media queries to show/hide forced <br>, orphans/widows support remains spotty.
AI-written summary · about
chapters (27)
- 0:00Start
- 1:45Getty Images Localizations
- 2:01What is "localization"?
- 3:33Demo - Text Embedded In Images
- 8:00Demo - Quotes, English
- 8:34Demo - Quotes, German
- 9:33Demo - Quotes, Emoji
- 10:17text-transform: capitalize; (Chrome)
- 11:06text-transform: uppercase; (Firefox)
- 11:41text-transform Compatibility Table on MDN
- 12:39The Headline - Comp
- 15:32Widows and Orphans - Widow
- 15:50Widows and Orphans - Orphan
- 16:41Widows and Orphans - Current Support
- 18:07Headline Orphans (Imagine if...)
- 19:53Group of Boxes - Comp
- 20:44Group of Boxes - Markup
- 21:03Group of Boxes - Starting CSS
- 22:17Group of Boxes - Parent Flex
- 23:23Group of Boxes - Flexbox & Auto Margins
- 24:00Group of Boxes - Gridding the Headers
- 25:43Review - Lang attribute and pseudoclass
- 26:05Review: text-transform Compatibility
- 26:21Review - Orphans & Widows, Imagine if...
- 26:34Review - Super Flexible Headlines
- 26:49Review - Aligned Boxes
- 27:03Summary
related talks
17mi18n: A Brief Primer of Web Internationalization
31mThink Globally, Act Locally on the Web
20mReimagining web layout for accessible multilingual content
35mDeveloping for the rest of the World
50mAdvanced HTML for Good Developers
48mResponsive Images and Art Direction
39mThink globally, act locally with i18n on the web
40mThings To Keep In Mind When Working In The World Of Responsive Design