Solved

newspaper spacing?

Posted on 2006-07-08
24
594 Views
Last Modified: 2011-09-20
I'm writing the code for a blog style website, and I have some lines that have too much blank space at the end of them.

Sometimes caused by an obscenely long word, but most of the time caused by words strung together with elipses forced to the next line.

text text text text text text text text text
text text text text text text text
text . . . . text  text text text text text text

Is there any easy way to enforce newspaper spacing on a page or block of text?

text text text text text text text text text
text  text   text  text   text  text  text
text . . . . text  text text text text text text

subtler than that obviously but you get the jist . . .
0
Comment
Question by:lovewithnoface
  • 12
  • 7
  • 2
  • +2
24 Comments
 
LVL 26

Accepted Solution

by:
DireOrbAnt earned 400 total points
Comment Utility
Use "text-align: justify" like:
<DIV STYLE="width: 300px; text-align: justify;">
Parents control the supply lines. You decide which foods to buy and when to serve them. Though kids will pester their parents for less nutritious foods, adults should be in charge when deciding which foods are regularly stocked in the house. Kids won't go hungry. They'll eat what's available in the cupboard and fridge at home. If their favorite snack isn't all that nutritious, you can still buy it once in a while so they don't feel deprived.
</DIV>
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
justify worked well for one really wide column of text that i have, but it only spaces between words, so for my narrow columns it kinda looks ridiculous

i know newspaper's use various tricks, spacing between letters (making them all spaced just a little farther apart), stretching letters, other stuff.

is there anything else I can do, or that i can do in conjunction with text-align:justify to keep from having long spaces at the ends of rows, and to keep from having bizarre spacing in the row?
0
 
LVL 26

Expert Comment

by:DireOrbAnt
Comment Utility
I guess you could use:
<DIV STYLE="width: 400px; text-align: justify; text-justify: newspaper">

You can read about it here:;
http://msdn.microsoft.com/library/default.asp?url=/workshop/author/dhtml/reference/properties/textjustify.asp

But in my IE and Firefox tests, it makes no difference.
0
 
LVL 16

Assisted Solution

by:sam85281
sam85281 earned 50 total points
Comment Utility
text-justify: newspaper DOES work, just not well.  If you put 2 identical divs on top of each other - one without text-justify and one width, and look REALLY CLOSE you can see the difference in letter spacing.  It's so minimal though.

In CSS-3 The newspaper value is elliminated.  Instead of adding a text-justify attrib, the style will look more like:

myJustifiedText {
text-align: justify;
letter-spacing: 1,3,5;
word-spacing: 2,4,6;
}

Letter and word spacing takes place of newspaper.  First value(optimal), second value(minimum), third value(maximum)

Unfortunately, none of this is available yet.

http://www.w3.org/TR/css3-text/#word-spacing

-Sam

0
 
LVL 10

Expert Comment

by:Havin_it
Comment Utility
Given the problem constructions you mentioned, the solution that comes readily to mind would be to separate the ellipses from the words with spaces.  IIRC from my long-ago language classes, this is the correct usage anyway.

Of course if the ellipsis jumps to the next line it does not look so good, but you can tweak the results by using either three full-stops (periods) or the ellipsis entity, &hellip;
0
 
LVL 10

Expert Comment

by:Havin_it
Comment Utility
Also, I haven't tried this, but you may find that using a non-breaking space to 'glue' the ellipsis to the preceding word may keep them together when displayed, i.e.

preceding_word&nbsp;&hellip; next_word
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
ack, sorry for taking so long to comment.

first, I abandoned the ellipsis entity because i need the ellipsis spaced, so I'm going with .nbsp;.nbsp;.nbsp;. etc

the words get too long when there is an nbsp; on either side, basically gluing two words, several periods and some spaces together, so the last one gets to be a real space.  it also functions depending upon what kind of ellipsis it is, so it varies a bit, but it seems to work rather well.

