Как стать автором
Обновить

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

Время на прочтение2 мин
Количество просмотров3.4K

Большинство сайтов в интернете используют выравнивание текста влево и не используют переносы. Дизайнеры утверждают, что возможности браузеров по форматированию текста далеки от возможностей настольных издательских систем в плане изменения расстояния между словами, между отдельными символами в словах, расстановке переносов и т. д. Все выглядит ужасно, поэтому рекомендуется никогда не использовать выравнивание текста по ширине в 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');
})();

Теги:
Хабы:
Всего голосов 3: ↑3 и ↓0+3
Комментарии14

Публикации

Истории

Работа

Веб дизайнер
37 вакансий

Ближайшие события