SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)

    center and justify text at the same time

    Adding a quick trial to my css testpage to simultaneously center and justify 2 lines of text was not as easy as I thought.

    Searching through various sites and forum post, it seemed that the following should work

    Code:
    	
    as an id (tried inline and class as well) in the style sheet:
    #phone { width:97%; margin-left: auto; margin-right: auto; text-align:justify ; font-size: 2em; font-family: verdana, arial, helvetica, geneva; font-style: normal;
     color:red; font-weight: 800; }
    
    and this in the html
    
    <p> call </p>
    <div id="phone">
    	<br>Mon-Fri 08.30-20.30 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0208 265 8822
    	<br>Emergencies out of hours &nbsp;&nbsp; 07852 736 626
    </div>
    
    <p> call </p>
    I know it looks dreadful and all that, but it was only done this way to eliminate other parts influencing this block.
    To my surprise, nothing I changed made the little block center and justify at the same time. Surely, this is possible but no example I found actually worked.
    I've tried in Firefox, Chrome and Opera.
    Where do I go wrong?

  2. #2
    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)
    You can center the paragraph and add an extra element to which you can apply the text style:

    Code:
    p {
        margin:auto;
        width:80%;
    }
    
    p span {
        text-align: justify;
    }
    Maleika E. A. | Rockatee | Twitter | Dribbble



  3. #3
    SitePoint Addict
    Join Date
    Apr 2010
    Posts
    14
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, your text is justified. But effectively you have two lines, because of the break tags. Justification does not take place on the last line of text, for reasons that become obvious when you consider there may only be two words on that line.

    Narrow your browser window, or make the DIV width smaller, and you should see it justify.

    If I understand what you are trying to do, check out this revised code: http://thewebwiz.net/temp/benbob/

    Cordially, David

  4. #4
    SitePoint Wizard
    Join Date
    Jul 2003
    Location
    Kent
    Posts
    1,921
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Justified text is demonstrably harder to read and should be avoided on usability engineering grounds.

  5. #5
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,791
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Important typography (print or web) note: Justification only happens on FULL LINES of text, that is lines of text that go from the left edge to the right edge of their container. So if you only have 4 words,it will look exactly like left-justified ( was will the last , incomplete) line of text of any long block of type).


    You really don't need the extra element.. for mere justification ( text-align must happen in a block element, not a span; as a span shrinkwraps to the width of its content)


    For this particular application floating the two elements may be the only way to go.

  6. #6
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Dr John View Post
    Justified text is demonstrably harder to read and should be avoided on usability engineering grounds.
    That is interesting. Do you have any links to studies/experiments related to this?

  7. #7
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Important typography (print or web) note: Justification only happens on FULL LINES of text, that is lines of text that go from the left edge to the right edge of their container. So if you only have 4 words,it will look exactly like left-justified ....
    Doh.........
    Guess I wasn't having my brightest day in the week.

  8. #8
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by thewebwiz View Post
    ...If I understand what you are trying to do, check out this revised code: http://thewebwiz.net/temp/benbob/
    That actually isn't quite what I was trying to achieve. What I am trying to do, is to code the two lines in such a way, that wrapping of the pages around images will NOT change the positioning of the 2 lines relative to each other, irrespective of the positioning of the images, the size of the image and the resolution/size/zoom of the page. Athe same time, they should remain the same relative to the rest of the page in line with fluid design, AND centered AND justified.
    This little block will than be inserted wherever it makes sense on all pages of my site, and look (more or less) the same everywhere.

  9. #9
    Robert Wellock silver trophybronze trophy xhtmlcoder's Avatar
    Join Date
    Apr 2002
    Location
    A Maze of Twisty Little Passages
    Posts
    6,316
    Mentioned
    60 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by benbob
    That is interesting. Do you have any links to studies/experiments related to this?
    Some dyslexic users will have difficulty will fully-justified text - I don't. Justified text causes uneven inter-word spacing, which can create 'rivers of white space' for some dyslexics. It is not usually so much an issue with print. The computer has to calculate spacing and font sizes thus sometimes the dyslexic will focus too much on the uneven spaces rather than the words. People whom have Meares Irlen syndrome may also have such issues.

  10. #10
    SitePoint Evangelist
    Join Date
    Jun 2011
    Location
    London UK
    Posts
    495
    Mentioned
    5 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by dresden_phoenix View Post
    Important typography (print or web) note: Justification only happens on FULL LINES of text, that is lines of text that go from the left edge to the right edge of their container. So if you only have 4 words,it will look exactly like left-justified ( was will the last , incomplete) line of text of any long block of type).
    After recovering from my "dohhhhh" -moment, I added a third line to the block for the first 2 lines justify. But they didn't.

    html now
    Code:
    <p> call </p>
    <div id="phone">
    	<br>Mon-Fri 08.30-20.30 &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; 0208 265 8822
    	<br>Emergencies out of hours &nbsp;&nbsp; 07852 736 626
    	<br> Try the other number if no answer on the first
    </div>
    <p> call </p>
    and the css
    Code:
     #phone { font-size: 2em; font-family: verdana, arial, helvetica, geneva; font-style: normal; color:red; font-weight: 800; text-align: justify;
    }
    I made double sure the altered css was read upon refresh by changing the color; that bit worked fine. Why is the justify refusing to work here, but works fine in the rest of the page????


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
  •