Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts

    Would like text line spacing at a preset height -- regardless of font size

    Would anyone have an idea how to set the text line spacing for a css/html page so that regardless of what font size is used, the line spacing will stay the same? (the spacing would be set to accommodate the largest line of text -- the headline)

    I am working on an experiment where I am importing an article with ssi and showing only about four lines of text. Among these lines are a headline, which is larger, a byline, and a couple lines of the article text. I would like to see how it would work to set the line spacing the same on all lines of text on an ssi page -- just for importing. A second style page will kick in when that page is clicked to read the rest of the article. Under normal circumstances, if a headline bumps to a second line, a line of article text can be split in half, as my div window is only about 66 pixels or so in height.

    I have entered 62.5% for font size on my body element, and have been experimenting with ems instead of pixels.

    Thanks.

    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-30-2012 at 10:44 PM. Reason: test clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.

  • #2
    Master Coder felgall's Avatar
    Join Date
    Sep 2005
    Location
    Sydney, Australia
    Posts
    6,611
    Thanks
    0
    Thanked 645 Times in 635 Posts
    Quote Originally Posted by Kevin_M_Schafer View Post
    I have entered 62.5% for font size on my body element, and have been experimenting with ems instead of pixels.
    Specifying a percentage there is only necessary because of a bug in IE. To simplify things it is easier to use 100% though since the value used doesn't matter as there is no fixed relationship between pixels and em as it all depends on the screen size and screen resolution.

    You can set line-height independently of font-size.
    Stephen
    Learn Modern JavaScript - http://javascriptexample.net/
    Helping others to solve their computer problem at http://www.felgall.com/

    Don't forget to start your JavaScript code with "use strict"; which makes it easier to find errors in your code.

  • Users who have thanked felgall for this post:

    Kevin_M_Schafer (01-31-2012)

  • #3
    Regular Coder Kevin_M_Schafer's Avatar
    Join Date
    Apr 2011
    Location
    Fairfax, Minnesota, U.S.A.
    Posts
    482
    Thanks
    97
    Thanked 17 Times in 17 Posts
    Hi felgall,

    It worked! I set the line height in the css div window element and all three font sizes styled the text as it came through via ssi -- and they all displayed having the same line height. Now, regardless if there are two line headlines or one, the article text lines will display at the same height with no chance of being horizontally cut in half.

    Eventually, when the "Continue reading" link is clicked, a new page will open that uses a different css to space the text normally. The ssi is only used to show these slivers of text in the main page.




    Thanks for your help.

    --Kevin

    .
    Last edited by Kevin_M_Schafer; 01-31-2012 at 04:20 PM. Reason: text clarity
    My keyboard is an IBM from 1993 and I like it that way. | Who is Dan Well? Everyone always says I know Dan Well.Building a web page is like building a birdhouse. Put it up there and watch 'em come. | Maintaining the aspect ratio of an image is more important than having a cold orange pop.


  •  

    Posting Permissions

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