| home / programming / corecss / 2 |   [next] |
|
|
|
This excerpt is taken from the book: Core CSS, 2nd Edition by Prentice Hall.
text-kashida-space property gives you fine control
over this type of justification, setting the ratio of kashida to whiter-space
expansion.
The text-kashida-space property has two values: a percentage
value and inherit. The inherit value takes on whatever
parent value may already be set.
The effects of text-kashida-space are subtle but definite. The
effect is not so much to justify the line of characters across a line, but instead
to stretch the very characters themselves in order to fill in a line. It is
meant to be used in conjunction with text-align: justify and text-justify:
kashida, and Listing 11-10 shows how they all work together to produce
an effect.
Listing 11-10 text-kashida-space Sample Code
<html dir="rtl" lang="ar">
<head>
<title>text-kashida-space Example</title>
<meta http-equiv="Content-Type" content="text/html; char-set=windows-1256">
<style>
p.koran {font-size: 25pt; width: 550px; font-family: "Traditional Arabic"; font-weight: bold; text-align: justify; text-justify: kashida}
</style>
</head>
<body>
:The following are the first few lines of the Koran
<p class="koran" style="text-kashida-space: 0%">
بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِِ
الْحَمْدُ للّهِ رَبِّ الْعَالَمِينَ
الرَّحْمـنِ الرَّحِيمِ
مَالِكِ يَوْمِ الدِّينِ
إِيَّاكَ نَعْبُدُ وإِيَّاكَ نَسْتَعِينُ
اهدِنَـا الصِّرَاطَ المُستَقِيمَ
صِرَاطَ الَّذِينَ أَنعَمتَ
عَلَيهِمْ غَيرِ المَغضُوبِ عَلَيهِمْ وَلاَ
الضَّالِّينَ
</p>
:The same text, but now with a setting of <code>text-kashida-space: 10%</code>
<p class="koran" style="text-kashida-space: 10%">
بِسْمِ اللهِ الرَّحْمنِ الرَّحِيمِِ
الْحَمْدُ للّهِ رَبِّ الْعَالَمِينَ
الرَّحْمـنِ الرَّحِيمِ
مَالِكِ يَوْمِ الدِّينِ
إِيَّاكَ نَعْبُدُ وإِيَّاكَ نَسْتَعِينُ
اهدِنَـا الصِّرَاطَ المُستَقِيمَ
صِرَاطَ الَّذِينَ أَنعَمتَ
عَلَيهِمْ غَيرِ المَغضُوبِ عَلَيهِمْ وَلاَ
الضَّالِّينَ
</p>
</body>
</html>
text-kashida-space
values.
Figure 11-11 shows the difference between Arabic text that uses the default
value, and with a text-kashida-space value set to 10%.
While the effect can be seen throughout the whole of second paragraph of text,
in this case the effect is perhaps most clearly seen on the first line: the
individual words are expanded and the space between them decreased.
text-kashida-position
property in the CSS3 text module works in exactly the same way as it currently
functions within Internet Explorer.
| home / programming / corecss / 2 | [next] |
The Network for Technology Professionals
Legal Notices, Licensing, Permissions, Privacy Policy.
Advertise | Newsletters | E-mail Offers
|
Video: How System Center Helps Reduce IT Costs IBM Cloud Computing for Developers Virtual Event, April 6-8 |
Microsoft Video: OCS and Exchange: Platform Futures MORE WEBCASTS, PODCASTS, AND VIDEOS |
Created: March 27, 2003
Revised: August 19, 2003
URL: http://webreference.com/programming/corecss/2
