الفرق بين المراجعتين لصفحة: «CSS/tab-size»

من موسوعة حسوب
< CSS
لا ملخص تعديل
 
 
(5 مراجعات متوسطة بواسطة مستخدمين اثنين آخرين غير معروضة)
سطر 1: سطر 1:
<noinclude>{{DISPLAYTITLE:الخاصية <code>tab-size</code>}}</noinclude>
<noinclude>{{DISPLAYTITLE:الخاصية <code>tab-size</code>}}</noinclude>
الخاصية <code>tab-size</code> في CSS تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز <code>U+0009</code> في يونيكود.<nowiki/><syntaxhighlight lang="css">
الخاصية <code>tab-size</code> في CSS تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز <code>U+0009</code> في يونيكود.
/* <integer> قيم عددية */
tab-size: 4;
tab-size: 0;
 
/* <length> قيم طولية */
tab-size: 10px;
tab-size: 2em;


/* قيم عامة */
== بطاقة الخاصية ==
tab-size: inherit;
tab-size: initial;
tab-size: unset;
</syntaxhighlight>
{| class="wikitable" style="width: 100%;"
{| class="wikitable" style="width: 100%;"
|-
|-
سطر 32: سطر 21:
|}
|}


= أمثلة =
<syntaxhighlight lang="css">
مثال عن استخدام الخاصية <code>tab-size</code> على عنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> (لاحظ أنَّ الحالة الوحيدة التي سيُعرَض فيها محرف tab في مستندات HTML هي داخل العنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> أو إذا ضبطنا قيمة الخاصية <code>[[CSS/white-space|white-space]]</code> إلى <code>pre</code> أو <code>pre-wrap</code>):<syntaxhighlight lang="html">
/* <integer> قيم عددية */
<pre>I have tabs inside!   tab-size: initial;</pre>
tab-size: 4;
<pre class="tab-2">I have tabs inside! tab-size: 2;</pre>
tab-size: 0;
<pre class="tab-4">I have tabs inside! tab-size: 4;</pre>
 
<pre class="tab-6">I have tabs inside! tab-size: 6;</pre>
/* <length> قيم طولية */
<pre class="tab-em">I have tabs inside! tab-size: 1em;</pre>
tab-size: 10px;
tab-size: 2em;
 
/* قيم عامة */
tab-size: inherit;
tab-size: initial;
tab-size: unset;
</syntaxhighlight>
 
