Solved

Align-text:Justify; giving extra spaces between words

Posted on 2013-01-14
12
559 Views
Last Modified: 2013-02-13
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
0
Comment
Question by:mshaji
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 3
  • 3
  • 3
  • +2
12 Comments
 
LVL 30

Expert Comment

by:IanTh
ID: 38773615
what browser are you using ?
0
 

Author Comment

by:mshaji
ID: 38773621
I am using internet explorer 8
0
 
LVL 30

Expert Comment

by:IanTh
ID: 38773646
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
Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 

Author Comment

by:mshaji
ID: 38773658
I tried in chrome also. but the same with spaces. I thing css must work regardless of browsers.
0
 
LVL 30

Expert Comment

by:IanTh
ID: 38773665
you do get slight variations between browsers as they ain't the same
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38773949
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
 
LVL 53

Accepted Solution

by:
COBOLdinosaur earned 250 total points
ID: 38775229
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
 

Author Comment

by:mshaji
ID: 38777280
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
 
LVL 43

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 250 total points
ID: 38777741
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38779469
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
 
LVL 53

Expert Comment

by:COBOLdinosaur
ID: 38886190
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
 
LVL 25

Expert Comment

by:Kyle Hamilton
ID: 38886507
actually I answered the question first  and got no points - haha - what a waste.
0

Featured Post

Online Training Solution

Drastically shorten your training time with WalkMe's advanced online training solution that Guides your trainees to action. Forget about retraining and skyrocket knowledge retention rates.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

International Data Corporation (IDC) prognosticates that before the current the year gets over disbursing on IT framework products to be sent in cloud environs will be $37.1B.
This article discusses how to create an extensible mechanism for linked drop downs.
In this tutorial viewers will learn how to style different bullet points for unordered lists in CSS. Begin with a normal unordered list; the default bullet point is a solid circle: In the CSS, create a defined class of unordered list by typing "ul.S…
In this tutorial viewers will learn how to embed an audio file in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: : The declaration should display (CODE) HTML5 is supported by the most recent versions of all major browsers…
Suggested Courses

615 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