August 26, 2000 - Dynamic Right Justification | WebReference

August 26, 2000 - Dynamic Right Justification

Yehuda Shiran August 26, 2000
Dynamic Right Justification
Tips: August 2000

Yehuda Shiran, Ph.D.
Doc JavaScript

There are several ways to right-justify text in an object. You assign it as follows:

object.style.textJustify = sAlign;

where sAlign is one of:

auto. Allows the browser to choose the right algorithm. The default.
  • distribute. Much like the newspaper value below. Optimized for Asian languages, such as Thai.
  • distribute-all-lines. Same as distribute above, except that the last line of the paragraph is also justified.
  • distribute-center-last. Not implemented.
  • inter-cluster. Justifies lines of text that contain no inter-word spacing. Optimized for Asian languages.
  • inter-ideograph. Justifies lines of ideographic text, and increases/decreases both inter-ideograph and inter-word spacing.
  • inter-word. Justifies text by increasing spacing between words. Last line is not affected. Fastest algorithm for justification.
  • kashida. Justifies by elongating characters at chosen points. Intended for Arabic script languages. Supported in Microsoft Internet Explorer 5.5 and later.
  • newspaper. Justifies by increasing and decreasing the spacing between letters and between words. Most sophisticated algorithm for latin alphabets.

    The following paragraph demonstrates the different alternatives for right-justifying text. Click on one of the links below to check the different effects:

    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

    auto distribute distribute-all-lines inter-ideograph inter-word kashida (IE5.5 and up) newspaper Here is how we defined the above paragraph and links:

    <P ID="justifyEffect" STYLE="text-justify:auto; width:100%; left:0; text-align:justify;">
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(justifyEffect.style.textJustify='auto')">auto</A>
<A HREF="javascript:void(justifyEffect.style.textJustify='distribute')">distribute</A>
<A HREF="javascript:void(justifyEffect.style.textJustify='distribute-all-lines')">distribute-all-lines</A>
<A HREF="javascript:void(justifyEffect.style.textJustify='inter-ideograph')">inter-ideograph</A>
<A HREF="javascript:void(justifyEffect.style.textJustify='inter-word')">inter-word</A>
<A HREF="javascript:void(justifyEffect.style.textJustify='kashida')">kashida (IE5.5 and up)</A>
<A HREF="javascript:void(justifyEffect.style.textJustify='newspaper')">newspaper</A></P>

    Notice that the text-align property must be assigned the value of justify for this example to work.