테마 번역을 CSS에서 접근 가능하게 만들기

기여 기능
1

실제로 테마 설정은 CSS에서 접근할 수 있지만, 테마 번역은 접근할 수 없습니다.

번역 가능하도록 만들면 좋겠습니다.

예를 들어, DiscoTOC 테마 컴포넌트에는 다음과 같은 설정이 있습니다:

CSS에서 사용되고 있습니다:

2

CSS를 통해 텍스트를 추가하는 것은 접근성이 부족하기 때문에 일종의 최후의 수단으로 보는 것이 맞으며, 추가 기능을 통해 이를 지원하는 것은 권장하지 않는다고 생각합니다.

8개의 좋아요
3

그런 것이 플러그인을 통해 실현 가능한가요?

4

SCSS에서 번역을 활성화하는 플러그인… 모든 것이 가능하지만, 매우 지저분할 것입니다. 예를 들어, 각 로케일별로 다른 CSS 자산을 어떻게든 컴파일해야 합니다. 이렇게 하려는 시도를 강력히 비추천합니다.

한 가지 가능한 아이디어… 하지만 추천하지 않습니다(즉, 이 방법을 시도하면 모든 것은 전적으로 본인의 책임입니다 :stuck_out_tongue: )

이것이 나쁜 아이디어라는 점을 이해하고 있습니다

테마의 JavaScript에서 다음과 같은 작업을 수행할 수 있습니다.

document.documentElement.style.setProperty('--my-translation-name', `"${ I18n.t(themePrefix("my-translation-name")) }"`);

그리고 CSS에서는 다음과 같이 사용할 수 있습니다.

 &:before {
    content: var(--my-translation-name);
  }

이 방법은 많은 방식으로 깨질 수 있습니다 - 번역에 따옴표나 특수 문자를 넣으면 깨집니다. IE11에서 사용하려고 하면 깨집니다.

5개의 좋아요
5

테마 CSS에서 번역을 접근 가능하게 하는 것도 지지하지 않습니다. :+1:

@evantill 님이 게시글에 언급한 예시는 해당 테마 컴포넌트의 다음 업데이트에서 제거될 예정입니다.

8개의 좋아요
6

이 주제는 3시간 후 자동으로 닫혔습니다. 더 이상 답변을 남길 수 없습니다.