CSSデモ2件

CSS spelling-error & grammar-error

ブラウザが検出したスペルミスや文法エラーのスタイリングを制御します。

text-decoration-lineによるエラー風装飾

エラー検出とは無関係に、ブラウザ標準のエラー表示と同じ装飾を任意のテキストへ描きます。

この文章では誤字っぽく見せたい部分と文法が怪しく見せたい部分を、ブラウザ標準のエラー表示と同じ装飾で描いています。

.spelling {
  text-decoration-line: spelling-error;
}

.grammar {
  text-decoration-line: grammar-error;
}

スペル・文法エラースタイリング

編集可能な英文で、検出されたスペルミスが波線と背景色で表示されます。文法エラーの装飾は、ブラウザが文法チェックを持つ環境でのみ表示されます。

Check a speling error and an grammar error.

::spelling-error {
  background-color: var(--color-bg-error);
  color: var(--color-fg-error);
  text-decoration-line: underline;
  text-decoration-style: wavy;
  text-decoration-color: var(--color-fg-error);
}

::grammar-error {
  color: var(--color-fg-error);
  text-decoration-line: underline;
  text-decoration-style: dotted;
  text-decoration-color: var(--color-fg-error);
}