Re: [csswg-drafts] [css-overflow-5]: browser translation of accessible name strings for scroll-markers and scroll-buttons (#12268)

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