原文: Custom Reading Width

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.

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.

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.

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.

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.

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

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.

译文: 自定义阅读宽度

自定义阅读宽度Beta专门配合那些自适应宽度布局或者全宽的版面设计。Jakob Nielson已经教过我们使用一个自适应宽度布局，自适应宽度布局，但是用户在阅读文章的时候，还是会遇到问题。自定义阅读宽度，可以让用户选择适合的阅读宽度。

为了判断自定义阅读宽度是否适合自己，我建立了一个测试页面，来做一个演示。

看完演示后，如果你还想做进一步的了解，你可以继续阅读以下的文章，接下来主要是介绍如何在你的网页上进行自定义阅读宽度。

源文件

首先，要下载包含测试示例的源文件。
你可以对该文件进行编辑，来自定义以下的脚本：
resize.php
test.php
javascripts/readingwidth.js
css/lightbox.css
css/readingWidth.css

通过JavaScrip文件，你可以发现我已经使用了scriptaculous，因为其中一个文件比较大。这可是一个压缩JavaScript好方法，可是这样就超出了文章的范围。Dustin Diaz建议不使用JavaScript libraries，但是scriptaculous的滑块控件确实很实用。

了解脚本的作用

scrip可以根据用户的偏好来调整指定容器的大小（在测试例子中，使用了BODY容器）。首先scrip可以显示链接。用户可以点击链接来resize dialog。resize dialog使用了一个叫做Lightbox Gone Wild的Lightbox自定义版本。

下面看一下script的演示 。

只有当页面完成装载后，链接才会显示。这个技术使用了Peter-Paul Koch的addLoadEvent功能。

用户选择一个阅读宽度后，script会设置一个persistent cookie。再次浏览页面的时候，通过php 可以读取cookie，容器也会随着进行适当地调整。如果想要返回默认宽度，用户可以再次调整阅读宽度，然后将阅读宽度设置到默认值。

自定义test.php

你所阅读的persistent cookie是可以进行自定义script的第一个部分。
PLAIN TEXT
PHP:
        <?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
          }
    }
   ?>

可以看到一个为ID of #reading-width-container而设置的样式。也可以看到BODY标签有相同的ID.无需将reading-width-container ID应用到BODY标签上，你可以将ID 应用到任何你想要用户调整大小的容器上。你还可以自定义运用样式的方式。如果你想要内嵌样式，你可以轻松地通过自定义脚本去将一个内嵌样式应用到你选择的容器中。

test.php的另一个可以进行自定义的是显示链接。

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

我建议大家保存显示链接的ID，但是如果你喜欢的话，可以将文本链接改变成图像链接。需要注意的是阅读宽度对话框的链接必须是相对路径。在一些情况下，绝对路径是不能够使用的。（比如，用户输入的是devlounge.net，而不是www.devlounge.net）

自定义resize.php

你还可以自定义阅读对话框的默认值

PLAIN TEXT
PHP: 
            $SliderValue = 1; //Can be from 0 - 1 (i.e., 0.03)
            $IsFixedSelected = "true"; //Can be "true"

滑动杆的初始值可以设置在0-1之间。滑动杆的初始值是当用户打开阅读宽度对话框时，滑动杆的初始值。

IsFixedSelected决定单选按钮的默认值。设置为“ture”时确保Fixed单选按钮已经选定，而“faulse”是确保Fluid单选按钮已经选定。

当实例化阅读宽度对象时，还可以对另外一个部分进行自定义。
PLAIN TEXT
PHP: 
            var readingControl = new ReadingWidth("reading-width-container", "auto", <?php echo $IsFixedSelected ?>,15, 100, true);

但对一个对象进行实例化的时候，这个对象已经设置了容器ID,宽度默认值，包括单选按钮的选定，最小宽度，最大宽度，还有是否设定为百分比。

宽度默认值可以是任意的CSS值（比如"auto", "1024px", "100%"）。如果将最小和最大宽度都设为0，那么最小和最大宽度可以忽略。需要注意的是你要将最小和最大宽度值设定为百分数或者象素。如果是百分数的话，你可以通过设置true来说明，如果不是，就设置为false。

还有一个可以进行自定义的部分――滑块控件。你需要根据最大最小宽度值来调整滑块控件。
PLAIN TEXT
PHP: 
 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],

我已经把滑块控件从15%调整到100%。这个数值可以通过调整range 和value值来进行修改。

自定义readingwidth.js

PLAIN TEXT
JavaScript:
            //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() };

如何你没有将BODY标签作为阅读宽度容器，那么看一些JS 文档里的内容（应该在45和46行）。当BODY 容器大小改变时，Internet Explorer就会调整Lightbox覆盖图的大小。以上的代码为覆盖图设置了一个固定宽度。

自定义样式

你可以通过样式表改变阅读宽度对话框的样式。你可以在readingWidth.css文件中找到所有阅读宽度对话框的样式。也可以在lightbox.css文件中找到所有Lightbox Gone Wild样式。

其它相关内容

我对lightbox.js文档中的代码做了一点修改。这样可以修改IE中的一个bug，这个bug就是由于网页卷轴不可用，那么阅读宽度脚本会认定浏览器的宽度过宽。相关注释应该在88-90行。

Bugs

现在，发现的bug都已经修改好了。这个脚本已经在IE 6, IE 7, FF 1.5, FF 2,和 Opera 9上进行了成功的测试。如果你使用的是一些其它浏览器，比如Safari 或者 Konquerer，并且可以提供给我们一起反馈信息，我们将非常感激。

我并不是说在脚本里没有任何bug。但是，所有发现的bug已经被修改或者已经提供方法来降低它的影响。这个脚本作为beta发布的主要原因就是希望得到一些反馈，并且在寻找一下残余的bug。

未来

请密切留意今后的相关信息（包括添加的功能和bug的修改）。我打算不使用prototype或者scriptaculous来写一个类似的脚本。请关注！

现在就下载吧！
自己去试做一下自定义宽度测试吧！立即下载版本1 Beta。