LINUX.ORG.RU

ESI|100% масштаб|масштабирование


2

1

Сравнение применения ESI со 100%-м масштабом и доведением размера шрифта с помощью масштабирования таким образом, чтобы он примерно совпадал с ESI. Во многих случаях либо плывёт вёрстка сайта, либо количество информации уменьшается настолько, что им пользоваться невозможно. Моя задача заключается в адаптации сайтов под приемлемый для пользователя базовый размер шрифта (16 пикселей, но на многих сайтах работает и с большим значением).

ПС: изображение пришлось немного сжать по высоте. Проект реализован для веба с помощью допиленного Stylish'а (в Chromium-версии немного увеличен функционал — можно сразу настраивать стили из popup'а), надеюсь, временно, а также из специального css-шаблона+костыли к нему, если сайт начинает отображаться некорректно с ним.

Также есть простенькая реализация для Windows (reg-файлы с необходимыми метриками + батник для изменения логического разрешения).

Попробовать на себе (особенно, если вы имеете проблемы со зрением/осанкой/много времени проводите за компьютером) можно на моём сайте.

Плагины выложены в магазин приложений Оперы и Хрома, для FF пока нет. Качать с сайта

Для владельцев телефонов — вы можете пользоваться версией для FF.

Буду рад вашим отзывам ☻

>>> Просмотр (3443x5120, 2380 Kb)



Проверено: JB ()
Последнее исправление: JB (всего исправлений: 6)

Не пойму, что это такое? Поставил расширение по ссылке, ничего не изменилось.

Deleted
()
Ответ на: комментарий от Deleted

Сам плагин - доработанный Stylish, Менеджер пользовательских стилей. Стили ищутся с помощью команды «найти ESI стили для этого сайта».

Dreamject
() автор топика
Ответ на: комментарий от tensai_cirno

Что такое ESI?

Eyes-saving interface, или просто „безопасный интерфейс“, направленный на сохранение (и улучшения, относительно „обычного“ интерфейса) здоровья пользователя. Защита от миопии, улучшение осанки и читабельности.

не можешь в png.

Я могу, ЛОР — нет.

Dreamject
() автор топика
Ответ на: комментарий от Dreamject

Eyes-saving interface, или просто „безопасный интерфейс“, направленный на сохранение (и улучшения, относительно „обычного“ интерфейса) здоровья пользователя. Защита от миопии, улучшение осанки и читабельности.

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

dogbert ★★★★★
()
Ответ на: комментарий от dogbert

Добро пожаловать в масштабирование середины нулевых.

Как будет выглядить страница после масштабирования, зависит от разработчика. Из-за определённых факторов, при логическом разрешении ~1366х768 ничего не будет нормально выглядить при масштабе, скажем, ≥125%.

Dreamject
() автор топика

Восьмерочка? Если да, то в топку.

w1nner ★★★★★
()
Ответ на: комментарий от actionless

Это не совсем то, текст может начать выходить за блоки (попробуй вк масштабировать таким образом). Ещё возникают проблемы, исходящие из слишком большой относительной разницы в размерах шрифтов. Если на сайте используется 11пикселей для подписей, 16 — для основного текста, и 24 — для заголовков, то твоё расстояние до моника будет таким, чтобы ты 11-пиксельный текст воспринимал удобно. Если же его масштабировать, скажем, до 16 пикселей, то результат будет неюзабелен (да ещё с 1.5 интерлиньяжом). Стили изначально выглядят примерно как:

html {font-size: /*[[fc]]*/ !important; } /16px by default

		:not(esiexclude) {font-size: inherit !important; }

	html {line-height: /*[[lh]]*/ !important; } 136% by default

		:not(esiexclude) {line-height: inherit !important; }

	esi-text-block {width: xrem !important; height: yrem !important; }	

	h1 {font-size: 1.7rem !important; font-size: calc(1.43rem + 8px) !important;

			line-height: 120% !important; line-height: calc(1.43rem * 1.052 + 8px * 1.052 + 5px) !important; }

	h2 {font-size: 1.4rem !important; font-size: calc(1.1rem + 3px) !important;

			line-height: 125% !important; line-height: calc(1.1rem * 1.052 + 1.052 * 3px + 5px) !important; }

	h3 {font-size: 1.17rem !important; font-size: calc(1.06rem + 2px) !important;

			line-height: 130% !important; line-height: calc(1.06rem * 1.052 + 2px * 1.052 + 5px) !important; }

	sup, sub{font-size: 0.68rem !important; font-size: calc(1rem - 5px) !important; line-height: 1rem !important; }

