Дружественная колонка текста

Недавно в посте «Зум шрифта и верстка» автор выразил обеспокоенность тем, что происходит, когда меняется размер шрифта в колонке, ширина которой фиксирована в пикселях. Хотя сейчас принято зумить всю страницу, но я не уверен, что это всегда и вообще правильно — пиксели страницы перестают соответствовать пикселям экрана, происходит нездоровое умножение сущностей.

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

Из этих соображений родилось такое возможное решение: ширину колонки текста фиксируем в 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: По просьбам общественности — демо.