== أمثلة ==
مثال عن استخدام الخاصية <code>tab-size</code> على عنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> (لاحظ أنَّ الحالة الوحيدة التي سيُعرَض فيها محرف tab في مستندات HTML هي داخل العنصر <code>[[HTML/pre|<nowiki><pre></nowiki>]]</code> أو إذا ضبطنا قيمة الخاصية <code>[[CSS/white-space|white-space]]</code> إلى <code>pre</code> أو <code>pre-wrap</code>):
<syntaxhighlight lang="html">
<pre>tab تم استعمال المسافة! tab-size: initial;</pre>
<pre class="tab-2">tab تم استعمال المسافة! tab-size: 2;</pre>
<pre class="tab-4">tab تم استعمال المسافة! tab-size-size: 4;</pre>
<pre class="tab-6">tab تم استعمال المسافة! tab-size-size: 6;</pre>
<pre class="tab-em">tab تم استعمال المسافة! tab-size-size: 1em;</pre>
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
</syntaxhighlight>شيفرة CSS:<syntaxhighlight lang="css">
.tab-2  { tab-size: 2;  }
.tab-2  { tab-size: 2;  }
سطر 45: سطر 50:
.tab-em { tab-size: 1em; }
.tab-em { tab-size: 1em; }
</syntaxhighlight>
</syntaxhighlight>
==دعم المتصفحات==
==دعم المتصفحات==
{| class="wikitable"
{| class="wikitable"
سطر 72: سطر 78:
== البنية العامة ==
== البنية العامة ==
تقبل الخاصية <code>tab-size</code> إحدى القيمتين التاليتين.
تقبل الخاصية <code>tab-size</code> إحدى القيمتين التاليتين.
=== القيمة <code>[[CSS/integer|<integer>]]</code> ===
=== <code>[[CSS/integer|<integer>]]</code> ===
عدد الفراغات الموجودة في محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.
عدد الفراغات الموجودة في محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.
=== القيمة <code>[[CSS/length|<length>]]</code> ===
=== <code>[[CSS/length|<length>]]</code> ===
عرض محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.
عرض محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.
=== البنية الرسمية ===
=== البنية الرسمية ===
سطر 81: سطر 87:


</syntaxhighlight>
</syntaxhighlight>
==  انظر أيضًا ==
* صفحة الخاصية  <code>[[CSS/line-height|line-height]]</code> التي تضبط المسافة المستخدم للأسطر.
* صفحة الخاصية  <code>[[CSS/letter-spacing|letter-spacing]]</code> التي تُحدِّد ما هو التباعد بين الأحرف النصية.
== مصادر ومواصفات ==
== مصادر ومواصفات ==
* مسودة [https://drafts.csswg.org/css-text-3/#tab-size-property CSS Text Module Level 3].  
* مسودة [https://drafts.csswg.org/css-text-3/#tab-size-property CSS Text Module Level 3].  
[[تصنيف:CSS]]
[[تصنيف:CSS|{{SUBPAGENAME}}]]
[[تصنيف:CSS Property]]
[[تصنيف:CSS Property|{{SUBPAGENAME}}]]
[[تصنيف:CSS Text]]
[[تصنيف:CSS Text|{{SUBPAGENAME}}]]

المراجعة الحالية بتاريخ 14:27، 12 أغسطس 2018

الخاصية tab-size في CSS تُستعمل لتخصيص عرض محرف الجدولة (tab) الذي له الرمز U+0009 في يونيكود.

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

القيمة الابتدائية 8
تُطبَّق على الحاويات الكتلية.
قابلة للوراثة نعم
قابلة للتحريك نعم
القيمة المحسوبة كما حُدِّدت.
/* <integer> قيم عددية */
tab-size: 4;
tab-size: 0;

/* <length> قيم طولية */
tab-size: 10px;
tab-size: 2em;

/* قيم عامة */
tab-size: inherit;
tab-size: initial;
tab-size: unset;

أمثلة

مثال عن استخدام الخاصية tab-size على عنصر <pre> (لاحظ أنَّ الحالة الوحيدة التي سيُعرَض فيها محرف tab في مستندات HTML هي داخل العنصر <pre> أو إذا ضبطنا قيمة الخاصية white-space إلى pre أو pre-wrap):

<pre>tab تم	استعمال	المسافة!	tab-size: initial;</pre>
<pre class="tab-2">tab	تم	استعمال	المسافة!	tab-size: 2;</pre>
<pre class="tab-4">tab	تم	استعمال	المسافة!	tab-size-size: 4;</pre>
<pre class="tab-6">tab	تم	استعمال	المسافة!	tab-size-size: 6;</pre>
<pre class="tab-em">tab	تم	استعمال	المسافة!	tab-size-size: 1em;</pre>

شيفرة CSS:

.tab-2  { tab-size: 2;   }
.tab-4  { tab-size: 4;   }
.tab-6  { tab-size: 6;   }
.tab-em { tab-size: 1em; }

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

الميزة Chrome Firefox Internet Explorer Opera Safari
الدعم الأساسي 21 4.0 غير مدعومة 15 6.1
<length> 42 53.0 غير مدعومة 29 غير مدعومة

متصفح Edge لا يدعم هذه الخاصية.

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

تقبل الخاصية tab-size إحدى القيمتين التاليتين.

<integer>

عدد الفراغات الموجودة في محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.

<length>

عرض محرف tab واحد. يجب ألّا تكون هذه القيمة سالبةً.

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

tab-size: <integer> | <length>;

 انظر أيضًا

  • صفحة الخاصية  line-height التي تضبط المسافة المستخدم للأسطر.
  • صفحة الخاصية  letter-spacing التي تُحدِّد ما هو التباعد بين الأحرف النصية.

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