Friendly text column

Recently, in a post titled “Font Zoom and Layout,” the author expressed concern about what happens when the font size changes in a column whose width is fixed in pixels. Although it’s now customary to zoom the entire page, I’m not sure that this is always and generally correct - the page pixels no longer correspond to the screen pixels, an unhealthy multiplication of entities occurs.

In addition, in my practice, I often came across the desirability of distributing text across the entire width of the window without increasing its size - to fit on the screen more text from one call to scroll to another.

From these considerations, such a possible solution was born: we fix the width of the column of text inemso that by default the line contains some number of characters considered legible (the polygraphists and Web designers haven’t decided on a specific number, but not the point), and we also supplement it with an interface for adjusting the width. For example, so that you can drag the right border of the column, and double-click on it to swing it open 100% (and then the width will be determined by the width of the browser window) or return the original width.



To do this, use the jQuery UI Resizable plugin . We connect files to the page jquery-ui-1.8.12.custom.css, jquery-1.5.1.min.jsand jquery-ui-1.8.12.custom.css, as well as our - style.cssand onReady.js.

The column is defined as follows:

Текст

In your stylesheet, write something like:

div#content{
	width: 45em;
	margin-left: auto;
	margin-right: auto;
	padding: 1ex 1em;
	border-right: thin dashed #444444;
}

And in your script file:

$(
	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");
			}
		);
	}
);

We get a column that by default has a certain accepted width in characters, but the user can do with it what his heart desires (within the framework of imaginary needs).



UPD: At the request of the public, a demo .