spacer
Yehuda Shiran September 4, 2000
Using the Kashida Effect
Tips: September 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

Developer News
Google Chrome Playing Catch-Up on Extensions
Open Solutions Alliance Gets New Leadership
Red Hat Spacewalk Expands Linux Management
Kashida is a typographic effect that justifies lines of text by elongating characters at algorithmically-selected points. It is mostly used in Arabic writing systems. The property can be used with any justification style such as the auto, distribute, kashida, and newspaper values of the textJustify property.

You can control the kashida effect by specifying the textKashidaSpace property of the style object. The kashida effect is measured in the ratio of kashida expansion to empty space expansion. When it is 100%, there is only kashida expansion. When it is 0%, there is only white space expansion. You can find out the kashida effect of an object in object.style.textKashidaSpace. Here is how you specify the kashida effect:

object.style.textKashidaSpace = vKashida;

where vKashida is one of two options:

  • percentage. Integer, followed by a %. 100% is kashida expansion only; 0% is white space expansion only.

  • inherit. Text is expanded like the text in the parent object.

The following paragraph (works only in IE 5.5 and up) demonstrates the textKashidaSpace property. Click one of the two links following the paragraph, and watch the kashida effect (early versions of IE 5.5 do not support it!):

Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line

100% kashida 0% kashida

Here is how we defined the above paragraph and links:

<P ID="kashidaEffect" STYLE="text-kashida-space:100%; width:100%; text-align:justify; left:0">
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line Long Line
Long Line Long Line Long Line Long Line Long Line Long Line 
</P>
<A HREF="javascript:void(kashidaEffect.style.textKashidaSpace='100%')">100% kashida</A>
<A HREF="javascript:void(kashidaEffect.style.textKashidaSpace='0%\)">0% kashida</A>


People who read this tip also read these tips:

Look for similar tips by subject:

internet.comearthweb.comDevx.commediabistro.comGraphics.com

Search:

Jupitermedia Corporation has two divisions: Jupiterimages and JupiterOnlineMedia

Jupitermedia Corporate Info

Legal Notices, Licensing, Reprints, Permissions, Privacy Policy.
Advertise | Newsletters | Tech Jobs | Shopping | E-mail Offers

webref The latest from WebReference.com Browse >
Popular JavaScript Framework Libraries: An Overview - Part 3 · Accessing Your MySQL Database from the Web with PHP · Working with the DOM Stylesheets Collection
Sitemap · Experts · Tools · Services · Email a Colleague · Contact FREE Newsletters 
 The latest from internet.com
MS Access and MySQL · Cisco AutoQoS: VoIP QoS for Mere Mortals · While VoIP Adoption Explodes in Enterprise, Carrier Spending Lags