Не тривиальная задача

[gordi]

Давно интересует тема пропорционального изменения размера шрифта при переходе с одного разрешения на другое.

Все должно быть на автомате без участия пользовотеля.

Увеличивать/уменьшать размер шрифта средствами браузера не предлагать.

Линк, где нечто подобное реализовано.

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

Изменнение размера шрифта происходит и при простом изменении размеров окна браузера.

Во всех случаях важны пропроции.

Все колонки должны иметь плавающую ширину.

Реализация на библиотеке jQuery.

Вожможно ли обойтись без jQuery и пример реализации на обычном JavaScript.

Есть желающие?

Edited June 16, 2009 by gordi

[s0rr0w]

Есть желающие?

100$ в час. Есть желание?

[gordi]

100$ в час.

Жаль, что всё, всё чаще упирается в бабло

[Searcher]

Можно использовать идею адаптивной разметки, но не менять позиции элементов, а применять разные стили шрифтов.

http://designformasters.info/posts/adaptive-layout/

[gordi]

Можно использовать идею адаптивной разметки...

Известное решение, но в целом не подходит по ряду причин.

[SelenIT]

Унаследовать все шрифты em-ами от шрифта body, и сделать что-то вроде

onload = onresize = function() { document.body.style.fontSize = parseInt(document.body.offsetWidth/80) + 'px' }

не вариант?

[gordi]

Унаследовать все шрифты...

Обратился, собственно потому, что в JS, мало чего понимаю

Хотелось бы конкретная реализация, скажем на основе второго моего примера.

[SelenIT]

Унаследовать шрифты я имел в виду в CSS. Тогда, мне кажется, все необходимое от JS-части сведется к предложенной строчке (ну, может, где-то поправки для браузеров понадобятся)...

[gordi]

Унаследовать шрифты...

А о каком примере идет речь?

[AjiTae]

Имхо мракобесие всё это.) Понимаю ещё изменять размер конкретно в зависимости от разрешения. А вот в зависимости от размера рабочей области - совершенно неудобная хрень.

[SelenIT]

Понимаю ещё изменять размер конкретно в зависимости от разрешения.

А по-моему, как раз разрешение не должно волновать вебмастера. Разворачивать окно браузера на весь экран или на пол-экрана, занимать пол-окна полезными и бесполезными сайдбарами и т.п. — святое неотъемлемое право пользователя, и создавать ему любые препятствия в этом — прямое и грубое нарушение статьи 19 Всеобщей декларации прав человека (о праве на информацию. Так что подстраивать удобство восприятия имеет смысл (если вообще имеет) исключительно под рабочую область, а разрешение — сугубо для статистики.

[gordi]

Имхо мракобесие всё это...

А так ли все просто?

Возьмите любую страницу сделанную по классическим образцам, к примеру стандартные три колонки, центральная часть ограничена по min/nax-width, а боковые колонки имеют фиксированную ширину.

Все заточено под дефолт 1024*768, теперь посмотрите ее же на разрешении, скажем 1600*900.

Думаю вам понравится.

И текст, даже если для body выставить font-size:100%; читать будет весьма затруднительно.

SelenIT

...прямое и грубое нарушение статьи 19 Всеобщей декларации...

А вот это, действительно смешно

Если иметь ввиду разночтения визуальной состовляющей в разных браузерах.

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

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

Иногда, это перевешивает все мнимые минусы.

[SelenIT]

В общем, насколько я понимаю, аналог решения на JQ для того же примера (сорри, недостаточно внимательно смотрел — шрифты там уже наследуются как надо) будет выглядеть как-то так:

var proportion = 960/13; /* дефолтная ширина body в em-ах */
onload = onresize = function() { document.body.style.fontSize = parseInt(document.body.offsetWidth/proportion) + 'px' }

Еще лучше вместо onload повесить это дело на кроссбраузерный onDOMContentLoaded (можно выдрать с того же JQ или взять любой другой, начиная с классики). А onresize нужен в любом случае.

Edited June 16, 2009 by SelenIT

[gordi]

В общем, насколько я понимаю, аналог решения на JQ...

Спасибо.

Но, как уже писал в JS полный нуль

Не могли бы вы по вашему предложению, вложить конкретный пример?

[AjiTae]

А по-моему, как раз разрешение не должно волновать вебмастера. Разворачивать окно браузера на весь экран или на пол-экрана, занимать пол-окна полезными и бесполезными сайдбарами и т.п. — святое неотъемлемое право пользователя, и создавать ему любые препятствия в этом — прямое и грубое нарушение статьи 19 Всеобщей декларации прав человека (о праве на информацию. Так что подстраивать удобство восприятия имеет смысл (если вообще имеет) исключительно под рабочую область, а разрешение — сугубо для статистики.

А так ли все просто?

Возьмите любую страницу сделанную по классическим образцам, к примеру стандартные три колонки, центральная часть ограничена по min/nax-width, а боковые колонки имеют фиксированную ширину.

Все заточено под дефолт 1024*768, теперь посмотрите ее же на разрешении, скажем 1600*900.

Думаю вам понравится.

И текст, даже если для body выставить font-size:100%; читать будет весьма затруднительно.

Мде в общем всё ислючительно субъективно.)

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

Заточку же под какое-то конкретное разрешении считаю убожеством и бездарностью.)

У самого большое разрешение стоит, но добрый ctrl+'+' выручает в особо запущенных случаях)

Edited June 16, 2009 by AjiTae

[gordi]

Объясняю свою позицию:

Никто не говорит, что при простом уменьшении размеров окна браузера, шрифт может становиться не читаемым.

Можно в таком случае поставить ограничение на минимальный размер шрифта.

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

У самого большое разрешение стоит, но добрый ctrl+'+' выручает в особо запущенных случаях)

Вы предлагает пологаться на средства предоставляемые браузерами.

Иногда, можно получить полный не адекват, в той же OPERA с ее мастабированием всего и вся, очень часто пользователю это совершенно не нужно.

Да и в других браузерах реализация не лучше.

[SelenIT]

gordi, это для Вашего примера было — вместо всего того кода на JQ. Вот сам поменял, добавил DOMContentLoaded для понимающих браузеров (получается, в FF/Oper'е 9+ срабатывает дважды, по загрузке DOM и по полной загрузке, но, имхо, большой беды в этом нет, скорее, наоборот, подстраховка.

[s0rr0w]

AjiTae, не стоит уподобляться убогим. Убирайте подпись, пока не были приняты меры.

[gordi]

gordi, это для Вашего примера было — вместо всего того кода на JQ.

Большое спасибо.

Просто конфетка по размеру скрипта

Еще раз благодарю.