i'll reply about the spacing stuff later today hopefully...
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
I haven't seen a noticible difference with the newspaper value added, but i'm not sure my site is the best thing to be testing them on anyway, because they are narrowish columns.  what exactly are these additional values supposed to do?

I read the document you provided sam, but it didn't really help, mainly because i didn't understand it.

i mean this isn't a big deal, since i.e. is currently KILLING my site anyway, it's just something I wanted to know if it was possible to do....
0
 
LVL 15

Expert Comment

by:ericpete
Comment Utility
lovewithnoface,

I spent about 35 years in the newspaper business, and I'll give you a piece of advice that most people who are still in the newspaper business don't get:

It ain't the same thing, so don't try to force it to be.

No matter what you do, your web page is going to look different on my monitor, using my browser, than the way you designed it. Most people don't bother, but a simple check mark in Tools/Options/Advanced can render all your work pretty much useless -- at least as far as what I see is concerned. So stop fighting the battle.

Besides, ragged right, using a sans-serif face, in about 14px (11-12 point) is what is easiest for most people to read. If you want them to read what you're writing, then make it easy for them.

ep
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
ragged right?

I'm using all sans-serif fonts, I think i've set it up so that it's, Helvetica, Arial, sans-serif

and, I'm not using pixels to define font size, I'm using percentages.  my standard text size is set to 100%, which, if most people haven't been playing with their toolbars translates to about 16px.  percentages are the easiest to translate across browser I find, and if a user wants bigger or smaller text, that's something that they are comfortable changing, so I don't worry about that--I just make sure that my design still works with very small and very large text.

but I'm talking about the spacing of the text, in a column?

here, you can see what I mean if you go to my testing website.

http://www.somedomain.com/tali/EE-testing/Document.html

this is one entry from the political blog that this is for.  most of the entries are two columns, and you'll see that in the first columns I'm using text-align: justify to achieve newspaper spacing.  I can't do that in the second column, because the second column is much thinner, and it looks very awkward.  
0
 
LVL 15

Assisted Solution

by:ericpete
ericpete earned 50 total points
Comment Utility
Ragged right is the same thing as flush left.

Personally, I'd use a smaller font size all the way around. This is JUST personal opinion, but to me (and I'm actually using a 17" monitor set at 1024x768, with the typesize at Normal in Firefox), it looks like I'm reading nothing but bold type. Again, especially since you're using a lot of text, that's hard on the eyes; bold type should be used for emphasis and headlines, but shouldn't be used as a general text face.

Here's the thing I worry about when I'm designing: Everything is about the user except the content. That means that when you're building the site, you make it easy to navigate, easy to read, and easy to understand (from the point of view of "how do I do whatever I want to do next").

I realize this is somewhat off topic from what you originally asked, and I apologize for that. But I learned to use a Linotype before I learned to type, and I know what we had to do to make the spacing between letters (called kerning, by the way) work: we had to stop and slide very thin pieces of metal in between words and characters until you filled in the line. When phototypesetting came along, there was only very expensive equipment that would do that kind of calculation, and it did it automatically, which means it also did it inappropriately sometimes; putting too much space between words just looks better than increasing the space between some combinations of letters. I have yet to see a readily-available software package that does the job well, except maybe Ventura's original package -- but it was developed by a guy who had been a typesetter (as in someone who used a Linotype) for years.

Part of the reason is relatively straightforward: HTML doesn't allow for hyphenation. On the printed page, everything is FIXED -- the width of the column, the height at width of the characters, and the average number of characters of a given typeface that you can fit into a space XX inches (or picas, or centimeters) wide -- so if you have one of those sentences with three long words, you can generally figure out a place to hyphenate one (typesetters were occasionally known to rearrange words in order to make them fit, too). You can't do that on a web page.

DireOrbAnt has given you the best answer you're going to get; the web is a different medium, and shouldn't be treated as if it's the same. I've just given you reasons why I think it's a pyrrhic battle.

ep

