Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Align-text:Justify; giving extra spaces between words

Posted on 2013-01-14
12
Medium Priority
?
572 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
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 500 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 44

Assisted Solution

by:Chris Stanyon
Chris Stanyon earned 500 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

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

Question has a verified solution.

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

Today, the web development industry is booming, and many people consider it to be their vocation. The question you may be asking yourself is – how do I become a web developer?
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
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…
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…
Suggested Courses

971 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