Solved

Align-text:Justify; giving extra spaces between words

Posted on 2013-01-14
12
551 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
Netscaler Common Configuration How To guides

If you use NetScaler you will want to see these guides. The NetScaler How To Guides show administrators how to get NetScaler up and configured by providing instructions for common scenarios and some not so common ones.

 

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

PRTG Network Monitor: Intuitive Network Monitoring

Network Monitoring is essential to ensure that computer systems and network devices are running. Use PRTG to monitor LANs, servers, websites, applications and devices, bandwidth, virtual environments, remote systems, IoT, and many more. PRTG is easy to set up & use.

Question has a verified solution.

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

Suggested Solutions

This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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 …
In this tutorial viewers will learn how to style a corner ribbon overlay for an image using CSS Create a new class by typing ".Ribbon":  Define the class' "display:" as "inline-block": Define its "position:" as "relative": Define its "overflow:" as …
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

777 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