0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
actually, you can html to hyphenate at the end of a line.  it's a stylistic choice that my client didn't want

you can use word wrap: break word;  but that only works for IE and recent safari  (this code splits long words with hyphens, instead of forcing them to the next line)

so, when one thing only works in one browser, what do people do?  they concoct a workaround:

http://myy.helia.fi/~karte/pre-wrap-css3-mozilla-opera-ie.html

also, theoretically you could have abundunt use of soft hyphens, put that takes a lot of time.  it depends really what you're doing.  had I been going to do anything, i would have used word wrap: break word and the workarouns to make it accessible.  but, it was a minute details and one that ultimatly, my client didn't want.

-----------
yes, the text on that page is all bold.  my client finds it easier to read, and thinks that she knows her audience.  also, since making text bigger and smaller is a mouse click or less, i'm not concerned.  i'm using the web standard and letting people mess from their.  especially since many people do go and play with their options so that 100% code comes across as 14px.  which of course leads web designers to program something that they want at 16px at 110% and the whole thing falls apart.

now, most of my clients audience probably wears glasses.  and while i thought my client was going too big, too bold to begin with--we tested multiple pages side by side and this read the easiet.  for those with and without glasses.

the web is a different medium, and I'm not trying to treat it the same--not at all

that's why I recognize that i'm probably not going to be able to make the right column follow the same style patterns as the left spacing wise.  if it were not on the web, i could.  what word processors can do with newspapers spacing is incredible, but it can't be done on the web yet.

what this question was and is primarily is how to space my columns so that the text wrapping looks less noticable and more professional.

and, it does it the left column, though I'd still like the spacing to be subtler.  i don't know a lot about spacing, but i can visually see what happens when i use newspaper spacing in word perfect.  space isn't just put between the words, but the letters and spaced differently, and the more places the spacing is spread out, the subtler it is.    i don't know how much of this can be accomplished on the web, but i want to try.  and, the reason i want to try is entirely because i recognize that my design is going to change when people have different screen sizes, when their browsers aren't maximized, when they make the font bigger or smaller--my design is fluid around that.  the subtler the spacing, then the less noticable it will be even in "extreme conditions"
0
IT, Stop Being Called Into Every Meeting

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 15

Expert Comment

by:ericpete
Comment Utility
Well... this is the general rule we used, but it's based on print criteria, so don't take it as gospel.

Obviously, we measured in picas for our column widths. We would take the size of the type in points, and multiply it by 1.25, so 8 point type would come out as 10, and the minimum column size we would run would be 10 picas. Yes, we allowed for flexibility; everything else being equal (column width, number of characters, etc.) Times Roman at 11.5 points would take about the same space as Swiss/Arial/Helvetica at 10 points, but we always assumed the base font for text would be the sans-serif.

From a stylistic point of view, my personal opinion is that you're actually better off having the right column (the narrower one) unjustified; it breaks up the page a bit, and makes it look less gray.

For your page, given the constraints imposed on you by your client, you've done fine; there's not really much else you CAN do, actually. No reflection on you, but if it comes up in conversation you can tell her that there's at least one 53-year-old political junkie who won't be reading it, though; that much bold type is just too hard on the eyes, and I'm not really interested in having to make changes to someone else's site just so I can use it. If that someone (and please don't take this personally -- it's not your call and I understand that) doesn't want to make it easy for me, then I'll go someplace else.

ep
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
really?  that's interesting.  so it's the bold type and not the size that's your beef?

what size are you viewing it in?  oh, and what font?
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
if you check that link again, i changed that one posting so that it wasn't bold so that you'd see a comparison.

for me, my firefox settings are the standard, and my IE ones are not.  so at the standard setting, it's a little big for me.  in IE, its perfect.  when it's no longer bold, i need the standard settings, the 16 px to read it, on my IE, which is probably 14px, it's just too small.  i can still read it clearly, i just don't like too or want to.  and in fact, it's probably something i'd recommend for a differently styled site--one where you're not just reading pages of text.

