Justify text

**donboe** · Jan 26, 2011 05:30

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 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;

**noonnope** · Jan 26, 2011 05:37

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.

**donboe** · Jan 26, 2011 05:54

Originally Posted by noonnope

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.

This is a text

It should be the exact same way as in the picture. To which JS are you referring?

**noonnope** · Jan 26, 2011 06:22

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>

**donboe** · Jan 26, 2011 06:30

Originally Posted by noonnope

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?

**noonnope** · Jan 26, 2011 06:54

http://www.bramstein.com/projects/typeset/
http://plugins.jquery.com/project/charjustify
http://webtoolkit4.me/2010/04/23/swe...-jquery-plugi/
http://www.heychinaski.com/blog/2009...-using-jquery/

**donboe** · Jan 26, 2011 09:46

Originally Posted by noonnoks

http://www.bramstein.com/projects/typeset/
http://plugins.jquery.com/project/charjustify
http://webtoolkit4.me/2010/04/23/swe...-jquery-plugi/
http://www.heychinaski.com/blog/2009...-using-jquery/

Thank you so much for the links noonnoks

**noonnope** · Jan 26, 2011 09:58

You're very welkome donboks

**Paul O'B** · Jan 26, 2011 13:31

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.

**noonnope** · Jan 26, 2011 13:39

You mean 'cos it's looking like this?

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

**noonnope** · Jan 26, 2011 13:43

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.

**noonnope** · Jan 26, 2011 13:59

And yes Paul O'Boks, donboks really cracked us lately

Or Pauloks

**Paul O'B** · Jan 26, 2011 14:24

Originally Posted by noonnope

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.

**noonnope** · Jan 26, 2011 14:50

Originally Posted by Paul O'B

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

**dresden_phoenix** · Jan 26, 2011 15:04

image map? lol!!!

**noonnope** · Jan 26, 2011 15:05

^ Yeah, why not?! I don't see a problem with that.

**dresden_phoenix** · Jan 26, 2011 15:07

me neither, but just the other night I was thinking of image map applications...

**noonnope** · Jan 26, 2011 15:10

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.

**Paul O'B** · Jan 26, 2011 15:13

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

**noonnope** · Jan 26, 2011 15:15

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.

**Erik J** · Jan 29, 2011 04:00

Originally Posted by donboe

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>

**Paul O'B** · Jan 29, 2011 04:52

Looks good Erik

I got hung up on trying to make it work for partial lines which I think was a step too far.

User Tag List

Thread: Justify text

Thread Tools

Display

Justify text

Bookmarks

Bookmarks

Posting Permissions