Friendly text column

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

In addition, in my practice I often came across the desirability of spreading text across the entire width of a window without increasing its size - in order to fit on the screen more text from one reference to scrolling to another.

From these considerations, such a possible solution was born: the width of the text column is fixed in em 'ah, so that by default the line contains some number of characters considered readable (relative to a specific number, printers and Web-designers are still undecided, but not the essence), as well as We supplement it with an interface for setting the width. For example, so that you can drag the right border of the column, and double-click on it alternately plow up 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 to the page the files jquery-ui-1.8.12.custom.css , jquery-1.5.1.min.js and jquery-ui-1.8.12.custom.css , as well as our own - style.css and onReady.js .

The column is defined as:

 <div id="content" class="ui-widget-content"></div> 

In our style file we 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, which by default has some accepted width in characters, but the user can do with it what his heart desires (within the framework of conceivable needs).



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