SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Smaller font size for inline code destroys vertical rhytm

    Hello

    I'm trying to keep a vertical rhythm on my site using a baseline. However when I make the font size smaller for inline <code> the vertical rhythm is disrupted, why is that?

    The default text is 16px and the code should be 14px leaving me with .875em font-size and 1.714em line-height for <code>.

    Is there something else I need to add to the css for it not to mess with the paragraph line-height?

    Regards,

    Martin Lundberg
    Sweden

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,109
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Doesn't Baseline require you to use specific px font sizes to acheive that?

    That means you can't make the font smaller for one element.

  3. #3
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    If I understand the problem, try making the line height for the code line-height:1; in the past I've used AP to keep it from messing with my line height also, but that probably won't help here.

  4. #4
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lundberg View Post
    Hello

    I'm trying to keep a vertical rhythm on my site using a baseline. However when I make the font size smaller for inline <code> the vertical rhythm is disrupted, why is that?

    The default text is 16px and the code should be 14px leaving me with .875em font-size and 1.714em line-height for <code>.

    Is there something else I need to add to the css for it not to mess with the paragraph line-height?

    Regards,
    If you have variations in text size the different text must take up a multiple of the basic leading. You do this by adjusting the line-height and margin accordingly.

    Here's how to maintain your rhythm.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  5. #5
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by EricWatson View Post
    If I understand the problem, try making the line height for the code line-height:1; in the past I've used AP to keep it from messing with my line height also, but that probably won't help here.
    Thanks, I tested and it seems to work with 1em. but why does 1em work instead of 1.714em. I've included some test html and a background image which explains the problem.

    I got the sizes by doing this. The default size is 16px (1em) and line-height is 1.5em. That makes the base line 24px (16*1.5). When I then wanted the code to be 14px I first did 14/16 to get the font-size which is 0.875em and 24/14 which is 1.714em.



    HTML Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""
    "http://www.w3.org/TR/html4/strict.dtd">
    <html>
    	<head>
    		<meta http-equiv="content-type" content="text/html; charset=utf-8">
    		
    		<title>Vertical rhythm test</title>
    		<style type="text/css" media="screen">
    			* { margin: 0; padding: 0; }
    			body { font: normal 100% Helvetica, Arial, sans-serif; background-image: url(baseline.png); }
    			html > body { font-size: 16px; line-height: 1.5em; }
    			code { font-size: .875em; line-height: 1.714em; }
    		</style>
    	</head>
    	<body>
    		<p>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 <code>qui officia deserunt</code> mollit anim id est laborum.</p>
    		<p>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 <code>qui officia deserunt</code> mollit anim id est laborum.</p>
    		<p>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 <code>qui officia deserunt</code> mollit anim id est laborum.</p>
    		<p>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 <code>qui officia deserunt</code> mollit anim id est laborum.</p>
    		<p>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 <code>qui officia deserunt</code> mollit anim id est laborum.</p>
    		<p>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 <code>qui officia deserunt</code> mollit anim id est laborum.</p>
    		<p>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.</p>
    	</body>
    </html>
    Attached Images Attached Images

    Martin Lundberg
    Sweden

  6. #6
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    but why does 1em work instead of 1.714em.
    The default size is 16px (1em) and line-height is 1.5em.
    Ah, but that's not true a lot of the time.

    If you say 16px it'll be 16 px.

    On my windowing system, 1em may be bigger. Everything looks bigger in Gnome.

    Anyone with vision difficulties may have their machines set to Large Fonts or simply text-enlarged. Now 16px = 16px (except when screen resolution/dpi has been changed) but 1em might be much bigger.

    So when you're mixing 16px with 1.5em, you may be getting all sorts of different things for different users. I'd say either keep them all em or all px.

    Also, 1.743em might be rounded in any which different direction depending on browser.

    And, what it I don't have arial or helvetica? You stated "sans-serif" which is good, but my sans serif is apparently a pretty big font (seems to be the Linux "Sans" which at least in Gimp is a bit bigger than Arial or Helvetica).

  7. #7
    SitePoint Wizard bronze trophy PicnicTutorials's Avatar
    Join Date
    Dec 2007
    Location
    Carlsbad, California, United States
    Posts
    3,657
    Mentioned
    15 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by lundberg View Post
    Thanks, I tested and it seems to work with 1em. but why does 1em work instead of 1.714em.
    [/html]
    I don't know man, I just know how to fix some things.

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Just use a unitless line-height in the body and you won't need to change anything.

    e.g.
    Code:
    body{line-height:1.5}
    As I see it the uneven lines are because the code element has a smaller font size of 14px and by default it sits on the baseline. You have increased the line-height so that it equals 24px for this code element and therefore half leading is added to the top and bottom of the font in the code element (5px top and bottom).

    Now because the smaller font sits on the baseline the addition of the half-leading on the bottom causes the element to poke out of the line-box and the line height therefore increases to accomodate that element.

    If you were to apply vertical-align:top to the code element then the line-height wouldn't have changed. In reality you don't need to set a line height for the smaller item anyway and if you did you should use something smaller which is why something like 1.5em (or indeed 1em would work).

  9. #9
    SitePoint Addict lundberg's Avatar
    Join Date
    Mar 2003
    Location
    Sweden
    Posts
    370
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for explaining. I'll read Eric's post about it, thanks!
    Last edited by lundberg; Feb 4, 2010 at 15:34. Reason: Missed the link to Eric's post.

    Martin Lundberg
    Sweden

  10. #10
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    If you apply 1.5 without a unit it will be 1.5 * whatever the currnet font size is .

    If the font is 16, then 1.5em would make it 16*1.5 which would = 24
    http://reference.sitepoint.com/css/line-height
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  11. #11
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Oh, I'd always thought that when you said stuff like line-height: 1 that "em" was implied.

    Oh well, learn something every day. I did not know the units got derived from the font units.

  12. #12
    Mazel tov! bronze trophy kohoutek's Avatar
    Join Date
    Aug 2004
    Location
    Hamburg, Germany
    Posts
    4,248
    Mentioned
    30 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    I did not know the units got derived from the font units.
    They don't. A unitless line-height is nothing more but a multiplier. Unless I got that wrong, too.
    Maleika E. A. | Rockatee | Twitter | Dribbble



  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,380
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    When you say 1em the line height is converted into a number - let's say that it works out to 24px for arguments sake. The children of that element even those with a smaller font-size will inherit that actual 24px pixel line height.

    When you say line-height:1 then the children inherit that number "1" and apply it to whatever their font-size is. If the font-size is smaller they get a smaller line-height and if the childs font-size is larger they get a larger line-height and will not be clipped. This is completely different to the former process.

    It's the raw number that is passed to the child and used as a multiplier on the child's font-size. This ensures that a relationship between the font-size and line-height is maintained.

  14. #14
    SitePoint Guru Luki_be's Avatar
    Join Date
    Jun 2008
    Location
    Brazil, Minas Gerais. But i'm from Belgium.
    Posts
    867
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    just adding a recap on line-height: there are 4 values you can use

    1) using a percentage value: line-height will not scale with the relevant font-size

    2) using a length value (px): line-height will not scale with the relevant font-size

    3) using the normal-value: line-height does scale with the relevant font-size

    4) using the number value (e.g. 1.5): line-height will always scale with the font-size

    Method 4 gives you the flexibility of the normal value but you can specify the factor you want to use.

    All four methods are good to use = can be used. The only difference is if you want scaling with the font-size or not. I myself sometimes use em as unit and sometimes no unit... depends on the case at hand.
    SitePoint Guru
    Sitepoint - the ultimate Css well
    As a computer, I find your faith in technology amusing.
    Sitepoint reference, your friend in need

  15. #15
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Stomme poes View Post
    Oh, I'd always thought that when you said stuff like line-height: 1 that "em" was implied.

    Oh well, learn something every day. I did not know the units got derived from the font units.
    Quote Originally Posted by kohoutek View Post
    They don't. A unitless line-height is nothing more but a multiplier. Unless I got that wrong, too.
    Yes you're right, but isn't that what I was saying? I just didn't use the word multiplier lol
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  16. #16
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Ryan,

    yeah, but when I read this:
    If the font is 16, then 1.5em would make it 16*1.5 which would = 24
    that you meant (cause the OP uses it) "16px"...
    Then I figured that means 24px for the line height.. since it's 16apples times 1.5 it looked like I should get 24apples, right?

    So I was looking at it a bit wrong, and I think Paul's explanation made sense... not sure if it made enough sense to stay straight in my head though. I still kinda see it as, the resulting line-height is in whatever units the font was set in.

  17. #17
    billycundiff{float:left;} silver trophybronze trophy RyanReese's Avatar
    Join Date
    Oct 2008
    Location
    Whiteford, Maryland, United States
    Posts
    13,624
    Mentioned
    6 Post(s)
    Tagged
    0 Thread(s)
    It made sense in my head but I'm always terrible at explaining things that I know lol . Except overflow:hidden and containing floats! I can explain that perfectly IMHO. I know the words to use .
    Always looking for web design/development work.
    http://www.CodeFundamentals.com

  18. #18
    SitePoint Wizard Stomme poes's Avatar
    Join Date
    Aug 2007
    Location
    Netherlands
    Posts
    10,279
    Mentioned
    51 Post(s)
    Tagged
    2 Thread(s)
    Off Topic:

    Lawlz! I don't have any of that perfectly straight in my head! : )


    I think you explained it ok, I just misinterpreted how that worked.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •