Feature
Post

Category
Code


Custom Reading Width Beta

Custom Reading Width Beta is specifically geared towards those that have liquid, or full-width layouts. Jakob Nielson already tells us to use a liquid layout, but users at higher resolutions suffer when it comes to reading text on screen. Custom Reading Width, when implemented on a site, allows a user to select the desired reading width.

To decide if Custom Reading Width is for you, I’ve set up a test page to give a small demonstration of Custom Reading Width’s capabilities.

If you are sold after seeing the test page (or just want to know more), read on. The rest of this article will focus on customizing Custom Reading Width for your site.

The Source File

The first thing you want to do is download the source file, which includes the test example.

The files you might want to edit in order to customize the script are as follows:

  • resize.php
  • test.php
  • javascripts/readingwidth.js
  • css/lightbox.css
  • css/readingWidth.css

You’ll notice just by looking at the source JavaScript files that I’ve used scriptaculous. One of the downsides of scriptaculous is the large download required. A solution is to compress the JavaScripts, but that is outside the scope of this article. Furthermore, Dustin Diaz says to avoid JavaScript libraries, but the slider control for scriptaculous was just too tempting to resist.

How the Script Works

The script resizes a specified container (in the test case, the BODY container is used) according to a user’s preference. The first thing the script does is display a link to a user. The user can then click on the link to bring up the resize dialog. The resize dialog uses a customized version of Lightbox called Lightbox Gone Wild.

See the script in action. Demo it now

The link that is displayed to the user is only displayed after the page has finished loading. The technique used to show the link after the page is finished loading uses the fantastic addLoadEvent function by Peter-Paul Koch.

After a user has selected a desired reading-width, the script sets a persistent cookie with the selected reading-width. Upon visiting the page again, the cookie is read via php and the container is styled appropriately. If the user wants to revert back to the default width, the user can bring up the reading-width dialog again and set the reading-width to default.

Customizing test.php

One of the first areas you can customize the script is when reading in the persistent cookie.

<?php
	if (isset($_COOKIE["ReadingWidth"])) {
	print($ReadingArray[0]);
	$ReadingArray = explode(",", $_COOKIE["ReadingWidth"]);
	$ReadingWidth = "";
	if (count($ReadingArray) === 3 ) { $ReadingWidth = $ReadingArray[0];}
	if (preg_match("/^\d\d*(px|%)$/", $ReadingWidth)) {
	?> 
<style type="text/css">#reading-width-container { width: <?php echo $ReadingWidth ?>;}</style>
	<?php
	}
} 
?>

Notice that a style is being set for the ID of #reading-width-container. Also notice that the BODY tag has the same ID. You don’t have to apply the reading-width-container ID to the BODY tag. You can apply the ID to whichever container you ultimately want the user to resize.

You can also customize the way the style is applied. If you’d rather have an inline style, you can easily customize the script to apply an inline style to the container of your choice.

One other area in test.php that you can customize is the display link.

<a id="reading-width-resize" style="display: none" href="resize.php" class="lbOn">Resize Window</a>

I recommend keeping the ID for the display link, but you can change the text link to an image link if you prefer. One thing to make sure of is that the link to the reading-width dialog is relative. An absolute file path does not work in some situations (such as when a user types in devlounge.net instead of www.devlounge.net).

Customizing resize.php

You can customize the default behavior of the reading-width dialog as well.

$SliderValue = 1; //Can be from 0 - 1 (i.e., 0.03)
$IsFixedSelected = "true"; //Can be "true" or "false"

The SliderValue can be set from 0 – 1. The SliderValue is what value the slider will be set to initially when the user opens the reading-width dialog.

IsFixedSelected determines the default selection for the radio buttons. Having a “true” setting ensures that the Fixed radio button is selected, and having a “false” setting ensures that the Fluid radio button is selected.

Another area that can be customized is when instantiating the reading-width object.

var readingControl = new ReadingWidth("reading-width-container", "auto", <?php echo $IsFixedSelected ?>,15, 100, true);

When instantiating the object, the object is passed the container ID, the default width behavior, which radio button is selected, the min-width, the max-width, and whether the min and max-widths are percentages or not.

The default width behavior can be any CSS value regarding width (e.g., “auto”, “1024px”, “100%”).

