- From: Christoph Päper via GitHub <noreply@w3.org>
- Date: Sat, 04 Oct 2025 17:56:11 +0000
- To: public-css-archive@w3.org
I think I don’t get the point. In your usage scenario, who or what would translate the strings used in CSS generated [content](https://drafts.csswg.org/css-content-3/#propdef-content), and when? The optional part after the forward slash in the value of the `content` property is – at least for now – intended as fallback [“alt text“](https://drafts.csswg.org/css-content-3/#alt) wherever the mandatory first part cannot be used, e.g. images in speech rendition. This is available for most pseudo elements, including the drafted [`::scroll-marker`](https://drafts.csswg.org/css-overflow-5/#scroll-marker-pseudo) and [`::scroll-button(…)`](https://drafts.csswg.org/css-overflow-5/#scroll-buttons). ~~~~ ebnf content = normal | none | [ <content-replacement> | <content-list> ] [/ [ <string> | <counter> | <attr()> ]+ ]? <content-replacement> = <image> <content-list> = [ <image> | <attr()> | contents | <content()> | <string> | <string()> | <quote> | <leader()> | <target> | <counter> ]+ ~~~~ I think the current best [l10n] practice for authors is to use the [`:lang()` pseudo-class selector with custom properties](https://drafts.csswg.org/css-variables-2/#example-8f013eba) (and not [named strings](https://drafts.csswg.org/css-content-3/#named-strings) for instance). I assume the problem you are trying to solve is the natural-language representation of symbolic (scroll) navigation widgets. ~~~~ css ::scroll-button(next) { content: "»" / var(--i18n-next); } ::scroll-button(prev) { content: "«" / var(--i18n-prev); } :lang(en), :lang(*) { --i18n-prev: "previous"; --i18n-next: "next"; --i18n-card: "card"; --i18n-image: "image"; --i18n-entry: "entry"; --i18n-next-card: var(--next) " " var(--card); --i18n-next-image: var(--next) " " var(--image); --i18n-next-entry: var(--next) " " var(--entry); --i18n-prev-card: var(--prev) " " var(--card); --i18n-prev-image: var(--prev) " " var(--image); --i18n-prev-entry: var(--prev) " " var(--entry); } :lang(de) { --i18n-prev: "zurück"; --i18n-next: "weiter"; --i18n-card: "Karte"; --i18n-image: "Bild"; --i18n-entry: "Eintrag"; --i18n-next-card: "nächste " var(--card); --i18n-next-image: "nächstes " var(--image); --i18n-next-entry: "nächster " var(--entry); --i18n-prev-card: "vorherige " var(--card); --i18n-prev-image: "vorheriges " var(--image); --i18n-prev-entry: "vorheriger " var(--entry); } ~~~~ I believe the only way to solve this would be predefined keywords for use in generated content, possibly within a function like ` string()`, `env()` or a new one. Even then, this seems like Pandora's box. <!-- --i18n-up: "up"; --i18n-down: "down"; --i18n-left: "left"; --i18n-right: "right"; --i18n-upwards: "up"; --i18n-downwards: "down"; --i18n-leftwards: "left"; --i18n-rightwards: "right"; --i18n-top: "top"; --i18n-bottom: "bottom"; --i18n-start: "start"; --i18n-end: "end"; --i18n-current: "current"; --i18n-advance: "advance"; --i18n-return: "return"; --i18n-progress: "progress"; --i18n-page: "page"; --i18n-slide: "slide"; --i18n-column: "column"; --i18n-row: "row"; --i18n-line: "line"; --i18n-chapter: "chapter"; --i18n-section: "section"; --i18n-paragraph: "paragraph"; --> [i18n]: #i18n "internationalization" [l10n]: #l10n "localization" -- GitHub Notification of comment by Crissov Please view or discuss this issue at https://github.com/w3c/csswg-drafts/issues/12268#issuecomment-3368446324 using your GitHub account -- Sent via github-notify-ml as configured in https://github.com/w3c/github-notify-ml-config
Received on Saturday, 4 October 2025 17:56:12 UTC