2

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;
Brian Mains
  • 49,697
  • 35
  • 139
  • 249
wfbarksdale
  • 6,962
  • 11
  • 60
  • 87
  • 2
    Could you post textual css rules? Its hard to extract information from an image. – Shiplu Mokaddim Dec 12 '12 at 02:25
  • 3
    Can you http://jsfiddle.net a demo with your file and problem? – Jared Farrish Dec 12 '12 at 02:36
  • Check the (internal) CSS rules that define

    styling. It's not unlikely that they're using ems instead of px somewhere. You'll want to check all the attributes that impact the box geometry, too, not just line-height. http://v1.jontangerine.com/silo/css/pixels-to-ems/

     – broofa Dec 12 '12 at 02:43
  • Also, I'm guessing this will be near-impossible to get working on all browsers due to all the legacy browser insanity and user-configurable options that affect final layout and rendering. (e.g. the weirdness around zooming that @David Cowden alludes to) – broofa Dec 12 '12 at 02:47
  • Check these examples: http://nettuts.s3.amazonaws.com/894_createPaper/curled_pages/index.html http://bmccreative.com/blog:lined-paper-with-css – alditis Dec 12 '12 at 02:52

1 Answers1

1

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?

Community
  • 1
  • 1
dcow
  • 7,228
  • 3
  • 41
  • 65
  • ugggh, all I had to do was press `crtl-` and it is normal now... that was a lot of toil. But you were right, so thanks! any ideas on how I could make my css tolerant of other browser settings. – wfbarksdale Dec 12 '12 at 02:46
  • Thanks for the answer, and for pointing me in the right direction, Cheers! – wfbarksdale Dec 12 '12 at 02:56
  • Yeah, it seems after reading that other answer, it might be easiest to just generate the background image for each paragraph line yourself based on the computed line height. Here is a [crazy cool article on generating images client side using Javascript](http://www.codeproject.com/Articles/221941/HTMLImage-Generating-Dynamic-Image-using-Plain-Jav). – dcow Dec 12 '12 at 03:00
  • I basically used the same method as in the bmccreative tut, on the alditis answer, but it seems that there are some round off errors going on or something. – wfbarksdale Dec 12 '12 at 03:09