Построй свой режим чтения — сведи страницу к её контенту

15 мая 2026 · автор JustZix Team

У браузеров есть режим чтения, но он непостоянен — на одной странице не включается, на другой обрезает слишком много, и его нельзя настроить. В JustZix ты строишь свой: кнопка-действие, которая сводит страницу к самой статье, по твоим правилам.

Почему свой

Встроенный режим чтения — чёрный ящик. Ты не знаешь, когда он появляется, не можешь повлиять на то, что он считает «контентом», не можешь менять типографику. Твоё правило — это дюжина строк, которые ты понимаешь и адаптируешь под свой вкус.

Лучше как действие КНОПКА

Ты редко хочешь режим чтения активным автоматически — ты хочешь его по запросу. Это делает его идеальным кандидатом для действия КНОПКА на панели действий JustZix. Помечай его, скажем, READ, с кодом, выполняемым при клике:

const art = document.querySelector(
  'article, [role="main"], main, .entry-content, .post-content'
);
if (!art) { alert('Контейнер контента не найден.'); }
else {
  document.body.replaceChildren(art);
  document.body.style.cssText =
    'max-width:70ch;margin:40px auto;padding:0 24px;' +
    'font:19px/1.7 Georgia, serif;background:#fbfaf7;color:#222';
}

Как это работает

Выбор контейнера контента

querySelector получает список кандидатов от самого до наименее надёжного: <article>, элемент с role="main", <main>, затем частые CMS-классы. Берёт первый существующий. Для страницы, где ничего не совпадает, добавь её селектор в начало списка.

replaceChildren

document.body.replaceChildren(art) выбрасывает всё из <body> и помещает туда только контейнер статьи. Один вызов вместо цикла, удаляющего элемент за элементом.

Типографика

max-width:70ch даёт строку длиной примерно 70 символов — оптимум читаемости. Остальное — отступ, шрифт с засечками и тёплый фон. Меняй на свой вкус.

Вариант только-CSS

Если у страницы есть чистый <article>, можешь пропустить JS — на вкладке CSS правила:

body > *:not(:has(article)) { display: none !important; }
article {
  max-width: 70ch !important;
  margin: 40px auto !important;
  font-size: 19px !important;
  line-height: 1.7 !important;
}

CSS-вариант менее надёжен (зависит от структуры страницы), но не трогает DOM — легко отключить.

Ловушки

Изображения в контенте остаются. Они дети статьи, поэтому выживают — что хорошо.
replaceChildren односторонен. После сведения ты возвращаешься к нормальной странице перезагрузкой (F5). Это приемлемо для действия по запросу.
Скрипты страницы могут возмутиться. Часть кода страницы рассчитывает на элементы, которые мы удалили, и бросит ошибку в консоль. Контент это не ломает.

Смотри также

Примеры — готовые сниппеты для действий и правил
Укроти sticky-элементы — более лёгкий способ проредить страницу
Действие КНОПКА — тип действия, на котором ты это строишь

Установи JustZix — и читай статьи без остальной части страницы.

Оцени эту статью

Оценок пока нет — оцени первым.