SitePoint Sponsor

User Tag List

Results 1 to 22 of 22

Thread: Justify text

  1. #1
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Justify text

    My client would like to have this image as text in the sidebar:



    But what I thought, would be a fairly easy task, turns out to be slightly more complicated. My first thought was to declare a general class
    Code CSS:
    .sidebar .general{
      width: 170px;
      text-align: justify;
      font-size: 23px;
      color: #FFF;
    }
    which I could use use on different <p> tags and use various <span's> for the different font styles. But no matter what I try the text won't extend to the desired width (170px;
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  2. #2
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Correct me if I'm wrong, but the text is only justifying when it fills the current line of text and it extends to the next line. Then the first line will be justified. The method used to achieve that is typically to leave extra space between words as needed. Do you have words?

    I'm pretty sure what you're trying to do is doable, but by JS, not by CSS alone.
    Off Topic:

    You keep posting CSS code alone. But mark-up also can have a say in the final result.

  3. #3
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Correct me if I'm wrong, but the text is only justifying when it fills the current line of text and it extends to the next line. Then the first line will be justified. The method used to achieve that is typically to leave extra space between words as needed. Do you have words?

    I'm pretty sure what you're trying to do is doable, but by JS, not by CSS alone.
    Off Topic:

    You keep posting CSS code alone. But mark-up also can have a say in the final result.
    I don't think (or better I'm sure) you're wrong. There is not a lot of mark-up to show. I'm just testing this, with the method I described and used just one line where two different font styles are involved so If you would like to see some mark-up, this is what I have.

    <p class="general">This is a <span>text</span></p>

    It should be the exact same way as in the picture. To which JS are you referring?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  4. #4
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en"><head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>h1 underline</title>
     
      <style type="text/css">
        p.general {
          width:60px;  
          background-color:beige; 
          text-align:justify; 
          text-justify:inter-word;
        }
        
        p.general span {
          color:red;
        }
        
      </style>
      
    </head><body>
    
      <p class="general">This is a <span>j u s t i f i e d text</span>.</p>
      <p>This text is not.</p>
    
    </body></html>

  5. #5
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by noonnope View Post
    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd">
    
    <html lang="en"><head>
    
      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
      <title>h1 underline</title>
     
      <style type="text/css">
        p.general {
          width:60px;  
          background-color:beige; 
          text-align:justify; 
          text-justify:inter-word;
        }
        
        p.general span {
          color:red;
        }
        
      </style>
      
    </head><body>
    
      <p class="general">This is a <span>j u s t i f i e d text</span>.</p>
      <p>This text is not.</p>
    
    </body></html>
    This brings me indeed in the right direction. But what about the one word lines as in the picture. Actually every line need to be identical (170px width) with a difference in the number of words and font styles (for which i can use <span's). Is this where JS comes in like you mentioned in post #2?
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  6. #6

  7. #7
    SitePoint Wizard donboe's Avatar
    Join Date
    Jun 2010
    Location
    Netherlands
    Posts
    1,967
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    “Good artists copy, great artists steal” (Pablo Picasso - 1934)

  8. #8
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You're very welkome donboks

  9. #9
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    I think donboks should be setting the css quizzes

    I had a quick go but it didn't work out too well

    Code:
    <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" 
      "http://www.w3.org/TR/html4/strict.dtd">
    <html lang="en">
    <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>menu</title>
    <style type="text/css">
    ul.menu {
        width:155px;
        background:#d5b880;
        text-align:justify;
        color:#fff;
        margin:0;
        padding:0;
        list-style:none;
        padding:10px;
        line-height:.9;
        position:relative;
    }
    ul.menu li{
        display:inline;
        font-size:160%;
        padding:0 2px 0 0;
        letter-spacing:-2px;
    }
    
    ul.menu li a{text-decoration:none;}
    .menu li a:hover{color:yellow}
    .menu a{color:#fff}
    .a a{color:#fff}
    .b a{color:#000}
    .c a{color:#f00}
    .d a{color:#ffc;font-size:120%;}
    .e a{color:#ffc}
    .f a{color:fff}
    .g a{color:#0ff}
    .h a{color:#666}
    .i a{color:#fcf}
    /* etc...*/
    b{margin-right:170px;}
    
    .menu li span{display:block;margin-bottom:-1em}
    .menu li span.close{margin:-.9em 0;}
    </style>
    </head>
    <body>
    <ul class="menu">
        <li class="a"><a href="#"><span>r o l l e r <b>&nbsp;</b></span> b l i n d s</a></li>
        <li class="b"><a href="#">v e r t i c a l b l i n d s</a></li>
        <li class="c"><a href="#">v e n e t i a n b l i n d s b l i n d s</a></li>
        <li class="d"><a href="#">w o o d e n b l i n d s</a></li>
        <li class="e"><a href="#">r o m a n b l i n d s</a></li>
        <li class="f"><a href="#">w i n d o w <b>&nbsp;</b> <span class="close">c o v e r i n g s <b>&nbsp;</b></span> </a></li>
        <li class="g"><a href="#"><span  class="close">s h a d e s <b>&nbsp;</b></span></a></li>
        <li class="h"><a href="#"><span class="close">w i n d o w <b>&nbsp;</b></span> s h a d e s </a></li>
        <li class="i"><a href="#">s u n <b>&nbsp;</b>  <span class="close"> b l i n d s <b>&nbsp;</b></span></a></li>
        <li class="a"><a href="#">b l i n d s c y p r u s</a></li>
        <li class="b"><a href="#">e n i g m a b l i n d s </a></li>
        <li class="b"><a href="#">c y p r u s l i m i t e d</a></li>
        <li class="d"><a href="#">r o l l e r b l i n d s </a></li>
        <li class="e"><a href="#">w i n d o w  c o v e r i n g s </a></li>
        <li class="f"><a href="#">w i n d o w s h a d e s</a></li>
        <li class="g"><a href="#">s u n  b l i n d s</a></li>
    </ul>
    </body>
    </html>
    You could probably do the whole thing as an image and place the anchors on top like this very old demo of mine. It's a bit of a pain measuring everything up though.

  10. #10
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    You mean 'cos it's looking like this?



    Fixed font size baby, fixed font size!!! 150% font size, says my OS.

  11. #11
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Actually, I think the Sp example, about maps and dls, the one I liked so much, is a better way to handle this.

    You could definitely look at this as a map. The initial image could also, like in the Sp example, be completed with some sprites for a hover effect on the bits. This for when CSS is available but JS is not.

    When JS is available, I guess you can choose one jQuery plug-in to keep it as text, if you really want that.

  12. #12
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    And yes Paul O'Boks, donboks really cracked us lately

    Or Pauloks

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by noonnope View Post
    Actually, I think the Sp example, about maps and dls, the one I liked so much, is a better way to handle this.

    You could definitely look at this as a map. The initial image could also, like in the Sp example, be completed with some sprites for a hover effect on the bits.
    The problem with that is that SPs example was rectangles and the links in this example wrap to the next line and are not rectangular in shape. In the demo I posted above the target area follows the text only and doesn't make a rectangular block. You can move from one link to the next much like an image map but its an awful lot of work.

    You mean 'cos it's looking like this?

    http://i1202.photobucket.com/albums/...ope/blinds.png

    Fixed font size baby, fixed font size!!! 150% font size, says my OS.
    Yes I said it was only rough but you get the general idea. I would have spent more time on it but I didn't think it was going to get there. I just threw it up in the air for ideas.

  14. #14
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    The problem with that is that SPs example was rectangles and the links in this example wrap to the next line and are not rectangular in shape.
    You forget that for one dt you can have many dd. The reverse is also true.

    The links are rectangular in shape. When they wrap to the next line they form two rectangles, hence two positioned dd for a dt.

    Come to think of it, you can definitely use text also for dd. So I say it's a clear possibility using dl with dt and absolutely positioned dds, one or two, depending on the wrapping. I'd say it's the best choice so far. I mean, I would use the great idea Sp had, in so many scenarios, it would become an html5 element

  15. #15
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    image map? lol!!!

  16. #16
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ^ Yeah, why not?! I don't see a problem with that.

  17. #17
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,741
    Mentioned
    32 Post(s)
    Tagged
    1 Thread(s)
    me neither, but just the other night I was thinking of image map applications...

  18. #18
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Only, as I said, for this case, and probably for many others, image map can be successfully replaced with a dl. Like Stomme poes showed use in her beautiful example. Am I sounding too much about it ? Sorry if so. I don't mean to be a broken record, but I really liked the idea.

  19. #19
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    hence two positioned dd for a dt.
    That still wouldn't accomplish what my demo accomplishes You can't wrap the anchor around 2 block elements and therefore as the word wraps to another line the other half of the word (sentence) does not become active.

    However it is another solution and may be suitable if hover states aren't required although in those types of menus a hover state is really necessary to delineate each link nicely.

    In my example I place inner elements inside the anchor and then move them outside the anchor but always touching at some point. This allows only the required part of the link to be active and not the word beside it. As I said above it's a pain to code
    It all depends how much work has to go into it

  20. #20
    Non-Member
    Join Date
    Jun 2010
    Location
    47°27′35″N 26°18′0″E
    Posts
    1,789
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quiz time

    But I'll bet with some JS aside, it can all be arranged. Or maybe some floating, after dividing the anchor text in two spans, and playing with them, floating the second half left, or the first half right? Just thinking out load.

  21. #21
    Design Your Site Team bronze trophy Erik J's Avatar
    Join Date
    May 2007
    Location
    Countryside, Sweden
    Posts
    3,407
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by donboe View Post
    My client would like to have this image as text in the sidebar:
    ...
    Seeing Paul's example I finally understood (I hope) what you wanted.

    As "text-justify:newspaper" is not supported yet, maybe you could use letter-spacing instead?

    Refined Paul's code example a little adding letter-spacing as spacing method combined with justified text lines in order to use safer spacing and still fill the line:
    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></title>
    <style type="text/css">
    #one{
    	margin:0;
    	padding:10px;
    	width:170px;
    	background:#f0f;
    	list-style:none;
    }
    #one li{
    	display:block;
    	margin-bottom:-1.2em; /* remove the height of the wrapping line end */
    	width:100%; /* IE6 */
    	overflow:hidden; /* hide letter space overflow */
    	font:20px/1.2em arial;
    	text-align:justify; /* fill the line when the text that has a safe smaller spacing */
    }
    /* find the spacing limits */
    #one .a{ letter-spacing:66px; font-size:25px; font-weight:900}
    #one .b{ letter-spacing:2px; font-size:16px}
    #one .c{ letter-spacing:5px; font-size:20px}
    #one .d{ letter-spacing:6px; font-size:16px; font-weight:900}
    
    #one li b{
    	display:inline-block;
    	margin-right:100%; /* wrap the line end */
    }
    #one li a{
    	text-decoration:none;
    	color:#000;
    }
    #one li a b{
    	float:left;
    	margin-right:-100%;
    	width:100%;
    }
    #one li a:hover b,
    #one li a:hover{
    	background:#fcf;
    	color:#f00;
    	font-weight:900;
    }
    
    /* text not justified in IE6-7 */
    #two{
    	margin:0;
    	padding:10px;
    	width:170px;
    	background:#0cf;
    	list-style:none;
    }
    #two li{
    	display:block;
    	margin-bottom:-1.2em;
    	width:100%; /* IE6 */
    	overflow:hidden;
    	font:20px/1.2em arial;
    	text-align:justify;
    }
    * html #two li{ margin:0} /* IE6 */
    *+html #two li{ margin:0} /* IE7 */
    
    #two .a{ letter-spacing:66px; font-size:25px; font-weight:900}
    #two .b{ letter-spacing:3px; font-size:16px}
    #two .c{ letter-spacing:6px; font-size:20px}
    #two .d{ letter-spacing:6px; font-size:16px; font-weight:900}
    
    #two li:after{
    	display:inline-block;
    	padding-right:99%;
    	content:"\A0";
    }
    #two li a{
    	color:#000;
    	text-decoration:none;
    }
    #two li a:hover:before,
    #two li a:hover{
    	background:#0ff;
    	color:#00f;
    }
    </style>
    </head><body>
    
    <ul id="one">
    	<li><a href="#nogo">I E 6</a><b>&nbsp</b></li>
    	<li class="a"><a href="#nogo">IE7</a><b>&nbsp</b></li>
    	<li class="b"><a href="#nogo">Type of product you can choose</a><b>&nbsp</b></li>
    	<li class="c"><a href="#nogo">The gallery</a><b>&nbsp</b></li>
    	<li class="d"><a href="#nogo">All about us</a><b>&nbsp</b></li>
    </ul>
    
    <ul id="two">
    	<li><a href="#nogo">I E 8</a></li>
    	<li class="a"><a href="#nogo">IE9</a></li>
    	<li class="b"><a href="#nogo">Type of product you can choose</a></li>
    	<li class="c"><a href="#nogo">The gallery</a></li>
    	<li class="d"><a href="#nogo">All about us</a></li>
    </ul>
    
    </body></html>
    Happy ADD/ADHD with Asperger's

  22. #22
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    39,875
    Mentioned
    160 Post(s)
    Tagged
    4 Thread(s)
    Looks good Erik I got hung up on trying to make it work for partial lines which I think was a step too far.


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
  •