Question

我希望在CSS或Javascript / JQuery for example中创建一个统治页面效果。我知道这可以通过设置固定的行高度并创建适合的背景图像来实现。

但是，我会更喜欢创建一个矢量解决方案（即没有图像）like this，但我需要它在IE中工作。

是否可以在不使用适用于所有现代浏览器的图像的情况下生成此效果？

理想的解决方案是检测段落中行的顶部和底部，并在其间用javascript绘制一条线 - 因此它将使用未定义的行高（但我很乐意在必要时定义它们）。

我忘了提到文字是动态的。

Answer 1

尝试朝着这个方向前进：http://jsfiddle.net/Jw8pw/ 这是非常基本的，但是如果考虑行边界高度，文本位置，则可以获得更深入的内容。基本上一切都需要基于em高度。使用带边框的边距透明div和通过边框半径进行打孔的div。

刚刚添加了一些内容：http://jsfiddle.net/julienetienne/Jw8pw/6/

//jquery
var lineHeight = $('#content p').css('line-height') ;
$('.line').css({height: lineHeight },0);

    var x = $('#content').height();
    $('#paper').css('height', x + 40 +"px");

您需要编写一个脚本来手动添加行div，以便它们填满纸张溢出但不会太多。

估算你在最大情况下使用的像素数量，（比方说40px），您将执行类似“文本高度#content div”除以自定义（40px）比率，添加10（为安全起见），这就是您需要“编写”多少行
#paper没有溢出，所以欢迎更多的div行，但过多（如数百）有点懒惰

Answer 2

您可以在所有现代浏览器中使用Canvas（包括IE9）。以下示例在IE7和IE8中不起作用，但我没有在那里测试过。

<!DOCTYPE html>
<html>
<head>
    <title>Line Test</title>
    <style type="text/css">
        #ruled {
            border: 1px solid red;
        }
        #textContainer {
            position: absolute;
            left: 0;
            top: 0;
            width: 580px;
            height: 1200px;
            font-size: 12px;
            margin: 10px;
            padding: 5px 10px;
            line-height: 20px;
        }
    </style>
    <script type="text/javascript">
        function drawLines(){
            // get the canvas element using the DOM
            var canvas = document.getElementById('ruled');
            var currentLineY = 0;

            // Make sure we don't execute when canvas isn't supported
            if (canvas.getContext){

              // use getContext to use the canvas for drawing
              var ctx = canvas.getContext('2d');
              ctx.strokeStyle = "#CCC";
              ctx.beginPath();
              // draw some lines (the +1.5 offsets the text baseline
              // and we use the .5 for crisp lines because the stroke()
              // method requires floats, not ints
              for (var i=1, imax=30; i<imax; i++) {
                currentLineY = i*20 + 1.5;
                ctx.moveTo(0,currentLineY);
                ctx.lineTo(600,currentLineY);
              }
              ctx.stroke();       
            } else {
              alert('You need a modern browser to see the lines.');
            }
        }           
    </script>
</head>

<body onload="drawLines()">

<canvas id="ruled" width="600" height="602"></canvas>
<div id="textContainer">Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
<br><br>
Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</div>

</body>
</html>

CSS / Javascript中的统治页面效果

2 个答案: