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 時間後に自動的に閉鎖されました。新しい返信は許可されていません。