Улучшение читабельности текста и резкости изображений
-
Периодически на форуме поднимается вопрос о плохом рендеринге шрифтов (размытые, бледные и слишком тонкие) и размытых картинках в VIVALDI.
Это касается не только этого браузера, но и всех браузеров на основе движка браузера CHROMIUM.
Особенно большие неудобства это доставляет людям с ослабленным зрением, как у меня.
Выкладываю свой userscript для использования в Tampermonkey, который в какой то мере улучшает ситуацию.// ==UserScript== // @name Correction of readability of text and contrast of images in Chrome // @name:ru Исправление удобочитаемости текста и контрастности изображений в Chrome // @description Исправление удобочитаемости текста и контрастности изображений в Chrome // @author kichrot // @match *://*/* // @exclude *://192.168.* // @run-at document-start // @grant unsafeWindow // @version 0.4.4 // ==/UserScript== var weight = 0; /* The variable changes the weight of the font/Переменная изменяет толщину шрифта */ var weight_2 = 0.01; /* The variable changes the weight of the font (2 method)/Переменная изменяет толщину шрифта (2 метод) */ var weight_blur = 0.6; /* The variable changes the weight and blurs the borders of the font/Переменная изменяет толщину и размывает границы шрифта */ var lightens_font_color = 0.2; /* Variable lightens the color of the font/Переменная осветляет цвет шрифта*/ var unit = 'px'; /* The variable assigns the unit of measure/Переменная присваивает единицу измерения */ /* px | em | ex | rem | vh | vw */ var font = 'Helvetica'; /* Variable assigns the font/Переменная назначает шрифт */ /* Verdana | Arial | Helvetica | HelveticaNeueCyr | Tahoma |Lato| Noto Sans | Open Sans | Manrope | Roboto | Montserrat */ (function () { 'use strict'; var css = document.createElement('style'); css.innerHTML += [`* {`, `-webkit-text-fill-color:currentColor !important;`, `text-shadow:`+ `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень наверх и влево */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} rgba(250,250,250,${lightens_font_color}) /*белая тень вниз и вправо */,`+ `${weight}${unit} ${weight}${unit} ${weight_blur}${unit} currentColor/*тёмная тень вверх и вправо*/,`+ `-${weight}${unit} -${weight}${unit} ${weight_blur}${unit} currentColor !important;/*тёмная тень вниз и влево*/`, `-webkit-text-stroke-width: ${weight_2}${unit} !important;`, `-webkit-font-smoothing: subpixel-antialiased /*antialiased*/ !important;`, `text-rendering: geometricPrecision !important;`, `font-optical-sizing: auto !important;`, `}`, `*: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*=DPvwYc]):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]) {`, `font-family: ${font} !important;`, `}`, `img {`, `image-rendering: -webkit-optimize-contrast !important;`, `}` ].join("\n"); document.documentElement.appendChild(css); }) ();
Для использования, этот скрипт следует установить в Tampermonkey.
В скрипте есть переменные, значения которых влияют на отображение текста. Можно поэкспериментировать и попробовать подобрать под свое зрение.Скрипт обновлен 05.04.22г.
-
@tsvetkov1964 said in Улучшение читабельности текста и резкости изображений:
Всё наоборот поплыло
Есть такое.
Попробуйте закомментировать двумя слэшами 29 строку:// `-webkit-backface-visibility: hidden;`,
И дальше экспериментируйте с переменными.
-
@sedative29rus said in Улучшение читабельности текста и резкости изображений:
@tsvetkov1964 said in Улучшение читабельности текста и резкости изображений:
Всё наоборот поплыло
Есть такое.
Попробуйте закомментировать двумя слэшами 29 строку:// `-webkit-backface-visibility: hidden;`,
И дальше экспериментируйте с переменными.
Действительно. в подавляющем большинстве случаев этот параметр не нужен. Но, в некоторых случаях он удаляет артефакты, в виде двоения. которые появляются при 3-d трансформации шрифта, применяемой на некоторых страницах.
Лично у меня этот параметр к описанным выше негативным эффектам не приводит. Видимо зависит от иных конкретных условий по железу и ПО, в каждом индивидуальном случае. -
@tsvetkov1964 said in Улучшение читабельности текста и резкости изображений:
Вы, знаете, я решаю проблему со шрифтами при помощи ClearType и расширения Chrome Font Rendering Enhancer.
Для настройки ClearType попробуйте использовать утилиту Better ClearType Tuner
Расширение Chrome Font Rendering Enhancer использует CSS параметр -webkit-text-stroke-width, который создает артефакты в виде двоения шрифта, которые лично мне мешают.
А, в общем, вольному воля, каждый решает свои проблемы по своему.
-
Обновил скрипт в первом посте темы.