CSS text-transform, All Caps, Upper, Lower & Title Case

-

العمل مع CSS text-transform ، لتغيير حالة الاحرف 

يمكن من خلال هذه الخاصية التحكم بشكل ومظهر محتوى الصفحات ، حيث تحتوي هذه الخاصية text-transform   على مجموعة من السمات للتحكم بالنص وهي : 


الخاصية
الوصف
capitalize
تحويل الحرف الأول من كل  كلمة إلى احرف كبيرة.
uppercase
تحويل جميع الحروف الى احرف كبيرة
lowercase
تحويل جميع الحروف الى احرف صغيره
full-width
تستخدم هذه الخاصية بحالات خاصة مثل الاحرف اليابانية او الصينية، يطلق علي الاسم <ruby> حيث يعمل على تحويل جميع الاحرف الى الحجم الكامل الخاص به
none
منع التغييرات ، تبقي جميع الاحرف على الحالة الأولية تما تم تضمينها
inherit
تستخدم في حال كان لدينا child و parent  حيث يتم تطبيق حالة parent على parent 


طريقة الكتابة 

/* Keyword values */

        text-transform: none;

        text-transform: capitalize;

        text-transform: uppercase;

        text-transform: lowercase;

        text-transform: full-width;

        text-transform: full-size-kana;

        /* Global values */

        text-transform: inherit;

        text-transform: initial;

        text-transform: revert;

        text-transform: unset;

أمثلة:

مثال 1 : استخدام none

قم بانشاء ملف CSS باسم style ثم اضف الكود التالي : 


html,
body {
    margin: 0;
    height: 100%;
    text-align: center;
    font-family: "Muli", sans-serif;
}
body {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}
footer {
    grid-row-start: 3;
    grid-row-end: 3;
    padding: 30px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
span {
    text-transform: none;
}
strong {
    float: right;
}


ثم قم باضافة ملف HTML باسم Index ثم اضف التالي: 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <link href="Style.css" rel="stylesheet" />
</head>
<body>
    <div class="main-wrapper">
        <p>
            Initial String
            <strong>text here text here, ...</strong>
        </p>
        <p>
            text-transform: none
            <strong><span>text here text here, ...</span></strong>
        </p>
    </div>
    <footer></footer>
</body>
</html>

قم بتشغيل الصفحة ستكون النتيجة (حالة الاحرف كما هي لم يتم اي تغيير عليها)




مثال 2 : تحويل حالة الحرف الأول بكل كلمة الى Uppercase 
سنقوم بنسخ الكود السابق مع اضافة تعديل بسيط
ملف Css 

html,
body {
    margin: 0;
    height: 100%;
    text-align: center;
    font-family: "Muli", sans-serif;
}
body {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}
footer {
    grid-row-start: 3;
    grid-row-end: 3;
    padding: 30px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
span {
    text-transform: none;
}
strong {
    float: right;
}
p {
    text-transform: capitalize;
}


ملف HTML 

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <link href="Style.css" rel="stylesheet" />
</head>
<body>
    <div class="main-wrapper">
        <p>
            Initial String
            <strong>text here text here, ...</strong>
        </p>
        <p>
            text-transform: none
            <strong><span>text here text here, ...</span></strong>
        </p>
        <p>in this example, i am going to set every first value of the text to uppercase. to do it we will use capitalize property in  text-transform.</p>
    </div>
    <footer></footer>
</body>
</html>
قم بتشغل الصفحة ستكون النتيحة 



مثال 3: تحويل حالة الاحرف جميعها  الى Uppercase 
تماما كما فعلنا بالمثال السابق باستنثاء تغيير الكود
 text-transform: capitalize  في ملف CSS الى text-transform: uppercase
بعد التغيير لنقم بتشغيل الصفحة ستكون النتيجة

مثال 5:استخدام الخاصية text-transform لاجراء تصميم على الحرف الاول من فقرة معينة
قم باضفة الكود التالي الى  ملف css 
html,
body {
    margin: 0;
    height: 100%;
    text-align: center;
    font-family: "Muli", sans-serif;
}
body {
    min-height: 100%;
    display: grid;
    grid-template-rows: 1fr auto;
}
footer {
    grid-row-start: 3;
    grid-row-end: 3;
    padding: 30px;
    background: linear-gradient(70deg, #0ebeff, #ffdd40, #ae63e4, #47cf73);
}
span {
    text-transform: none;
}
strong {
    float: right;
}
p {
    text-transform: lowercase;
    line-height: 4;
}
    p::first-letter {
        font-size: 4em;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
    } 
ثم قم بتعديل ملف HTML كالتالي : 
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Sticky Footer</title>
    <link href="Style.css" rel="stylesheet" />
</head>
<body>
    <div class="main-wrapper">
        <p>in this example, i am going to set every first value of the text to uppercase. to do it we will use capitalize property in  text-transform.</p>
    </div>
    <footer></footer>
</body>
</html>
قم بتشغيل الصفحة ستكون النتيجة : 
لقد قمنا باضافة كود خاص لاول حرف في الفقرة بحيث يتحكم بمواصفات هذا الحرف باستخدام الكود : 
    p::first-letter {
        font-size: 4em;
        font-weight: bold;
        font-family: sans-serif;
        text-transform: uppercase;
    } 

بهذا نكون قد تعلمنا كيفية التحكم بالنصوص وتغييرها في الصفحات الخاصة بنا، تعتبر CSS خيار افضل من لغة Javascript للتحكم بالنصوص(يمكن التحكم بالنصوص ايضا عن طريق Javascript).