but try it for yourself and tell me what you think.  reopen that link.  and then in another window, go to one of the articles that i haven't changed (but a two column one also to be fair) like http://www.somedomain.com/tali/EE-testing/Somesite.html
and compare them both at whatever font size they open in your browser, and then make them smaller--to the font size you prefer to read in for both and see which is easier to read then
0
 
LVL 15

Expert Comment

by:ericpete
Comment Utility
The bold bothers me more than the size does. I've looked at both pages, though, and everything still appears bold. I'm looking at it using Firefox, 1024x728, 17" LCD monitor, default font size, and the typeface (based on your style sheet) is Arial.

One other note: it's actually fairly rare that a headline is in all caps any more, and then it's normally only one line. Again, it's a readability thing: all caps is more difficult to read than upper and lower case. I would suggest putting the headlines in a larger typeface, even if it's the same one.

Here's a quick view of what it looks like without the bold: http://www.cityofangels.com/Experts/Somesite.html

I have some other concerns, like all the <br> in there, but they're not really relevant to the discussion.
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility

http://www.somedomain.com/tali/EE-testing/Anothersite.html this doesn't appear non-bold?

the second one shouldn't, i only edited this one to appear non-bold and left the others as is.  I suggest clicking on compassionate conservatism for comparisons sake, though comparing your version of CC and the version on the testing server is even better--its the same article, not a similar page.

for me, at the 16 size font, i can read both.  the non-bold is slightly easier to read i think, but i don't find the bold hard.  at 14 px, i find the non-bold excruciatingly hard to read.  i think it's maybe because it's not that the font is small, it's maybe that it's an off white background, so the bold is easier, there's less white space, or in this case, off-white space.  this might only be me though.

the typeface thing was just a curiosity thing with me.  i've set it to Helvetica, Arial, sans-serif, and I wonder just how many people actually view the page in Helvetica.  i'm thinking of embedding helvetica--not that it makes much of a difference but it's so much prettier.

what about the br?  we're already very off-topic, i don't really mind.  though i suppose the other people on this thread might, though they've probably all unsubscribed anyway
0
 
LVL 15

Expert Comment

by:ericpete
Comment Utility
It appears non-bold now; it could well have been a caching issue. I do like it better. I don't mind the 16px font; I wouldn't use it, but I also wouldn't skip to another site because someone had used it. I think you're right about the smaller size on the unwhite background, but you might try reading it without the justification.

We actually started running ragged right in our newspapers back when we first switched from hot type to an IBM Composer -- a glorified Selectric -- that would allow you to produce justified type as long as you typed everything twice. My mother, who did the bulk of our typesetting in those days, broke a forearm, so typing things twice was something my father felt was a bit more than he could ask of her. Since much of our readership was older, the only comments we received were "what have you done? It seems a lot easier to read." We never changed back, even when computers would let us do whatever we wanted.

Virtually all of the people who will see it in Helvetica are Macintosh users. IIRC, Apple chose to buy the Helvetica license; Microsoft chose to develop something close. I wouldn't embed it; virtually no one can tell the difference. When we first switched over from Helvetica (which we had as phototype) to Arial (which we had on the computers) it took a magnifying loupe and a very well-trained eye to tell the difference.

Re: the <br>s. I don't understand the need for all that space at the bottom of the page.
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
oh, no need really, just a stylistic option.

that's the problem with the bold/non-bold issue.  i assume that everyone will simply change the font bigger or smaller as need be for their reading comfort.

so if at 16, non-bold is better, but bold is still readable and at 14, bold is better and non-bold is much much less readable than bold at 16.....see the dilema?  especially as while some people will make the text size smaller, there are many who will keep it the same size or larger.  i really wanted to choose a medium weight for the font--somewhere in between normal and bold, but while i can program it in, i can't see a visible difference in my browsers--not even when reading tutorials with demos, so it appears to not be very browser compatible

