CSS/Javascript中的规则页面效果_Javascript_Jquery_Html_Css

CSS/Javascript中的规则页面效果

javascript jquery html css

CSS/Javascript中的规则页面效果,javascript,jquery,html,css,Javascript,Jquery,Html,Css,我希望在CSS或Javascript/JQuery中创建规则页面效果。我知道这可以通过CSS来实现，通过设置一个固定的线高度，并创建一个适合的背景图像然而，我更喜欢创建一个向量解决方案（即没有图像），但我需要它在ie中工作有没有可能在不使用适用于所有现代浏览器的图像的情况下产生这种效果理想的解决方案是检测段落中一行的顶部和底部，并使用javascript在两者之间画一条线——因此它可以处理未定义的行高（但如果必要，我很乐意定义它们）我忘了提到文本是动态的。尝试朝这个方向标题：这是

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

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

有没有可能在不使用适用于所有现代浏览器的图像的情况下产生这种效果

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

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

尝试朝这个方向标题：这是非常基础的，但是如果你考虑线条边框高度，文本位置，你可以得到更多的深度。基本上，一切都需要基于em高度。使用透明div作为带边框的边距，使用div通过边框半径进行打孔

刚刚添加了一些：添加到它中

您需要编写一个脚本来手动添加行号div，这样它们就可以在溢出后填充纸张，但不会过多

估计在最大情况下使用的em像素数（比如40px），您将执行类似“文本高度#内容div”除以自定义（40px）比率的操作，再加上10（为了安全起见），这就是您需要“写入”的行数
纸张没有溢出，因此欢迎使用更多的div行，但过多（如数百行）有点懒惰

刚刚添加了一些：添加到它中

估计在最大情况下使用的em像素数（比如40px），您将执行类似“文本高度#内容div”除以自定义（40px）比率的操作，再加上10（为了安全起见），这就是您需要“写入”的行数
纸张没有溢出，因此欢迎使用更多的div行，但过多（如数百行）有点懒惰

<!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>


线路测试
#统治{
边框：1px纯红；
}
#文本容器{
位置：绝对位置；
左：0；
排名：0；
宽度：580px；
高度：1200px；
字体大小：12px；
利润率：10px；
填充物：5px10px；
线高：20px；
}
函数drawLines（）{
//使用DOM获取画布元素
var canvas=document.getElementById（'ruited'）；
var currentLineY=0；
//确保在画布不受支持时不执行
if（canvas.getContext）{
//使用getContext使用画布进行绘图
var ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=“#CCC”；
ctx.beginPath（）；
//绘制一些线（+1.5偏移文字基线）
//我们使用.5表示清晰的线条，因为笔划（）
//方法需要浮点，而不是整数
对于（var i=1，imax=30；i您可以在所有现代浏览器（包括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>


线路测试
#统治{
边框：1px纯红；
}
#文本容器{
位置：绝对位置；
左：0；
排名：0；
宽度：580px；
高度：1200px；
字体大小：12px；
利润率：10px；
填充物：5px10px；
线高：20px；
}
函数drawLines（）{
//使用DOM获取画布元素
var canvas=document.getElementById（'ruited'）；
var currentLineY=0；
//确保在画布不受支持时不执行
if（canvas.getContext）{
//使用getContext使用画布进行绘图
var ctx=canvas.getContext（'2d'）；
ctx.strokeStyle=“#CCC”；
ctx.beginPath（）；
//绘制一些线（+1.5偏移文字基线）
//我们使用.5表示清晰的线条，因为笔划（）
//方法需要浮点，而不是整数
对于（var i=1，imax=30；我是否希望即使在寡行文本（即段落的短端）上也能完全遵守规则？还有，哪一个IE？IE9足够好，还是需要与8、7（和，天堂福芬，6）向后兼容？是的。即使文本是孤寡的，我也希望一直走到段落块的边缘。我很高兴使用IE8，但7会很好。但是，如果您有一个只兼容IE9的解决方案，我想看看。您是否希望即使在孤寡的文本行（即，段落的短端）上，规则也能完全一致？还有，哪个IE？IE9足够好吗？或者你需要与8、7（和，天堂，6）向后兼容吗？是的。我希望它能一直延伸到段落块的边缘，即使文本是空的。我很高兴使用IE8，但7会很好。但是，如果你有一个只兼容IE9的解决方案，我想看看。在你设法让文本很好地排在行上之后，可能会有一个想法，那就是取消边框底部，而使用div作为索引每个“.line”分区内的边距。每个分区都在底部（顶部：自动；底部：0px），高度可能为2px）