Т.е. места для мелких шрифтов (кроме над-подстрочных и может чего ещё) не остаётся, размер увеличивается не только пропорционально, но и с применением абсолютных величин, можно контролировать интерлиньяж и т.д. Но если мелкие шрифты так нужны, можно что-то вроде
	small, xx-small, x-small, smaller, h5, h6 {font-size: 0.9rem !important; font-size: calc(0.97rem - 1px) !important; }

Dreamject
() автор топика

Ололо, Толян в треде, берегите пуканы!

garik_keghen ★★★★★
()
Ответ на: комментарий от Dreamject

можешь, добавить как четвертый столбик в сравнение, и еще это до кучи: http://i.imgur.com/Kq52Jos.png

но моя точка в том, что писать/искать css-ку для каждого сайта слегка морочно

actionless ★★★★★
()
Последнее исправление: actionless (всего исправлений: 2)
Ответ на: комментарий от actionless

Метод задачи минимального размера шрифта это вообще бред, по сути. Если сайт изначально использует в интерфейсы исключительно маленькие шрифты (10-11-13 пикселей, как вк, фэйсбук), задав, к примеру 14, пропадут заголовки, а во-вторых всё поплывёт (если сайт на 11 пикселей заточен, то он с 14 не должен работать). Но сравнение ручной переработки и тупого увеличения коэффициента можно увидеть здесь

Dreamject
() автор топика
Ответ на: комментарий от actionless

писать/искать css-ку для каждого сайта слегка морочно

Времени у меня уходит довольно много, но это того стоит. Защита зрения, всё такое. В дальнейшем хочу сделать плагин, который автоматом будет загружать стили и иметь возможность настраивать их. А поиск сейчас к минимуму сведён.

Dreamject
() автор топика
Ответ на: комментарий от Dreamject

можно увидеть здесь

нельзя там ничего увидеть, сделай такую же картинку как эта в галерее, просто добавь еще два столбика чтобы можно было оценить разницу более объективно

actionless ★★★★★
()
Последнее исправление: actionless (всего исправлений: 2)
Ответ на: комментарий от actionless

нельзя там ничего увидеть, сделай такую же картинку как эта в галерее

Там глюки поменьше, также сделать не айс. Выделил просто красным цветом.

Dreamject
() автор топика
Ответ на: комментарий от Dreamject

к тому же, по ссылке что ты дал нет ни nosquint ни нативного minimum font size

выглядит так, будто ты специально сравниваешь свой продукт с заведомо проигрышными вариантами

actionless ★★★★★
()
Ответ на: комментарий от actionless

нет ни nosquint ни нативного minimum font size

В сравнении использовался „Zoom Page“, который работает также как и NoSquint, только несколько лучше (в плане интерфейса). А минималку задавать ещё хуже применения коэффициента к шрифтам.

Dreamject
() автор топика

да у вас топовое железо должно быть, раз всякия плагины, еще и к хромиуму, делают работу только комфортнее.

gribf
()
Ответ на: комментарий от gribf

Почему многие так к железу привязаны? Чтобы комфортно сидеть за компьютером со «стандартным» подходом к выводу инфы, у пользователя должна быть круглая спина, испорченное зрение, сон и куча всего.

Dreamject
() автор топика
Ответ на: комментарий от Dreamject

круглая спина

нет

испорченное зрение

опять нет

а вот со сном проблемы. но я имел в виду хромиум с плагинами, который дико тормозит и глючит при 5 вкладках.

gribf
()
Последнее исправление: gribf (всего исправлений: 3)
Ответ на: комментарий от gribf

нет
опять нет

Искренне рад)

