Атрибут spellcheck тега <article>

Описание

Атрибут spellcheck указывает, следует ли проверять орфографию и грамматику в редактируемом содержимом элемента <article>. Может принимать значения true (проверять), false (не проверять) или быть не заданным (наследовать поведение).

Пример использования:
<article contenteditable="true" spellcheck="true"> <h2>Редактируемая статья с проверкой орфографии</h2> <p>Попробуйте редактировать этот текст - ошибки будут подчеркиватся красным.</p> </article> <article contenteditable="true" spellcheck="false"> <h2>Редактируемая статья без проверки</h2> <p>Здесь орфография проверяться не будет.</p> </article>

Особенности работы:

Значение Поведение Когда использовать
true Включает проверку орфографии Для редактируемого контента, где важна грамотность
false Отключает проверку орфографии Для кода, специальных терминов или когда проверка мешает
Не задан Наследует поведение родителя Когда нужно глобальное управление проверкой

Важные технические детали:

  • Работает только для редактируемых элементов (с contenteditable="true" или полей формы)
  • Поддержка и качество проверки зависят от браузера
  • Не влияет на нередактируемый контент
  • Можно задавать глобально для всей страницы в <html>

Пример с динамическим управлением:

<article id="editable-article" contenteditable="true"> <h2>Статья с переключаемой проверкой</h2> <p>Редактируйте этот текст и попробуйте переключать проверку орфографии.</p> </article> <button onclick="document.getElementById('editable-article').spellcheck=true"> Включить проверку </button> <button onclick="document.getElementById('editable-article').spellcheck=false"> Выключить проверку </button>

Ограничения: Браузеры проверяют орфографию только для текста на известных им языках. Язык определяется атрибутом lang или настройками браузера.

Рекомендации по использованию:

  • Для многоязычного контента указывайте язык с помощью атрибута lang
  • Не используйте для элементов с кодом, специальными терминами или именами
  • Учитывайте, что пользователи могут иметь свои настройки проверки орфографии
  • В CMS и редакторах лучше предоставить пользователю выбор включать проверку или нет

Пример с выбором языка проверки:

<article id="multi-lang-article" contenteditable="true" spellcheck="true" lang="en"> <h2>Multilingual content</h2> <p>This text will be checked as English.</p> <p lang="fr">Ce texte sera vérifié en français.</p> <p lang="de">Dieser Text wird auf Deutsch geprüft.</p> </article> <select onchange="document.getElementById('multi-lang-article').lang=this.value"> <option value="en">English</option> <option value="fr">Français</option> <option value="de">Deutsch</option> </select>

Совет: Для профессиональных редакторов контента рассмотрите использование специализированных библиотек проверки орфографии, таких как Typo.js или собственные решения на основе API.

Поддержка браузерами:

Браузер Поддержка Примечания
Chrome Да Использует встроенную проверку орфографии
Firefox Да Можно управлять через about:config
Safari Да Использует системную проверку macOS
Edge Да На основе Chromium

Примечание: Хотя атрибут spellcheck является частью спецификации HTML5, его реализация и качество проверки могут значительно отличаться в разных браузерах и операционных системах.