این آموزش در تاریخ ۱۴۰۰/۱۱/۰۵ آپدیت شده است.
آموزش ویژگی hanging-punctuation در CSS
سلام خدمت تمامی دوستان و همراهان محترم سایت آموزشی فری لرن ، امیدوارم که حال همگیتون خوب باشه. لطفا در ادامه با آموزش ویژگی hanging-punctuation در CSS با من همراه باشید.
Free-Learn
آنچه در این جلسه میخوانید :
ویژگی hanging-punctuation در CSS
با استفاده از ویژگی hanging-punctuation ( یا به اصطلاح حلق آویز ) در CSS میتوان بر نحوه نمایش و قرار گیری علائم نگارشی همچون علامت نقل و قول های باز و بسته ، کوتیشن ها ( ” ” ) و .. در متن کنترل داشت.
مثلا میتونیم مشخص کنیم که علامت کوتیشن ها “” در خارج از باکس ( جعبه ) متن قرار بگیرند، به تصویر زیر که نگاه کنید میتوانید عملکرد این ویژگی را مشاهده نمایید :
اون خط مشکی داره خط باکس متن رو نشون میده، و همانطور که مشاهده مینمایید علامتی مثه نقل قول باز و پرانتز و.. در خارج از این خط (باکس متن) قرار گرفتند.
برای استفاده از این ویژگی میتوان از روش های زیر برای مقدار دهی استفاده کرد :
- تک مقداری
|
1 2 3 |
p { hanging-punctuation: first; } |
- ۲ مقداری
|
1 2 3 |
p { hanging-punctuation: first allow-end; } |
- ۳ مقداری
|
1 2 3 |
p { hanging-punctuation: first force-end last; } |
این ویژگی فقط در مرورگر سافاری یا Safari پشتیبانی میشود.
Free-Learn
مثال از این ویژگی
در ادامه میتوانید یک مثال از ویژگی hanging-punctuation را در زبان CSS مشاهده نمایید.
|
1 2 3 |
p { hanging-punctuation: first; } |
Free-Learn
جدول مشخصات ویژگی hanging-punctuation در CSS
در جدول زیر میتوانید مشخصات کلی این ویژگی را در زبان CSS مشاهده نمایید.
| مقدار پیش فرض | none |
|---|---|
| قابل ارث بری | دارد | اطلاعات بیشتر |
| قابل متحرک سازی | ندارد | اطلاعات بیشتر |
| نسخه | CSS3 |
| نحوه استفاده در جاوااسکریپت | object.style.hangingPunctuation=”first”; |
Free-Learn
پشتیبانی مرورگرها
در جدول زیر میتوانید مشاهده نمایید که آیا مرورگرهای اینترنتی از ویژگی hanging-punctuation در CSS پشتیبانی میکنند یا خیر.
| نام ویژگی | Chrome | Firefox | Opera | Safari | Edge |
| hanging-punctuation | خیر | خیر | خیر | ۱۰ به بالا بصورت جزئی |
خیر |
Free-Learn
شکل نوشتاری
نحوه نوشتن یا استفاده یا سینتَکس (Syntax) این ویژگی در CSS بصورت زیر می باشد.
|
1 |
hanging-punctuation: none|first|last|allow-end|force-end|initial|inherit; |
Free-Learn
جدول مقادیر ویژگی hanging-punctuation در CSS
در جدول زیر میتوانید، مقادیری را که میتوان در این ویژگی استفاده کرد مشاهده نمایید.
| مقدار | توضیح |
|---|---|
| none | مقدار پیش فرض – هیچ یک از علائم نگارشی در خارج از باکس متن قرار نمیگیرند |
| first | سعی میکند علائم نگارشی موجود در اولین سطر از متن را خارج از باکس قرار دهد |
| last | سعی میکند علائم نگارشی موجود در آخرین سطر از متن را خارج از باکس قرار دهد |
| allow-end | اجازه میدهد نقطه (.) یا کاما (,) در انتهای متن آویزان شود |
| force-end | سعی میکند تحت هر شرایطی نقطه (.) یا کاما (,) موجود در تمامی سطرهای متن را خارج از باکس قرار دهد |
| initial | استفاده از مقدار پیش فرض یا اولیه | اطلاعات بیشتر |
| inherit | استفاده از مقدار پدر یا والد ( به ارث بری ) | اطلاعات بیشتر |
Free-Learn
نکات و توضیحات
- این ویژگی فقط و تنها در مرورگر سافاری یا Safari اونم از نسخه ۱۰ به بالا و بصورت جزئی پشتیبانی میشود، که البته بازم نمیشه روش حساب کرد و ممکنه بکل بازم کار نکنه.
