Home/ Questions/Q 8979719
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-15T19:54:40+00:00

I am trying to make a lined paper effect for my personal blog, but

  • 0

I am trying to make a lined paper effect for my personal blog, but I have run into a snag getting each line to render on one of the actual lines on the paper. Everything starts out just right, but rounding errors seemed to accumulate as the lines go down the page. I had set the line height to 24px, and added padding to elements that was 24px, basically just trying to make sure any thing that added height was a multiple of 24 so that all the lines rendered correctly. But I found that chrome is not respecting the line height property exactly. Can anyone explain the screenshots below?

Here is basically the effect I am going for, as you can see it is pretty close.
Illustration of Desired Effect

But if you take a look at the height property, it is 70.909…, when it should actually be 72 (24 * 3). So Basically my question is, why is the height of the <p> [6char] not a multiple of the line height?

The height is not a multiple of line-height

Here is the CSS computed style for a <p> element in text:

font-size:16.363px;
height:70.909088;
line-height: 24px;
padding-top: 24px;
margin:0px;
padding-bottom:0px;
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    It’s because your browser is overriding the default text size. This is most likely due to your zoom level or any accessibility options you might have turned on.

    I created this (you can view it on jsFiddle):

    <html>
<head>
<style type="text/css">
p {
    line-height: 24px;
}
</style>
</head>
<body>
<p>
three<br>
lines<br>
of text<br>
</p>
</body>
</html>

    And the computed style in Chrome is:

    display: block;
height: 72px;
line-height: 24px;
width: 1584px;

    Pressing crtl+- and reloading the page yields the following computed style:

    display: block;
height: 70px;
line-height: 23.981483459472656px;
width: 1761.8148193359375px;

    The only way I can think of making a zoom-level agnostic lined paper theme would be to either render the paper yourself using Javascript and a canvas (or simply generating the image data based on line height) OR, adjusting the zoom-level yourself as detailed here:

    How to detect page zoom level in all modern browsers?

    • 0