- 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