خاصية text-transform
آخر تحديث: 2026-09-13
text-transform خاصية text-transform
تغيّر خاصية text-transform في CSS طريقة عرض النص من حيث الحالة — uppercase أو lowercase أو capitalized — دون تعديل المحتوى الأساسي. يبقى النص الأصلي في HTML كما هو، لذا لا تتأثر قارئات الشاشة والنص المنسوخ؛ والتحويل بصري بحت.
| الفئة | |
|---|---|
| القيمة الأولية | none |
| موروث | نعم |
| ينطبق على | all |
| نوع الحركة | discrete |
| إصدار CSS | CSS1 |
| الحالة | قياسي |
📝 التركيب
text-transform: none | capitalize | uppercase | lowercase | full-width;⚙️ القيم
| القيمة | النوع | الوصف |
|---|---|---|
none | capitalize | uppercase | lowercase | full-width | كلمة مفتاحية | قيم تحويل حالة النص |
▶ مثال
عدّل الكود أدناه وشاهد النتيجة المباشرة في الملعب:
🌐 دعم المتصفحات
| المتصفح |  Chrome |
 Edge |
 Firefox |
 Safari |
 Opera |
|---|---|---|---|---|---|
| text-transform | ✓ v1 | ✓ v12 | ✓ v1 | ✓ v1 | ✓ v1 |
| مدعوم في جميع المتصفحات الرئيسية | |||||
تلميح： تجعل capitalize الحرف الأول من كل كلمة كبيرًا، لكنها بلا تأثير على الكتابات مثل الصينية أو اليابانية التي لا تملك تمييزًا بين الحالات.
تحذير： تطبّق uppercase قواعد خاصة للحالة في بعض اللغات (اليونانية، التركية)، لذا قد تختلف النتيجة عما تتوقعه.
❓ الأسئلة الشائعة
Qهل يغيّر text-transform محتوى النص الفعلي في DOM؟
Aلا. تؤثر فقط على العرض المرئي؛ يبقى النص في DOM وفي المصدر دون تغيير، وعمومًا ينسخ المستخدمون النص الأصلي. وهي ممتازة للعناوين المتسقة بحروف كبيرة وتنسيق تسميات الأزرار.
Qلما يُستخدم القيمة full-width لخاصية text-transform؟
Aتحوّل الأحرف ذات العرض النصفي (الحروف اللاتينية والأرقام وعلامات الترقيم) إلى أشكال العرض الكامل، بحيث تتماشى الأحرف الغربية بشكل متساوٍ داخل الفقرات الصينية. تُستخدم عادةً في التنضيد الياباني والصيني ولا تؤثر على الأحرف التي هي بالفعل بعرض كامل مثل الحروف الصينية.
Qلماذا لا يكون لقيمة capitalize أي تأثير على النص الصيني؟
Aتجعل capitalize الحرف الأول من كل كلمة كبيرًا فقط، والصينية لا تملك كلمات ولا مفهومًا للحالة، لذا لا يتغير شيء؛ وفي النص المختلط يتأثر الجزء الإنجليزي فقط. كما أن لغات مثل اليونانية والتركية قواعد خاصة للحالة، فقد تختلف النتائج عما تتوقعه.
🏷️ خصائص ذات صلة
💡 حالات ذات صلة
📚 دروس ذات صلة
