الخاصية `text-transform`

الخاصية text-transform في CSS تُحدِّد ما هي حالة الأحرف التي سيُعرَض فيها العنصر؛ إذ يمكن استخدام هذه الخاصية لجعل الأحرف كلها بالحالة الكبيرة (uppercase)، أو بالحالة الصغيرة (lowercase)، أو جعل أوّل حرف من كل كلمة كبيرًا.

بطاقة الخاصية

القيمة الابتدائية	`none`
تُطبَّق على	جميع العناصر.
قابلة للوراثة	نعم
قابلة للتحريك	لا
القيمة المحسوبة	كما حُدِّدت.

يجدر بالذكر أنَّ هذه الخاصية ليس لها أثر على النصوص العربية.

/* الكلمات المحجوزة */
text-transform: capitalize;
text-transform: uppercase;
text-transform: lowercase;
text-transform: none;

/* القيم العامة */
text-transform: inherit;
text-transform: initial;
text-transform: unset;

أمثلة

مثال عن استخدام مختلف قيم الخاصية text-transform:

<p class="text-transform-none">
    <strong>Hello world!</strong>
    <br>
    <code>text-transform: none;</code>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr>
<p class="text-transform-capitalize">
    <strong>Hello world!</strong>
    <br>
    <code>text-transform: capitalize;</code>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr>
<p class="text-transform-uppercase">
    <strong>Hello world!</strong>
    <br>
    <code>text-transform: uppercase;</code>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>
<hr>
<p class="text-transform-lowercase">
    <strong>Hello world!</strong>
    <br>
    <code>text-transform: lowercase;</code>
    <br>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat.
</p>

شيفرة CSS:

p {
  background-color: #f8f9fa;
  border: 1px solid #eaecf0;
  padding: 1em;
  margin: 1em;
}
 
.text-transform-none       { text-transform: none; }
.text-transform-capitalize { text-transform: capitalize; }
.text-transform-uppercase  { text-transform: uppercase; }
.text-transform-lowercase  { text-transform: lowercase; }

دعم المتصفحات

الميزة	Chrome	Firefox	Internet Explorer	Opera	Safari
الدعم الأساسي	1.0	1.0	4.0	7.0	1.0

البنية العامة

تقبل الخاصية text-transform إحدى الكلمات المحجوزة التالية.

`none`

ترك حالة الأحرف كما هي.

`capitalize`

تحويل أوّل حرف من كل كلمة إلى الحالة الكبيرة، لكن لن تتأثر الأحرف البقية وستبقى كما هي (سواءً كانت بالحالة الكبيرة أو الصغيرة).

`uppercase`

جعل جميع الأحرف بالحالة الكبيرة.

`lowercase`

جعل جميع الأحرف بالحالة الصغيرة.

البنية الرسمية

text-transform: none | capitalize | uppercase | lowercase;

مصادر ومواصفات

مسودة CSS Text Level 4.
مسودة CSS Text Module Level 3.
مواصفة ‎CSS Level 2 (Revision 1)‎.
مواصفة CSS Level 1.