со сном проблемы

Есть всякие способы борьбы со бессоницей, но если интерфейса касаться — надо по возможности исключить белый фон, тёплые цвета использовать (можно хотя бы цветовую температуру понизить).

хромиум с плагинами, который дико тормозит и глючит при 5 вкладках

Разные плагины бывают.

Dreamject
() автор топика

а запостил бы скрин с гентой и этой шляпой - не удалили бы.

smilessss ★★★★★
()
Ответ на: комментарий от Dreamject

тёплые цвета использовать (можно хотя бы цветовую температуру понизить)

Ты бы хоть матчасть почитал, прежде чем вбрасывать.

peregrine ★★★★★
()
Ответ на: комментарий от Dreamject

тёплые цвета

люблю теплоту и ламповость)

Разные плагины бывают

а хромиум один (хоть вы его ЯндексБраузером назовите, хоть мейлру браузером)

gribf
()

Любитель Шария детектед, все в машину!

FiXer ★★☆☆☆
()
Ответ на: комментарий от DeadEye

Все равно не взлетит

Проект изначально для себя, семьи и друзей делался. С первоначальной задачей справляется.

слишком сложно для конечного пользователя.

Над этим тоже работаю...

Dreamject
() автор топика
Ответ на: комментарий от Dreamject

тоже работаю

Пока не будет в браузере по дефолту и вместо стартовой страницы огромное объявление «ВЫ МОЖЕТЕ ЮЗАТЬ ESI», не взлетит.

DeadEye ★★★★★
()
Ответ на: комментарий от DeadEye

Особенности вывода информации не должны портить здоровье и восприятие пользователя. Это ведь очевидно.

Dreamject
() автор топика
Ответ на: комментарий от kinik

Давно хотел эту вещь, ибо на 15" 1920х1080 веб мелковат.

для FF есть плуг «Zoom Page»
удовлетворяет намного больше потребностей чем поделие ТСа

q11q11 ★★★★★
()
Ответ на: комментарий от Dreamject

Пользователю тоже можно рассказать, что Linux/Jabber/PA/png офигенно. Но он ничего не будет делать ради улучшения. Угадай, почему.

DeadEye ★★★★★
()
Ответ на: комментарий от q11q11

для FF есть плуг «Zoom Page»
удовлетворяет намного больше потребностей чем поделие ТСа

Плагин хорош в плане того, что можно задать свои уровни масштабирования. Иногда алгоритм «А давайте просто умножим шрифты в x раз, а блоки трогать не будем» работает нормально, но не на самых массовых сайтах.

Dreamject
() автор топика
Ответ на: комментарий от q11q11

но не на самых массовых сайтах.

Да и сам подход типа (давайте ничего не будем пересчитывать, а просто класть во все блюда в 1.5 раза больше соли)... Даже не знаю.

Dreamject
() автор топика
Ответ на: комментарий от DeadEye

Пока компьютер работает нормально, не тормозит — можно спокойно жить. Начнёт ломаться — обращаются за помощью.

Но если у большинства пользователей (особенно детей) значительно портится здоровье и хуже усваивается информация, надо иметь чуточку уважения к себе и родным, чтобы с этим разобраться.

Dreamject
() автор топика
Ответ на: комментарий от Dreamject

обращаются за помощью

А потом: «Ой, а почему у меня кнопочка выглядит по-другому?!». Ага, ага, знаем.

значительно портится

Хочешь их вылечить - расскажи им про печатные машинки и то, что они автономнее компов.

DeadEye ★★★★★
()
Ответ на: комментарий от DeadEye

Хочешь их вылечить - расскажи им про печатные машинки и то, что они автономнее компов.

Это проблема образа мышления уже, когда не хотят что-то до ума доводить, либо предлагают нерабоче-непродуманные решения. Например, часто говорят «Отберите у детей компьютер/телефон/займитесь спортом/бросьте курить», а рабочую инструкцию, как создать условия для всего этого, чем заменить, не дают (да и не могут).

Dreamject
() автор топика
Вы не можете добавлять комментарии в эту тему. Тема перемещена в архив.