Click Here to Install Silverlight*
Middle EastChange|All Microsoft Sites

Justifying Text using Cascading Style Sheets (CSS) in Internet Explorer 5.5

By Paul Nelson, Microsoft Corporation

Click Here For A Demo Page


The World Wide Web Consortium has spent a lot of time thinking out style sheet support for web pages. The Cascading Style Sheet (CSS) specification has been expanded to include support for international text. One item covered in the specification for International Layout is text justification using several different methods.

In Internet Explorer 5.5 we implemented complex script support for CSS justification. This includes languages like Arabic, Hindi and Thai. The CSS specification defines the following behaviors for text justification: 'text-align', 'text-justify', and 'kashida-space'. This article will provide information about each type of justification and how it can be used with Arabic script langauges.

Latin based text is justified using inter-word spacing and/or inter-character spacing to expand the line so that both right and left edges touch the margins. Languages written in the Arabic script are justified a little differently by elongating one or more connecting opportunites in each word. This type of expansion of Arabic is normally called kashida (ßÔíÏÉ) expansion. The elongation character is known as either the tatweel (ÊØæíá) or kashida character. You can type this manually on the Arabic keyboard by typing Shift+j or Shift+Ê.

NOTE: If you read HTML generated by Word for justified text you will notice it outputs 'text-kashida' for justified Arabic text. This value is depricated because it defines incorrect behavior for justifying Arabic text by changing the line wrapping location because it guarantees that a minimum percent of the line will be set aside for kashida characters. Because 'text-kashida' is depricated I will not be addressing it and do not recommend that people use that style


'text-align' is defined in CSS as having the values: left, right, center, justify, and inherit. The values for text-align are visual and do not change meaning based on text flow. Using 'text-align' is the same as using ALIGN= in HTML.

The default behavior for IE 5.5 is to use kashida justification for Arabic text when ALIGN=JUSTIFY is used. The following screen shot has the paragraph shown defined as:
"<"P dir=rtl style="BACKGROUND: lightblue; DIRECTION: rtl; unicode-bidi: embed; TEXT-ALIGN: justify;"">".


Value: auto | inter-word | inter-ideograph | distribute | distribute-all-lines | newspaper | kashida
Initial: auto
Applies to: block-level elements
Inherited: yes
Percentage values: N/A

Since this article covers Arabic justification I will only address common justification types used with Arabic.
These justification types are:

  1. inter-word,
  2. newspaper
  3. kashida.

In these types of justification, the last line is never expanded and flows in the direction of the paragraph. Thus, it is right aligned for a normal Arabic paragraph.

It is critical for you to understand that you must specify style='text-align: justify;' in your style for the 'text-justify' property to have effect.

  1. Inter-word:
    Style: text-justify, Value: inter-word

    This is the simplest justification. It is achieved by expanding the space between words. There should be no expansion inside of words. As you can tell from the picture for this, I have a bug in my code. The sample is defined as:
    "<"p dir=rtl style="TEXT-JUSTIFY: inter-word; BACKGROUND: lightblue; DIRECTION: rtl; unicode-bidi: embed; TEXT-ALIGN: justify"">".

  2. Newspaper
    Style: text-justify, Value: newspaper

    Both inter-letter and inter-word expansion or compression is possible. Arabic implementation in IE 5.5 will not support compression since this can cause problems with connecting letters.

    Newspaper justification is normally seen in newspapers or magazines where narrow columns are used. Expansion inside of words occurs at each connecting point. There is no expansion for characters that do not connect. White spaces expand in a larger amount than expansion within words. This helps the readability of text in narrow columns.

    The sample for newspaper style demonstrates that expansion is happening in all connecting points in the word. The paragraph is defined as:
    "<"P dir=rtl style="TEXT-JUSTIFY: newspaper; BACKGROUND: lightblue; DIRECTION: rtl; unicode-bidi: embed; TEXT-ALIGN: justify"">"

  3. Kashida:
    Style: text-justify, Value: kashida

    This is the most common justification for Arabic script languages. It is achieved by expanding the words at one connection opportunity per word based on a connection type priority scheme. The priority scheme is described later in the article.
    The ratio of kashida to white space is obtained from the proposed CSS style 'kashida-space' (discussed later, and to be supported in IE 6.0)
    The sample paragraph has the following description:


'kashida-space' is proposed for the CSS specification to allow for better justification of Arabic text. This property is defined below and is used to control the amount of justification given to kashidas in ratio to spaces.
Value: 0-100
Initial: 100
Applies to: block-level elements
Inherited: yes
Percentage values: 0-100

kashida-space:0 is like inter-word.
kashida-space:10 means that the white space will be used 9 times more than kashida.
kashida-space:80 means that kashida will be used 4 times more than white space.
kashida-space:100 is using only kashida.

NOTE: 'kashida-space' will be supported in Internet Explorer beginning in version 6.0.

Assigning Kashida Expansion Priorities

Earlier I indicated that Microsoft performs kashida justification based on a connection priority system. The idea can be summed up in the following formula.

  1. Find the priority of the connecting opportunities in each word
  2. Add expansion at the highest priority connection opportunity
  3. If more than one connection opportunity have the same highest value, use the opportunity closest to the end of the word.

Following is a chart that provides the priority for connection opportunities and where expansion occurs. The character group names are those in table 6.6 of the UNICODE 2.0 book.

Priority Glyph Condition Kashida Location
1 User inserted Kashida (Shift+j or Shift+Ê) The user entered a Kashida in a position. Thus, it is the highest priority to insert an automatic kashida After the user inserted kashida
2 Seen and Sad Connecting to the next character. (Initial or medial form). After the character.
3 Taa Marbutah, Haa, Dal Connecting to previous character. Before the final form of these characters.
4 Alef, Tah Lam and Caf (or Kaf as it is called in other parts of the book) and Gaf Connecting to previous character. Before the final form of these characters.
5 RA, Ya and Alef Maqsurah Connected to medial BAA Before preceding medial Baa
6 WAW, Ain, Qaf and Fa Connecting to previous character. Before the final form of these characters.
Other connecting characters Connecting to previous character. Before the final form of these characters.


The source of the samples in this article is available (put where it is available - Print in a sidebar? On the magazine's web site). Please use it with IE 5.5 and see how it works when you resize the width of your browser's window. The words in the sample seem like random words. However, all seven of the priorities above are found in the words.

Using CSS in your web pages adds an increased capability for producing more beautiful Arabic pages.

©2017 Microsoft Corporation. All rights reserved. Contact Us |Terms of Use |Trademarks |Privacy Statement