SitePoint Sponsor

User Tag List

Results 1 to 5 of 5
  1. #1
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    Drop Cap Leading Problem

    I used some CSS to create a drop cap, but it creates extra space between the first and second line. Why?
    Here's the code I'm using:

    p{text-indent:10%;text-align:justify;margin:4% 0 5%}
    p.fp:first-letter{font-size:200%}

    <p class="fp">...............</p>


    Thanks,

    Chris

  2. #2
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Browsers don't put leading at the top of for the letter, they split the line height arbitrarily between top and bottom. In other words: the web is NOT print. :/


    Any how. a solution to your issue can be to set the line height of your drop cap to what it would be if it were regular size text.

    Code:
    p{text-indent:10%;text-align:justify;margin:4% 0 5%}
    p.fp:first-letter{font-size:200%; line-height: .5}

    hope that helps

  3. #3
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That worked great., D.P. Thanks.
    I was reading
    http://meyerweb.com/eric/thoughts/20...-line-heights/
    about untiless line heights. The author says to think of the number after "line-height:" (scaling factor) as a multiplier. That's what percent is - a multipleir - 88% is 88% of something, 300% is 300% of sometjhing or 3 times something . So it seems to me the easist way to think of the lack of units used/needed for line-height is to think percent and don't use the percent symbol nor any symbot nor anything for units. What do you think?

    Thanks

  4. #4
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,812
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    That's what percent is - a multipleir - 88% is 88% of something, 300% is 300% of sometjhing or 3 times something . So it seems to me the easist way to think of the lack of units used/needed for line-height is to think percent and don't use the percent symbol nor any symbot nor anything for units. What do you think?

    Yes, basically. Think of line-height as a super-imposed fontsize in 'ghost' container



    WHEN DEALING WITH FONTS EMs and %s act similarly that is 1em and 100% = 1 x the size of the fontsize of the parent element. line-height also gives you the option to use a unit less value (where 1= 100%) AND to use ABSOLUTE units: PX, PT, IN, etc. On occasion , these can be handy too.

  5. #5
    SitePoint Guru
    Join Date
    Jan 2010
    Posts
    638
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I think that might mean that the designers of CSS have assumed percent for line-height and allow other units to be used. That seems like a good idea for all properties in css.


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
  •