الخاصية quotes

من موسوعة حسوب
< CSS
مراجعة 10:25، 30 أكتوبر 2017 بواسطة عبد اللطيف ايمش (نقاش | مساهمات)
(فرق) → مراجعة أقدم | المراجعة الحالية (فرق) | مراجعة أحدث ← (فرق)

الخاصية quotes في CSS تُشير إلى الطريقة التي يجب أن يعرض فيها المتصفح علامات الاقتباس.

/* كلمة محجوزة */
quotes: none;

/* <string> سلاسل نصية */
quotes: "«" "»";           /* ضبط علامة الاقتباس الابتدائية والنهائية */
quotes: "«" "»" "‹" "›";   /* ضبط مستويين من الاقتباس */

/* القيم العامة */
quotes: inherit;
quotes: initial;
quotes: unset;
القيمة الابتدائية تختلف حسب المتصفح.
تُطبَّق على جميع العناصر.
قابلة للوراثة نعم
قابلة للحركة لا
القيمة المحسوبة كما حُدِّدَت.

أمثلة

مثال على جملة فيها علامة اقتباس مفردة، وسنضيف حولها علامتَي اقتباس مزدوجتين، وذلك باستخدام الخاصية content:

<q>To be or not to be. That's the question!</q>

شيفرة CSS:

q {
  quotes: '"' '"' "'" "'";
}
q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

سنستخدم جملةً فيها مستويين من الاقتباس وسنجرِّب مختلف القيم عليها:

<p class="ex1">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>
<p class="ex2">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>
<p class="ex3">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>
<p class="ex4">Set <q>quotes <q>inside</q> quotes</q> quotation marks.</p>

شيفرة CSS:

q::before {
  content: open-quote;
}
q:after {
  content: close-quote;
}

.ex1 { quotes: '‘' '’'; }
.ex2 { quotes: '“' '”' '‘' '’'; }
.ex3 { quotes: '\'' '\'' '"' '"'; }
.ex4 { quotes: '«' '»' '‹' '›'; }

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 11 1.5 8.0 4.0 9.0

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

الخاصية quotes تقبل القيم الآتية.

القيمة none

القيمتان open-quote و close-quote في خاصية content لن تؤديا إلى إظهار علامة اقتباس.

القيمة ‎[<string> <string>]+‎ 

زوجٌ من القيم النصية <string> أو أكثر لتُستعمَل مع القيمتين open-quote و close-quote في الخاصية content. لاحظ أنَّ أوّل زوج يُمثِّل أعلى مستوى من مستويات الاقتباس، أما الزوج الثاني فهو يمثل المستوى الذي يليه، وهكذا.

هذا جدولٌ يضم بعض أشكال علامات الاقتباس:

علامة الاقتباس الوصف
" علامة اقتباس مزدوجة
' علامة اقتباس مفردة
علامة اقتباس مفردة على شكل زاوية
علامة اقتباس مفردة على شكل زاوية
« علامة اقتباس مزدوجة على شكل زاوية
» علامة اقتباس مزدوجة على شكل زاوية
علامة اقتباس مفردة على شكل الرقم 6 (للبداية)
علامة اقتباس مفردة على شكل الرقم 9 (للنهاية)
علامة اقتباس مزدوجة على شكل الرقم 6 (للبداية)
علامة اقتباس مزدوجة على شكل الرقم 9 (للنهاية)
علامة اقتباس مزدوجة على شكل الرقم 9 (سفلية)

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

quotes: none | [ <string> <string> ]+;

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