Недавно в посте «Зум шрифта и верстка» автор выразил обеспокоенность тем, что происходит, когда меняется размер шрифта в колонке, ширина которой фиксирована в пикселях. Хотя сейчас принято зумить всю страницу, но я не уверен, что это всегда и вообще правильно — пиксели страницы перестают соответствовать пикселям экрана, происходит нездоровое умножение сущностей.
Кроме того, в своей практике я часто сталкивался с желательностью распределить текст по всей ширине окна без увеличения его кегля — чтобы уместить на экране побольше текста от одного обращения к прокрутке до другого.
Из этих соображений родилось такое возможное решение: ширину колонки текста фиксируем в
Для этого воспользуемся плагином jQuery UI Resizable. Подключаем к странице файлы
Колонка задаётся так:
В своём файле стилей пишем что-нибудь вроде:
А в своём файле скриптов:
Получаем колонку, которая по умолчанию имеет некую принятую ширину в символах, но пользователь может делать с ней, что его душе угодно (в рамках мыслимых потребностей).
UPD: По просьбам общественности — демо.
Кроме того, в своей практике я часто сталкивался с желательностью распределить текст по всей ширине окна без увеличения его кегля — чтобы уместить на экране побольше текста от одного обращения к прокрутке до другого.
Из этих соображений родилось такое возможное решение: ширину колонки текста фиксируем в
em
'ах, чтобы по умолчанию строчка содержала какое-то считающееся удобочитаемым количество символов (относительно конкретного количества полиграфисты и Web-дизайнеры так и не определились, но не суть), а также дополняем её интерфейсом для настройки ширины. Например, чтобы можно было тащить правую границу колонки, а двойным кликом по ней попеременно распахивать на 100 % (и тогда ширина будет определяться шириной окна браузера) или возвращать первоначальную ширину.Для этого воспользуемся плагином jQuery UI Resizable. Подключаем к странице файлы
jquery-ui-1.8.12.custom.css
, jquery-1.5.1.min.js
и jquery-ui-1.8.12.custom.css
, а также свои — style.css
и onReady.js
.Колонка задаётся так:
<div id="content" class="ui-widget-content">Текст</div>
В своём файле стилей пишем что-нибудь вроде:
div#content{
width: 45em;
margin-left: auto;
margin-right: auto;
padding: 1ex 1em;
border-right: thin dashed #444444;
}
А в своём файле скриптов:
$(
function(){
$("#content").attr("start_width", $("#content").width()+"px");
$("#content").resizable({
handles: "e",
start: function(){
$("#content").removeAttr("expanded");
}
});
$("#content div.ui-resizable-handle.ui-resizable-e").dblclick(
function(){
if($("#content").attr("expanded"))
$("#content").width($("#content").attr("start_width")).removeAttr("expanded");
else
$("#content").width("auto").attr("expanded", "expanded");
}
);
}
);
Получаем колонку, которая по умолчанию имеет некую принятую ширину в символах, но пользователь может делать с ней, что его душе угодно (в рамках мыслимых потребностей).
UPD: По просьбам общественности — демо.