The min and max-widths can be ignored if you enter 0 for both values. One thing to make sure of is that you specify whether the min and max widths are percentages or pixels. You specify this by entering true if they are percentages, and false if they are not percentages.

One other area you may want to customize is the slider control. You may need to calibrate the slider control based upon the max and min-width values.

var slider = new Control.Slider('handle1','track1',{ range:$R(0.15,1), values:
[.15,.20,.25,.30,.35,.40,.45,.50,.55,.60,.65,.70,.75,
.80,.85,.90,.95,1],

Notice I’ve calibrated the slider control to go from 15% to 100%. The calibration can easily be changed by changing the range and the values.

Customizing readingwidth.js

//Make the overlay (Lightbox) static to fix a bug in IE when using the BODY tag as a container - Comment the next two lines if you don't use the BODY tag as a container
		var overlay = document.getElementById("overlay");
		if (overlay != null) { overlay.style.width = this.GetBrowserWidth() };	

If you do not use the BODY tag as the reading-width container, find the lines in the JS file (should be lines 45 and 46) and comment them out. Internet Explorer tends to resize the Lightbox overlay when the BODY container is resized. The above code makes the overlay a fixed-width.

Customizing the Styles

Obviously you can go into the stylesheets and change the appearance of the reading-width dialog. You’ll find all of the reading-width dialog styles in the file readingWidth.css file. You’ll find all of the Lightbox Gone Wild styles in the lightbox.css file.

Some Other Things…

I’ve modified the code a little in the lightbox.js file. This was to fix a bug in IE where the reading-width script would think the browser was wider than it actually was because the scrollbars were disabled. The commented out lines should be in lines 88-90.

Bugs

As of right now, there are no known bugs in the script. The script has been tested successfully on IE 6, IE 7, FF 1.5, FF 2, and Opera 9. If any of you have some of the lesser-used browsers such as Safari or Konquerer and could provide feedback, it would be much appreciated.

Now I’m not saying there aren’t any bugs in the script. However, all the bugs that have been found have been fixed or have been provided a solution to minimize their impact. The reason the script is being released as a beta is to solicit feedback and find any remaining bugs.

The Future

Please keep coming back to this page for updates on the script (including added features and/or bug fixes). I plan on writing a similar script that doesn’t use prototype or scriptaculous. Stay tuned.

Download Now

Give the Custom Reading Width test a try yourself. Download the version 1 Beta now.

Feedback is Needed

This script isn’t perfect, which is why it was released as a beta. Your feedback is desperately needed for the success of this script.

Support this project. Please give us a digg along with leaving your important feedback.

This script has the potential to change how users read on the web. If you like what this script is trying to do, perhaps you can give it a digg.

Additional Reading: For more information on the inspiration behind the CRW Script, have a look at the Inspiration Behind it post.


  1. By Josh posted on November 7, 2006 at 12:36 am
    Want an avatar? Get a gravatar! • You can link to this comment

    This is a pretty cool little script, not sure what I could use it for right now, but it may come in handy later on.

  2. By ronalfy posted on November 7, 2006 at 2:02 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Thanks for the feedback Josh. I do hope you can find the script useful later.

  3. By Ivan Slade posted on November 7, 2006 at 9:55 am
    Want an avatar? Get a gravatar! • You can link to this comment

    This is an interesting script. I often create liquid full screen layouts and you have to compromise by setting a maximum width on the main content to avoid it looking crazy at large screen resolutions. I think for a blog site or content heavy site this could be a nice solution.

  4. By bliss posted on November 10, 2006 at 1:39 am
    Want an avatar? Get a gravatar! • You can link to this comment

    umm.. how about using fluid layout but setting maximum width of the text for wider screens?

    the script is real nice. thanks.

  5. By Luke Williams posted on January 26, 2007 at 11:19 am
    Want an avatar? Get a gravatar! • You can link to this comment

    You’re a good man Ronald, great job!

  6. By Dan posted on January 26, 2007 at 12:03 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    Thats really cool. i like liquid layouts but there r so many browsertypes out there which make a good programming really hard, u r a timesaver. thank u very much for sharing ur ideas.

  7. By Knuddel posted on February 4, 2007 at 12:53 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    i like liquids too especially with much vol(%) :-)) lets have a party.

  8. By Canoe Polo posted on March 3, 2007 at 7:30 am
    Want an avatar? Get a gravatar! • You can link to this comment

    This is a pretty cool little script, not sure what I could use it for right now, but it may come in handy later on.

  9. By biggi posted on March 30, 2007 at 7:30 am
    Want an avatar? Get a gravatar! • You can link to this comment

    i think this guy “Jakob Nielson” tell many and many of that is nothing like “sh.t” it doesn´t matter if he call himself “usabillity-guru” websites are for users and not for a “guru” do what u like and u will find enough people which like it too also without the jakob :-)

  10. By kultura posted on April 16, 2007 at 6:41 am
    Want an avatar? Get a gravatar! • You can link to this comment

    Congratulations. This is splendid matter. I think that this script will turn out very useful. Thanks!

  11. By Brigitte posted on July 28, 2007 at 6:00 pm
    Want an avatar? Get a gravatar! • You can link to this comment

    good job thanks

  12. TrackbackThe Web Design BlogEasy Webbers - Webmaster Blog » Speedlinking Week 45Devlounge | Devlounge Year in Review53 CSS-Techniques You Couldn’t Live Without | Smashing Magazine潘 -Idea of Life » 沒有就活不下去的53個CSS技巧Devlounge | Custom Reading ContainersCustomizable Widget Form Factor at Timothy PostZhu Zhongwei » Blog Archive » CSS使用技巧[转载]Blog » Blog Archive » For Webmaster onlyLink dump « Snog Blog53 ultramodern css techniques | A Blog you can useCalinSoft » Blog Archive » 53 Tecnicas ultramodernas con hojas de estilo (CSS)53 ultramodern css techniquesbilgiservisim » 53 mükemmel css örneği53 CSS-Techniques at NeoStyleRecursos y Tutoriales » Blog Archive » 53 tecnicas CSS muy buenoWeb Design Magazine » List Of Latest Best CSS Techniques三色设计驿站 - 一个设计人用来记录工作,记录生活Jaybird’s Blog - 53 CSS-Techniques You Couldn’t Live WithoutJaybird’s Blog - 53 CSS-Techniques You Couldn’t Live Without53 CSS-Techniques You Couldn’t Live Without « Where LOVE beginsWebclave.com » Blog Archive » 53 Tecnicas CSS basicas por Smashingmagazine53 CSS-Techniques You Couldn’t Live Without | Evolution : weblogCSS Way » 53 CSS-Techniques You Couldn’t Live Withoutfictivedesign.com » Blog Archive » 53 CSS-Techniques You Couldn’t Live Without53 CSS-Techniques You Couldn’t Live Without | Fusuy.com || Webmaster Accessary Platform53 Advanced CSS Techniques | Standalone Complex朝心’s CSS流浪路 » 53个CSS技巧Ethos Blog » CSS UnleashedViet Nam PHP Blog » Blog Archive » 53 kỹ thuật CSS ko thể bỏ qua克兰印象 » 53种网页设计师必备的高级CSS技巧http://www.scriptremix.com/CSS web design techniques to die for | Web Templates, SEO, Web Design Tutorials, Tips, Guides - DT Blog53 CSS-Techniques | ThemeflashDellemente Net-Magazine » Blog Archive » 53 CSS -Techniques You Couldn’t Live Without53 CSS-Techniques You Couldn’t Live Without « Ramesh53 CSS-Techniques You Couldn’t Live Without | Rystereology53种网页设计师必备的高级CSS技巧 | 帕兰映像Top CSS Techniques | psd2css53个CSS技巧 | 帕兰映像53 个不可或缺的 CSS 技巧 | 芒果53 Técnicas de CSS que você não pode viver sem - Ralph Almeida – SEO, Otimização, Design网页CSS技术汇总 | 无名小站Usefull CSS Techniques For Designers | Cosmos Blog -- Internet News,Life,Culture,Polices,Resource,Make Money53 CSS tekniği | Özgür Karataş53 CSS-Techniques You Couldn’t Live Without | Theme Center53种网页设计师必备的高级CSS技巧 | Web启点53 kỹ thuật CSS ko thể bỏ qua | [Sole.Vn]53 técnicas esenciales de estilos CSS | Cosas sencillas53 công nghệ CSS mà bạn không thể thiếu