Align-text:Justify; giving extra spaces between words

Dears,

I have below code with CSS
<div style="text-align: justify;  font-size:23px; line-height:30px; padding-right: 10px; margin: 3px;font-family:Arial; color:black;">
<xsl:value-of select="@Final_x0020_Print" disable-output-escaping="yes"/>
</div>

When I see the out put I am seeing it with some extra spaces.

How to remove these extra spaces by using css

Regards
Shaji
mshajiAsked:
Who is Participating?

Improve company productivity with a Business Account.Sign Up

x
 
COBOLdinosaurConnect With a Mentor Commented:
You can do some kerning with the letter-spacing and word-spacing if you are trying to setup the presentation for a heading, but for any block of text, justify is almost never a good idea, because of variability of presentation cross-browser.

Cd&
0
 
IanThCommented:
what browser are you using ?
0
 
mshajiAuthor Commented:
I am using internet explorer 8
0
Get 10% Off Your First Squarespace Website

Ready to showcase your work, publish content or promote your business online? With Squarespace’s award-winning templates and 24/7 customer service, getting started is simple. Head to Squarespace.com and use offer code ‘EXPERTS’ to get 10% off your first purchase.

 
IanThCommented:
its already old the latest is ie 9 as m$ is silently updating ie and a lot of users have switched to chrome so I would try it in them first also show us the extra space from yoouu code its not really apparent
0
 
mshajiAuthor Commented:
I tried in chrome also. but the same with spaces. I thing css must work regardless of browsers.
0
 
IanThCommented:
you do get slight variations between browsers as they ain't the same
0
 
Kyle HamiltonData ScientistCommented:
What you're seeing makes perfect sense. It has nothing to do with CSS.

If you justify text, you will get extra spacing between words. If the text hadn't been justified, it would not have reached the right margin and there wouldn't be any extra space between words. The space that would have been at the end of the line has to go somewhere, and it goes between the words. That's why justified text tends to look pretty bad, and is hard to read - especially if your text column is narrow.

Unless you're working with a sophisticated typographic tool like Quark Express which might compensate for the extra space by adjusting tracking as needed, the result you're seeing is to be expected.

If you want more input though, you'll need to post a link to the page.
0
 
mshajiAuthor Commented:
Dears,

I wrote the below code in a page where I want to take the printout of the page with JavaScript print fiction (window.print()).

Now the problem is
In diffident printers this page coming in different style with some spaces between words, alignment etc.
I checked with IE, Chrome, Mozilla etc

See my code here including css and javascript to print
<style  type="text/css">
				
			/* ------------------
			 styling for the tables 
			   ------------------   */
			body
			{
				line-height: 1.9em;
			}
			
			
			#ver-zebra
{
	font-family:Arial;
	font-size: 22px;
	margin: 15px;
	width: 800;
	text-align: justify;
	border-collapse: collapse;
color: #000000;
}
#ver-zebra th
{
	font-size: 14px;
	font-weight: normal;
	padding: 0px 0px;
	border-right: 1px solid #000;
	border-left: 1px solid #fff;
	color: #000000;
}
#ver-zebra td
{
	padding: 8px 20px;
	border-right: 0px solid black;
	border-left: 0px solid black;
	color: #000000;
}			.ms-standardheader {
				
				font-weight:normal;
				font-size:18px;
				}
			}
			    
</style> 
<tr>
			<td class="ms-toolbar" nowrap="nowrap">
				<span  id="printBtn">
					<input type="button" value="Print this form" style="background-color:#06587e; width: 124px; height: 32px; color:white" onClick="document.getElementById('printBtn').style.display = 'none'; window.print(); document.getElementById('printBtn').style.display = 'block';" ></input>
				</span>
			</td>
		</tr>


<table border="0" cellspacing="0" width="100%" id="ver-zebra">

					<tr>
						
						<td valign="top" dir="rtl">
							<div ><xsl:value-of select="@Final_x0020_Print" disable-output-escaping="yes"/></div>
						</td>
						

					</tr>

					
				</table>

Open in new window




So is there any way to make a print option by javascript or c# or jquery etc which will be suitable for all printers in my company.

My main aim is to print this page content in a good style and format.

Anybody   kind support appreciated.


Regards
Shaji
0
 
Chris StanyonConnect With a Mentor Commented:
Drop the text-align:justify, and change it to text-align:left. As has already been pointed out, it will add extra spaces so that your text is left AND right aligned. That's the way justified text works, and text-formatting is fairly rudimentary in HTML, so anything more than basic will look ugly.
0
 
COBOLdinosaurCommented:
So is there any way to make a print option by javascript or c# or jquery etc which will be suitable for all printers in my company.

NO


Cd&
0
 
COBOLdinosaurCommented:
So the correct and ONLY answer gets a C grade.  You don't want an answer to your questions. You want the universe re-ordered.  Are you a 3-year old child?  

If you are not going to grade correct answers properly then it is a waste of our time trying to help you.  In the future I will simply ignore you because you do not deserve help.

Cd&
0
 
Kyle HamiltonData ScientistCommented:
actually I answered the question first  and got no points - haha - what a waste.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.