Большинство сайтов в интернете используют выравнивание текста влево и не используют переносы. Дизайнеры утверждают, что возможности браузеров по форматированию текста далеки от возможностей настольных издательских систем в плане изменения расстояния между словами, между отдельными символами в словах, расстановке переносов и т. д. Все выглядит ужасно, поэтому рекомендуется никогда не использовать выравнивание текста по ширине в 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');
})();Комментарии (14)
F1eex
19.04.2022 17:06Имхо, выравнивание по ширине и все эти переносы - это все какое-то устаревшее. Перенос рубит слово на двое и заставляет "разрывать внимание" переходя глазами со конца строки в начало следующей. А выравнивание по ширине делает абзац сливающимся, легче сбиться со строки. Неровный правый край текста как раз избавляет от этого. Поэтому мне уже с экрана читать веб стало приятнее, чем бумажные книги, где как раз текст выравнен с обеих сторон. И если мне сегодня пришлось бы что-то много записывать в тетрадке, я б не переносил слова, а выравнивал свою писанину только слева.
runaway
19.04.2022 17:33+2А рваная и драная правая сторона текста вас устраивает? Переносы - да, согласен, ломать слово через колено не надо. Но выравнивание нужно. Точнее, опция выравнивания в браузерах нужна. Пусть каждый настроит так, как ему удобнее. Пусть хоть по центру выровняет, прости господи.
А для того, чтобы текст не сливался в кашу, умные люди давным-давно придумали абзацы.
F1eex
19.04.2022 17:43+1А рваная и драная правая сторона текста вас устраивает?
Да, меня устраивает. Я благодаря ей быстрее нахожу строку от прочтения которой отвлекся.
kichrot
19.04.2022 18:11Здесь уже высказали правомерное сомнение об удобстве и целесообразности выравнивания текста по ширине на странице. Но, это дело вкуса.
Меня интересует иное - реализация механизма автором скрипта.
Явно, что предложенный скрипт будет тормозным и не будет обрабатывать динамически создаваемое содержимое. Также явно не хватает фильтра необрабатываемых элементов.
Набросал для примера автору свой вариант скрипта, лишенный указанных недостатков. Но, не проверял. Хотя по идее должен работать:
// ==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/* // @run-at document-start // @grant unsafeWindow // ==/UserScript== (function () { 'use strict'; var css = document.createElement('style'); css.innerHTML += [ `*:not(img):not(svg):not([class*=\"icon\"]):not([class*=\"ico\"]):not([class*=\"button\"]):not([class*=mjx])`+ `:not([class*=vjs]):not([class*=fa]):not([class*=ms-Button-icon]):not([class*=bb])`+ `:not([class*=icon]):not([class*=ll]):not(i):not([role*=button]):not([type*=button]):not([class*=btn])`+ `:not([class*=button]):not([class*=button] span),`+ `[class*="text"]:not([class*=fa]) {`, `-moz-hyphens: auto !important;`, `-ms-hyphens: auto !important;`, `-webkit-hyphens: auto !important;`, `text-align: justify !important;`, `}` ].join("\n"); document.documentElement.appendChild(css); }) ();
PereslavlFoto
Честно говоря, книжное форматирование — это растяжение пробелов + переменная ширина одинаковых букв + переносы + слова, подобранные автором и редактором в таком порядке, чтобы переносов было не больше двух подряд + висячая пунктуация.
Когда браузер этому научится, все издательства будут верстать в браузере.
NickyX3
Казалось бы, при чем тут автор и редактор, если все это в программах верстки и так работает, для любых размеров текта по ширине и размеру кегля? Автоматизированные переносы в них работают 100500 лет как. И да, они в основном используют растягивание пробелов, но совершенно не "переменную ширина одинаковых букв". Оно не идеально, но при явных огрехах таких систем ручные мягкие переносы делает верстальщик книги, но никак не редактор с автором. Кстати мягкие переносы есть и в web, это html-entity ­, которые, впрочем, тоже можно расставлять автоматически на основе морфологии
PereslavlFoto
Потому что автоматизированные переносы работают плохо, создают больше 2 переносов подряд. А растягивать пробелы очень опасно: может получиться плохой результат. Поэтому-то и используется микротипографика, которая позволяет масштабировать все буквы по ширине.
Задача не в том, чтобы расставить переносы, это и автомат умеет. Задача — избавиться от переносов.
NickyX3
Вы давно в программах верстки работали? Да пусть даже не совсем верстки, а к примеру Corel Draw? Автоматизированные переносы в них настраиваются, в том числе, чтобы не делать более указанного числа переносов подряд, минимальных висячек, минимальной длины слова и все такое.
PereslavlFoto
Вы лишь подтверждаете, что сам браузер этого не делает.
NickyX3
Сам браузер в принципе мог бы это делать, но нет стандарта и некоторая сложность с морфологией (поддержка языков будет занимать порядочно места на диске, в пре-пресс пакетах это решается словарями, которые инсталируются отдельно)
juunitaki Автор
Вот так ваш комментарий выглядит в браузере с переносами и выравниванием по ширине.