we tried the left column unjustified as well, but it was harder to read, i think maybe because there is a column on the right.  we decided to leave the right column unjustified, even when playing around and making it large enough that justification was possible, it just didn't look good or read as well.  but the justification seemed to really help the left column

and, it seems to work well also in articles that don't have a right column.  the new format calls for shorter updates every day or every other day, one column only, and longer ones slightly further apart.

i know that almost no one will tell that we've embedded helvetica, but it's so pretty.  and the client really hates arial, and finds it a very ugly knock-off.  theres actually a really good wikipedia article on helvetica

i have much bigger problems on my hands with the webpage currently but i like playing with the small stuff.  and hearing that people will/would leave a page because of its boldness is problematic
0
 
LVL 15

Expert Comment

by:ericpete
Comment Utility
"...see the dilema?..."

Not really. To me, boldface is for emphasis; using it as text is hard on my eyes, no matter what size it is. My reaction would be the same no matter what the site: do everything in bold, and you've lost me before you have a chance. I figure I'm like most people in that regard.

Every study done on the subject says that if you want people to read your text, DON'T DO EVERYTHING IN ALL CAPS BECAUSE IT'S HARD TO READ, regardless of the Internet custom that it's the equivalent of yelling. What makes it rude, in my view, is that it's illegible in any quantity. That's why you don't see large volumes of upper case type. Boldface is the same thing, in my view.

"...but while i can program it in, i can't see a visible difference in my browsers..."

That's because there IS no difference. For you to see a difference, you would need three different versions of Arial/Helvetica/sans serif -- a normal, a demibold (medium) and a bold. If they don't exist on your computer, then they won't show up; a web page can't create a font from whole cloth. If you don't have Arial Bold on your computer, then you would see everything as Arial; that's why very few websites are done in Optima or Franklin Gothic. Nobody would see anything in any face other than the default -- and if the style sheet didn't say Arial, Helvetica, sans serif, that default would probably be Times Roman. So what you're seeing is a difference between Arial and Arial Bold; there's nothing in between.

But it has nothing to do with the browsers you're using. They're doing the best they can with what they have.

"...and hearing that people will/would leave a page because of its boldness is problematic..."

I didn't say people will leave. I said I would leave. I might be the only one who does, though.
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
headlines i think are the only thing that are all caps, and that's all the client.  that's not page design or anything that's how the client writes the blog--i just convert it.
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
@ericpete

I forwarded your notes to the client who collected notes from viewers on two identical pages, save for bold or unbold.

Unbold won out.  Sometime tomorrow I'll be unbolding and making the background a shade lighter.

Thanks for the suggestion.
0
 
LVL 15

Expert Comment

by:ericpete
Comment Utility
Well, if nothing else, that's the beauty of style sheets. One small change and you've made one big difference.
0
 
LVL 3

Author Comment

by:lovewithnoface
Comment Utility
*nods*

You can see what the page will look like here, on the testing server.

http://www.somedomain.com/tali/EE-testing/Yetanothersite.html

No style sheets are used on the testing server though because that sorta defeats the purpose of testing.  If you look at the archive page, you'll see what I mean.

Since you have such a discerning eye, you may want to apply it here as well:

http://www.experts-exchange.com/Web/Web_Languages/CSS/Q_21983883.html
0

Featured Post

Find Ransomware Secrets With All-Source Analysis

Ransomware has become a major concern for organizations; its prevalence has grown due to past successes achieved by threat actors. While each ransomware variant is different, we’ve seen some common tactics and trends used among the authors of the malware.

Join & Write a Comment

Have you tried to learn about Unicode, UTF-8, and multibyte text encoding and all the articles are just too "academic" or too technical? This article aims to make the whole topic easy for just about anyone to understand.
This article explains how to prepare an HTML email signature template file containing dynamic placeholders for users' Azure AD data. Furthermore, it explains how to use this file to remotely set up a department-wide email signature policy in Office …
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

762 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

8 Experts available now in Live!

Get 1:1 Help Now