Spelling and grammar text decorations

概要

text-decoration-line の spelling-error と grammar-error は、ブラウザ標準のスペルチェック・文法チェックマーキング（通常は赤や緑の波線）をCSSで適用できます。エディターやライティングツールのUIで一貫した見た目を提供するために使用します。カスタムの校正ツールやテキストエディターの開発に役立ちます。

対応ブラウザ

基本構文

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

実務での使いどころ

• カスタム校正ツール

  独自のスペルチェック・文法チェック機能で、ブラウザネイティブと同じ見た目のエラー表示を適用します。

注意点

アクセシビリティ

• エラー表示は色だけに依存せず、テキストやツールチップによる補足説明も提供してください。

参考リンク

• MDN Web Docs — Spelling and grammar text decorations