Как отформатировать текст в Интернет по ширине с переносами

от автора

Большинство сайтов в интернете используют выравнивание текста влево и не используют переносы. Дизайнеры утверждают, что возможности браузеров по форматированию текста далеки от возможностей настольных издательских систем в плане изменения расстояния между словами, между отдельными символами в словах, расстановке переносов и т. д. Все выглядит ужасно, поэтому рекомендуется никогда не использовать выравнивание текста по ширине в Web.

Однако, я решил попробовать читать новостные сайты, habr или lib.ru с «книжным форматированием».

Для внесения изменений в сторонние web-страницы я использую расширение браузера Tampermonkey. Вот скрипт, который меняет форматирование текста на Хабре и других сайтах, которые нужно перечислить в директивах @match:

// ==UserScript== // @name         P-justify-hyphens // @version      0.1 // @description  try to take over the world! // @match        https://www.rbc.ru/* // @match        https://lenta.ru/* // @match        https://habr.com/* // ==/UserScript==  (function() {     'use strict';      var styles = `     p {         -webkit-hyphens: auto;         -moz-hyphens: auto;         -ms-hyphens: auto;         text-align: justify;     } `;      var styleSheet = document.createElement("style");     styleSheet.innerText = styles;     document.head.appendChild(styleSheet);      document.documentElement.setAttribute("lang", 'ru'); })();

На lib.ru есть формат вывода книг под названием «Fine HTML». Чтобы его можно было читать, кроме выравнивания абзацев и переносов ему нужны поля. Поэтому для lib.ru я сделал отдельный скрипт:

// ==UserScript== // @name         lib.ru-justify-hyphens // @version      0.1 // @description  try to take over the world! // @match        http://lib.ru/*.html // ==/UserScript==  (function() {     'use strict';      var styles = `     body {         -moz-hyphens: auto;         text-align: justify;         font-size: 28;         margin-left:500px;         margin-right:500px;     } `;      var styleSheet = document.createElement("style");     styleSheet.innerText = styles;     document.head.appendChild(styleSheet);      document.documentElement.setAttribute("lang", 'ru'); })();


ссылка на оригинал статьи https://habr.com/ru/post/661689/


Комментарии

Добавить комментарий

Ваш адрес email не будет опубликован. Обязательные поля помечены *