这是本人在w3c小组讨论时的提议,懒得多说话,直接贴图:

                  top 
           .----------------. 
      left |                | right 
           '----------------' 
                 bottom 
 
                before 
           .----------------. 
     start |                | end 
           '----------------' 
                 after 

                  over 
           .----------------. 
 line-left |                | line-right 
           '----------------' 
                 under 

另,补充了三个建议:

  1. 多一样竖列方式,因为中国古文的标准就是这这种,成标准后,有利于方便古文内容原文的展现。

                  before 
            .----------------. 
        end |                | start 
            '----------------' 
                  after 
    
  2. 对数字和字母的处理方式,为显示效果考虑,把正常的变为斜体,把斜体变为正常。

                           [i]a[/i]
     ab2 ------->>         [i]b[/i]
                           [i]2[/i]
    
                            a
     [i]ab2[/i] ------->>   b
                            2
    
  3. 对数学公式的处理,是难点之一,方法是把操作符号也转为竖向。

                                        2 | 1
     111        1                       2 | 1
     ------- = ---     -------------->> 2 | 1
     222        2                        //
                                        2 | 1
    
  4. 对代码的处理方式:(2014-05-01 补充)和上面的数学公式类似。

2014-05-01 补充

补充一个简单的实现

.han
{
    column-width: 5px;
    -webkit-column-width: 5px;
    -moz-column-width: 5px; 

    column-gap: 50px;
    -moz-column-gap: 50px;
    -moz-column-rule:1px solid gray;

    height: 300px;
    overflow-y: hidden;
    overflow-x: auto;

    word-wrap: break-word;      /*英文断开字母*/
    direction:rtl;     /*改起点方向在右*/
    unicode-bidi:bidi-override;    /*改文字方向为相反*/
}

测试下效果:

<!DOCTYPE html>
<html>
<head><meta charset="utf-8">
<link rel="stylesheet" href="x-scroll.css" />
</head>
<body>

<div class="han">

■■■■■■■■■■■■■【文章开头】泰山不让土壤,故能成其大;河海不择细流,故能就其深;王者不却众庶,故能明其德。——李斯《谏逐客令》
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation

■■英文字母斜体好看点:<i>ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat.
Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse</i>

12345678900102949421351
■■数字斜体好看点:
<i>349860286492860596897234632974609823408623</i>

泰山不让土壤,故能成其大;河海不择细流,故能就其深;王者不却众庶,故能明其德。——李斯《谏逐客令》
【文章结尾】●●●●●
</div>
</body>
</html>

</body>
</html>

效果如下:

■■■■■■■■■■■■■【文章开头】泰山不让土壤,故能成其大;河海不择细流,故能就其深;王者不却众庶,故能明其德。——李斯《谏逐客令》 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ■■英文字母斜体好看点:ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse 12345678900102949421351 ■■数字斜体好看点: 349860286492860596897234632974609823408623 泰山不让土壤,故能成其大;河海不择细流,故能就其深;王者不却众庶,故能明其德。——李斯《谏逐客令》 【文章结尾】●●●●●

注意: IE9- 无效。另外,这里还有好多点需要改进:代码数学公式,换行等等!

嗯,我是不是该把这站也变成这样呢?