CSS/Javascript中的规则页面效果

Ruled-page effect in CSS/Javascript

本文关键字：规则 Javascript CSS      更新时间：2023-09-26

例如，我希望在CSS或Javascript/JQuery中创建规则页面效果。我知道CSS可以通过设置固定的线条高度并创建适合的背景图像来实现这一点。

然而，我更喜欢创建一个像这样的矢量解决方案（即没有图像），但我需要它在ie中工作。

在不使用在所有现代浏览器中都能工作的图像的情况下，有可能产生这种效果吗？

理想的解决方案是检测段落中一行的顶部和底部，并用javascript在两者之间画一条线，这样它就可以处理未定义的行高（但如果必要，我很乐意定义它们）。

我忘了提课文是动态的。

尝试朝这个方向前进：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行，但过多（如数百）有点懒惰

您可以在所有现代浏览器（包括IE9）中使用Canvas。下面的例子在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>
相关文章：