Solved

Align-text:Justify; giving extra spaces between words

Posted on 2013-01-14
12
546 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
  • 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
 

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
Free Trending Threat Insights Every Day

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
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 42

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

What Is Threat Intelligence?

Threat intelligence is often discussed, but rarely understood. Starting with a precise definition, along with clear business goals, is essential.

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
This article discusses four methods for overlaying images in a container on a web page
In this tutorial viewers will learn how to embed Flash content in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <object> tag to embed Flash content.: To specify that the object is Flash content, d…
In this tutorial viewers will learn how to embed videos in a webpage using HTML5. Ensure your DOCTYPE declaration is set to HTML5: "<!DOCTYPE html>": Use the <video> tag to insert a video. Define the src as the URL of your video; this is similar to …

758 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

22 Experts available now in Live!

Get 1:1 Help Now