8000 csswg-drafts/css-logical-props/Overview.html at 20e7011903cbd6c6da1816baeeac4ca070fc5456 · simonwuelker/csswg-drafts · GitHub
Skip to content

Overview.html

Latest commit

 

History

History
1535 lines (1528 loc) · 109 KB

Overview.html

File metadata and controls

1535 lines (1528 loc) · 109 KB
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-width">max-width</a> and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/visudet.html#propdef-max-height">max-height</a> properties.
The mapping depends on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>.</p>
<h3 class="heading settled" data-level="3.2" id="logical-prop"><span class="secno">3.2. </span><span class="content"> Logical Margins and Offsets:
the margin- and offset- block-start/block-end/inline-start/inline-end properties</span><a class="self-link" href="#logical-prop"></a></h3>
<table class="definition propdef" data-link-for-hint="margin-block-start">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-margin-block-start">margin-block-start<a class="self-link" href="#propdef-margin-block-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-margin-block-end">margin-block-end<a class="self-link" href="#propdef-margin-block-end"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-margin-inline-start">margin-inline-start<a class="self-link" href="#propdef-margin-inline-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-margin-inline-end">margin-inline-end<a class="self-link" href="#propdef-margin-inline-end"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-left">&lt;‘margin-left’></a>
<tr>
<th>Initial:
<td>0
<tr>
<th>Applies to:
<td>same as <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin">margin</a>
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>depends on layout model
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>the percentage as specified or the absolute length or auto (see text)
<tr>
<th>Animatable:
<td>no
</table>
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-top">margin-top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-bottom">margin-bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-left">margin-left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin-right">margin-right</a> properties.
The mapping depends on the <em>parent element’s</em> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">text-orientation</a>.</p>
<table class="definition propdef" data-link-for-hint="offset-block-start">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-offset-block-start">offset-block-start<a class="self-link" href="#propdef-offset-block-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-offset-block-end">offset-block-end<a class="self-link" href="#propdef-offset-block-end"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-offset-inline-start">offset-inline-start<a class="self-link" href="#propdef-offset-inline-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-offset-inline-end">offset-inline-end<a class="self-link" href="#propdef-offset-inline-end"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left">&lt;‘left’></a>
<tr>
<th>Initial:
<td>auto
<tr>
<th>Applies to:
<td>positioned elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>logical-width, resp. logical-height of containing block
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>same as box offsets: <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right">right</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom">bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left">left</a> properties except that directions are logical
<tr>
<th>Animatable:
<td>no
</table>
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-top">top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-bottom">bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-left">left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-position-3/#propdef-right">right</a> properties. The mapping depends on the <em>parent element’s</em> <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">text-orientation</a>.</p>
<h3 class="heading settled" data-level="3.3" id="border-padding"><span class="secno">3.3. </span><span class="content"> Logical Padding and Border: the padding- and border-<var>*</var>-
block-start/block-end/inline-start/inline-end properties</span><a class="self-link" href="#border-padding"></a></h3>
<table class="definition propdef" data-link-for-hint="padding-block-start">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-padding-block-start">padding-block-start<a class="self-link" href="#propdef-padding-block-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-padding-block-end">padding-block-end<a class="self-link" href="#propdef-padding-block-end"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-padding-inline-start">padding-inline-start<a class="self-link" href="#propdef-padding-inline-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-padding-inline-end">padding-inline-end<a class="self-link" href="#propdef-padding-inline-end"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod"><a class="production" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-left">&lt;‘padding-left’></a>
<tr>
<th>Initial:
<td>0
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>logical-width of containing block
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>length (see text)
<tr>
<th>Animatable:
<td>no
</table>
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-top">padding-top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-bottom">padding-bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-left">padding-left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding-right">padding-right</a> properties. The mapping depends on the
element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">text-orientation</a>.</p>
<table class="definition propdef" data-link-for-hint="border-block-start-width">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-start-width">border-block-start-width<a class="self-link" href="#propdef-border-block-start-width"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-end-width">border-block-end-width<a class="self-link" href="#propdef-border-block-end-width"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-start-width">border-inline-start-width<a class="self-link" href="#propdef-border-inline-start-width"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-end-width">border-inline-end-width<a class="self-link" href="#propdef-border-inline-end-width"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod">border-width
<tr>
<th>Initial:
<td>medium
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>logical-width of containing block
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>absolute length; 0 if the border style is none or hidden (see text)
<tr>
<th>Animatable:
<td>no
</table>
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-top-width">border-top-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom-width">border-bottom-width</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left-width">border-left-width</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-right-width">border-right-width</a> properties. The mapping depends
on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">text-orientation</a>.</p>
<table class="definition propdef" data-link-for-hint="border-block-start-style">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-start-style">border-block-start-style<a class="self-link" href="#propdef-border-block-start-style"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-end-style">border-block-end-style<a class="self-link" href="#propdef-border-block-end-style"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-start-style">border-inline-start-style<a class="self-link" href="#propdef-border-inline-start-style"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-end-style">border-inline-end-style<a class="self-link" href="#propdef-border-inline-end-style"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod">border-style
<tr>
<th>Initial:
<td>none
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>n/a
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>specified value (see text)
<tr>
<th>Animatable:
<td>no
</table>
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-top-style">border-top-style</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom-style">border-bottom-style</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left-style">border-left-style</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-right-style">border-right-style</a> properties. The mapping depends
on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">text-orientation</a>.</p>
<table class="definition propdef" data-link-for-hint="border-block-start-color">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-start-color">border-block-start-color<a class="self-link" href="#propdef-border-block-start-color"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-end-color">border-block-end-color<a class="self-link" href="#propdef-border-block-end-color"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-start-color">border-inline-start-color<a class="self-link" href="#propdef-border-inline-start-color"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-end-color">border-inline-end-color<a class="self-link" href="#propdef-border-inline-end-color"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod">color
<tr>
<th>Initial:
<td>currentcolor
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>n/a
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>computed color (see text)
<tr>
<th>Animatable:
<td>no
</table>
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-top-color">border-top-color</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom-color">border-bottom-color</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left-color">border-left-color</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-right-color">border-right-color</a> properties. The mapping depends
on the element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">text-orientation</a>.</p>
<table class="definition propdef" data-link-for-hint="border-block-start">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-start">border-block-start<a class="self-link" href="#propdef-border-block-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-block-end">border-block-end<a class="self-link" href="#propdef-border-block-end"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-start">border-inline-start<a class="self-link" href="#propdef-border-inline-start"></a></dfn>, <dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-inline-end">bo 8096 rder-inline-end<a class="self-link" href="#propdef-border-inline-end"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod">border-width <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-any">||</a> border-style <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-any">||</a> color
<tr>
<th>Initial:
<td>(see individual properties)
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>no
<tr>
<th>Percentages:
<td>see individual properties
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>see individual properties
<tr>
<th>Animatable:
<td>no
</table>
<p>These properties correspond to the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-top">border-top</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom">border-bottom</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-left">border-left</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-right">border-right</a> properties. The mapping depends on the
element’s <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a>, <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-direction">direction</a>, and <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-text-orientation">text-orientation</a>.</p>
<h3 class="heading settled" data-level="3.4" id="logical-shorthand-keyword"><span class="secno">3.4. </span><span class="content"> Shorthand Properties with <span class="css">logical</span> Keyword</span><a class="self-link" href="#logical-shorthand-keyword"></a></h3>
<p>The shorthand properties for margin, padding, and border set values
for physical properties by default. But authors can specify the <dfn class="css" data-dfn-for="margin, padding, border-color, border-style, border-width" data-dfn-type="value" data-export="" id="valdef-margin-logical">logical<a class="self-link" href="#valdef-margin-logical"></a></dfn> keyword at the beginning of the property value to indicate that the values
map to the logical properties instead of the physical ones.</p>
<p class="issue" id="issue-2b4adeb6"><a class="self-link" href="#issue-2b4adeb6"></a> other candidates of the keyword are: <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-position-3/#valdef-position-relative">relative</a>, <span class="css">script</span>, <span class="css">writing-mode</span>, <span class="css">beas</span>, or the value itself (e.g., <span class="css">vertical-lr-ltr</span>) </p>
<p>The following <a data-link-type="biblio" href="#biblio-css21">[CSS21]</a> shorthand properties accept the <a class="css" data-link-type="maybe" href="#valdef-margin-logical">logical</a> keyword:</p>
<ul>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-margin">margin</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/box.html#propdef-padding">padding</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-color">border-color</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-style">border-style</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-width">border-width</a>
</ul>
<p>The syntax for these properties is effectively changed by replacing</p>
<pre class="prod">&lt;<var>value-type</var>><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-num-range">{1,4}</a></pre>
<p>with</p>
<pre class="prod">logical<a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-opt">?</a> &lt;<var>value-type</var>><a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#mult-num-range">{1,4}</a></pre>
<p>When the logical keyword is present in the value, the values that follow are
assigned to the logical properties as follows:</p>
<ul>
<li>If only one value is set, the value applies to all four logical sides.
<li>If two values are set, the first is for block-start and block-end,
the second is for inline-start and inline-end.
<li>If three values are set, the first is for block-start,
the second is for inline-start and inline-end,
and the third is for block-end.
<li>If four values are set, they apply to the block-start, inline-end, block-end, and inline-start
sides in that order.
</ul>
<p class="issue" id="issue-5ae45c09"><a class="self-link" href="#issue-5ae45c09"></a> Should the shorthand also reset the physical properties to their initial
values? </p>
<div class="example" id="example-1acdff8c">
<a class="self-link" href="#example-1acdff8c"></a> In the following example, the two rules are equivalent:
<pre class="lang-css highlight"><span class="nt">blockquote</span> <span class="p">{</span>
<span class="k">margin</span><span class="o">:</span> <span class="n">logical</span> <span class="m">1em</span> <span class="m">2em</span> <span class="m">3em</span> <span class="m">4em</span><span class="p">;</span>
<span class="p">}</span>
<span class="nt">blockquote</span> <span class="p">{</span>
<span class="k">margin</span><span class="o">-</span><span class="k">block</span><span class="o">-</span><span class="n">start</span><span class="o">:</span> <span class="m">1em</span><span class="p">;</span>
<span class="k">margin</span><span class="o">-</span><span class="k">inline</span><span class="o">-</span><span class="n">end</span><span class="o">:</span> <span class="m">2em</span><span class="p">;</span>
<span class="k">margin</span><span class="o">-</span><span class="k">block</span><span class="o">-</span><span class="n">end</span><span class="o">:</span> <span class="m">3em</span><span class="p">;</span>
<span class="k">margin</span><span class="o">-</span><span class="k">inline</span><span class="o">-</span><span class="n">start</span><span class="o">:</span> <span class="m">4em</span><span class="p">;</span>
<span class="p">}</span></pre>
</div>
<h2 class="heading settled" data-level="4" id="background-and-borders"><span class="secno">4. </span><span class="content"> Logical Background and Border Images</span><a class="self-link" href="#background-and-borders"></a></h2>
<p><a data-link-type="biblio" href="#biblio-css3bg">[CSS3BG]</a> is handled separately because it can fill an area with specified
images, and the area to fill can be rotated or flipped depending on the text
flow.</p>
<h3 class="heading settled" data-level="4.1" id="background-image-transform-prop"><span class="secno">4.1. </span><span class="content"> Background Image Transform: The <span class="css">background-image-transform</span> property</span><a class="self-link" href="#background-image-transform-prop"></a></h3>
<table class="definition propdef" data-link-for-hint="background-image-transform">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-background-image-transform">background-image-transform<a class="self-link" href="#propdef-background-image-transform"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod">logical <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> physical <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> rotate
<tr>
<th>Initial:
<td>physical
<tr>
<th>Applies to:
<td>all elements
<tr>
<th>Inherited:
<td>yes
<tr>
<th>Percentages:
<td>n/a
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified
<tr>
<th>Animatable:
<td>no
</table>
<p class="issue" id="issue-f35b1639"><a class="self-link" href="#issue-f35b1639"></a> is this the right default? we need to investigate which is more common </p>
<p>This property defines whether background images are transformed to match to
the value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a> property, and whether <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#background-size">background-size</a> widths and
heights are logical or physical. Values have the following meanings:</p>
<dl>
<dt><dfn class="css" data-dfn-for="background-image-transform" data-dfn-type="value" data-export="" id="valdef-background-image-transform-logical">logical<a class="self-link" href="#valdef-background-image-transform-logical"></a></dfn>
<dd> The values for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#background-size">background-size</a> property are logical.
The background images are transformed to match to the logical axis.
<dt><dfn class="css" data-dfn-for="background-image-transform" data-dfn-type="value" data-export="" id="valdef-background-image-transform-physical">physical<a class="self-link" href="#valdef-background-image-transform-physical"></a></dfn>
<dd> The values for the <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#background-size">background-size</a> property are physical.
The background images remain unchanged.
<dt><dfn class="css" data-dfn-for="background-image-transform" data-dfn-type="value" data-export="" id="valdef-background-image-transform-rotate">rotate<a class="self-link" href="#valdef-background-image-transform-rotate"></a></dfn>
<dd> Similar to <a class="css" data-link-type="maybe" href="#valdef-background-image-transform-logical">logical</a>, except that the inline direction is ignored.
The result is affected only by the block flow direction.
</dl>
<h3 class="heading settled" data-level="4.2" id="background-repeat-prop"><span class="secno">4.2. </span><span class="content"> The <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#background-repeat">background-repeat</a> property</span><a class="self-link" href="#background-repeat-prop"></a></h3>
<p>The <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-backgrounds-3/#repeat-x">repeat-x</a> and <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-backgrounds-3/#repeat-y">repeat-y</a> values are logical, but in CSS3 this
property can also accept double values to specify horizontal and vertical
behaviors separately. The double values are considered logical if the <a class="css" data-link-type="maybe" href="#valdef-background-image-transform-logical">logical</a> keyword is specified, otherwise physical.</p>
<p class="issue" id="issue-f62e345a"><a class="self-link" href="#issue-f62e345a"></a> should also add repeat-horizontal and repeat-vertical for the physical value? </p>
<h3 class="heading settled" data-level="4.3" id="border-image-transform-prop"><span class="secno">4.3. </span><span class="content"> Border Image Transform: The <a class="property" data-link-type="propdesc" href="#propdef-border-image-transform">border-image-transform</a> property</span><a class="self-link" href="#border-image-transform-prop"></a></h3>
<table class="definition propdef" data-link-for-hint="border-image-transform">
<tbody>
<tr>
<th>Name:
<td><dfn class="css" data-dfn-type="property" data-export="" id="propdef-border-image-transform">border-image-transform<a class="self-link" href="#propdef-border-image-transform"></a></dfn>
<tr class="value">
<th>Value:
<td class="prod">logical <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> physical <a data-link-type="grammar" href="https://drafts.csswg.org/css-values-3/#comb-one">|</a> rotate
<tr>
<th>Initial:
<td>rotate
<tr>
<th>Applies to:
<td>All elements, except internal table elements when <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css2/tables.html#propdef-border-collapse">border-collapse</a> is <a class="css" data-link-type="maybe" href="https://drafts.csswg.org/css-ruby-1/#valdef-ruby-merge-collapse">collapse</a>
<tr>
<th>Inherited:
<td>yes
<tr>
<th>Percentages:
<td>n/a
<tr>
<th>Media:
<td>visual
<tr>
<th>Computed value:
<td>as specified
<tr>
<th>Animatable:
<td>no
</table>
<p class="issue" id="issue-663636f0"><a class="self-link" href="#issue-663636f0"></a> is this the right initial default? </p>
<p>This property defines whether border images are transformed to match to the
value of <a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode</a> property, with the reference writing mode being <a class="css" data-link-type="propdesc" href="https://drafts.csswg.org/css-writing-modes-3/#propdef-writing-mode">writing-mode: horizontal-tb; direction: ltr</a>. Values have the following
meanings:</p>
<dl>
<dt><dfn class="css" data-dfn-for="border-image-transform" data-dfn-type="value" data-export="" id="valdef-border-image-transform-logical">logical<a class="self-link" href="#valdef-border-image-transform-logical"></a></dfn>
<dd> The values for the border-image-* properties are logical.
The border images are transformed to match to the logical axis.
<dt><dfn class="css" data-dfn-for="border-image-transform" data-dfn-type="value" data-export="" id="valdef-border-image-transform-physical">physical<a class="self-link" href="#valdef-border-image-transform-physical"></a></dfn>
<dd> The values for the border-image-* properties are physical.
The border images remain unchanged.
<dt><dfn class="css" data-dfn-for="border-image-transform" data-dfn-type="value" data-export="" id="valdef-border-image-transform-rotate">rotate<a class="self-link" href="#valdef-border-image-transform-rotate"></a></dfn>
<dd> Similar to <a class="css" data-link-type="maybe" href="#valdef-border-image-transform-logical">logical</a>, except that the inline direction is ignored.
The result is affected only by the block flow direction.
</dl>
<p>The following properties use the value of this property to determine how
directional mappings are done:</p>
<ul>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-slice">border-image-slice</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-width">border-image-width</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-outset">border-image-outset</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-image-repeat">border-image-repeat</a>
<li><a class="property" data-link-type="propdesc" href="https://drafts.csswg.org/css-backgrounds-3/#border-image">border-image</a>
</ul>
</main>
<h2 class="no-ref no-num heading settled" id="conformance"><span class="content"> Conformance</span><a class="self-link" href="#conformance"></a></h2>
<h3 class="no-ref heading settled" id="conventions"><span class="content"> Document conventions</span><a class="self-link" href="#conventions"></a></h3>
<p>Conformance requirements are expressed with a combination of
descriptive assertions and RFC 2119 terminology. The key words "MUST",
"MUST NOT", "REQUIRED", "SHALL", "SHALL NOT", "SHOULD", "SHOULD NOT",
"RECOMMENDED", "MAY", and "OPTIONAL" in the normative parts of this
document are to be interpreted as described in RFC 2119.
However, for readability, these words do not appear in all uppercase
letters in this specification. </p>
<p>All of the text of this specification is normative except sections
explicitly marked as non-normative, examples, and notes. <a data-link-type="biblio" href="#biblio-rfc2119">[RFC2119]</a></p>
<p>Examples in this specification are introduced with the words "for example"
or are set apart from the normative text with <code>class="example"</code>,
like this: </p>
<div class="example" id="example-f839f6c8">
<a class="self-link" href="#example-f839f6c8"></a>
<p>This is an example of an informative example.</p>
</div>
<p>Informative notes begin with the word "Note" and are set apart from the
normative text with <code>class="note"</code>, like this: </p>
<p class="note" role="note">Note, this is an informative note.</p>
<p>Advisements are normative sections styled to evoke special attention and are
set apart from other normative text with <code>&lt;strong class="advisement"></code>, like
this: <strong class="advisement"> UAs MUST provide an accessible alternative. </strong> </p>
<h3 class="no-ref heading settled" id="conformance-classes"><span class="content"> Conformance classes</span><a class="self-link" href="#conformance-classes"></a></h3>
<p>Conformance to this specification
is defined for three conformance classes: </p>
<dl>
<dt>style sheet
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#style-sheet">CSS
style sheet</a>.
<dt>renderer
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that interprets the semantics of a style sheet and renders
documents that use them.
<dt>authoring tool
<dd>A <a href="http://www.w3.org/TR/CSS21/conform.html#user-agent">UA</a> that writes a style sheet.
</dl>
<p>A style sheet is conformant to this specification
if all of its statements that use syntax defined in this module are valid
according to the generic CSS grammar and the individual grammars of each
feature defined in this module. </p>
<p>A renderer is conformant to this specification
if, in addition to interpreting the style sheet as defined by the
appropriate specifications, it supports all the features defined
by this specification by parsing them correctly
and rendering the document accordingly. However, the inability of a
UA to correctly render a document due to limitations of the device
does not make the UA non-conformant. (For example, a UA is not
required to render color on a monochrome monitor.) </p>
<p>An authoring tool is conformant to this specification
if it writes style sheets that are syntactically correct according to the
generic CSS grammar and the individual grammars of each feature in
this module, and meet all other conformance requirements of style sheets
as described in this module. </p>
<h3 class="no-ref heading settled" id="partial"><span class="content"> Partial implementations</span><a class="self-link" href="#partial"></a></h3>
<p>So that authors can exploit the forward-compatible parsing rules to
assign fallback values, CSS renderers <strong>must</strong> treat as invalid (and <a href="http://www.w3.org/TR/CSS21/conform.html#ignore">ignore
as appropriate</a>) any at-rules, properties, property values, keywords,
and other syntactic constructs for which they have no usable level of
support. In particular, user agents <strong>must not</strong> selectively
ignore unsupported component values and honor supported values in a single
multi-value property declaration: if any value is considered invalid
(as unsupported values must be), CSS requires that the entire declaration
be ignored.</p>
<h3 class="no-ref heading settled" id="experimental"><span class="content"> Experimental implementations</span><a class="self-link" href="#experimental"></a></h3>
<p>To avoid clashes with future CSS features, the CSS2.1 specification
reserves a <a href="http://www.w3.org/TR/CSS21/syndata.html#vendor-keywords">prefixed
syntax</a> for proprietary and experimental extensions to CSS. </p>
<p>Prior to a specification reaching the Candidate Recommendation stage
in the W3C process, all implementations of a CSS feature are considered
experimental. The CSS Working Group recommends that implementations
use a vendor-prefixed syntax for such features, including those in
W3C Working Drafts. This avoids incompatibilities with future changes
in the draft. </p>
<h3 class="no-ref heading settled" id="testing"><span class="content"> Non-experimental implementations</span><a class="self-link" href="#testing"></a></h3>
<p>Once a specification reaches the Candidate Recommendation stage,
non-experimental implementations are possible, and implementors should
release an unprefixed implementation of any CR-level feature they
can demonstrate to be correctly implemented according to spec. </p>
<p>To establish and maintain the interoperability of CSS across
implementations, the CSS Working Group requests that non-experimental
CSS renderers submit an implementation report (and, if necessary, the
testcases used for that implementation report) to the W3C before
releasing an unprefixed implementation of any CSS features. Testcases
submitted to W3C are subject to review and correction by the CSS
Working Group. </p>
<p>Further information on submitting testcases and implementation reports
can be found from on the CSS Working Group’s website at <a href="http://www.w3.org/Style/CSS/Test/">http://www.w3.org/Style/CSS/Test/</a>.
Questions should be directed to the <a href="http://lists.w3.org/Archives/Public/public-css-testsuite">public-css-testsuite@w3.org</a> mailing list. </p>
<h2 class="no-num heading settled" id="index"><span class="content">Index</span><a class="self-link" href="#index"></a></h2>
<h3 class="no-num heading settled" id="index-defined-here"><span class="content">Terms defined by this specification</span><a class="self-link" href="#index-defined-here"></a></h3>
<ul class="indexlist">
<li><a href="#propdef-background-image-transform">background-image-transform</a><span>, in §4.1</span>
<li><a href="#propdef-block-size">block-size</a><span>, in §3.1</span>
<li><a href="#propdef-border-block-end">border-block-end</a><span>, in §3.3</span>
<li><a href="#propdef-border-block-end-color">border-block-end-color</a><span>, in §3.3</span>
<li><a href="#propdef-border-block-end-style">border-block-end-style</a><span>, in §3.3</span>
<li><a href="#propdef-border-block-end-width">border-block-end-width</a><span>, in §3.3</span>
<li><a href="#propdef-border-block-start">border-block-start</a><span>, in §3.3</span>
<li><a href="#propdef-border-block-start-color">border-block-start-color</a><span>, in §3.3</span>
<li><a href="#propdef-border-block-start-style">border-block-start-style</a><span>, in §3.3</span>
<li><a href="#propdef-border-block-start-width">border-block-start-width</a><span>, in §3.3</span>
<li><a href="#propdef-border-image-transform">border-image-transform</a><span>, in §4.3</span>
<li><a href="#propdef-border-inline-end">border-inline-end</a><span>, in §3.3</span>
<li><a href="#propdef-border-inline-end-color">border-inline-end-color</a><span>, in §3.3</span>
<li><a href="#propdef-border-inline-end-style">border-inline-end-style</a><span>, in §3.3</span>
<li><a href="#propdef-border-inline-end-width">border-inline-end-width</a><span>, in §3.3</span>
<li><a href="#propdef-border-inline-start">border-inline-start</a><span>, in §3.3</span>
<li><a href="#propdef-border-inline-start-color">border-inline-start-color</a><span>, in §3.3</span>
<li><a href="#propdef-border-inline-start-style">border-inline-start-style</a><span>, in §3.3</span>
<li><a href="#propdef-border-inline-start-width">border-inline-start-width</a><span>, in §3.3</span>
<li><a href="#propdef-inline-size">inline-size</a><span>, in §3.1</span>
<li>
logical
<ul>
<li><a href="#valdef-margin-logical">value for margin, padding, border-color, border-style, border-width</a><span>, in §3.4</span>
<li><a href="#valdef-background-image-transform-logical">value for background-image-transform</a><span>, in §4.1</span>
<li><a href="#valdef-border-image-transform-logical">value for border-image-transform</a><span>, in §4.3</span>
</ul>
<li><a href="#propdef-margin-block-end">margin-block-end</a><span>, in §3.2</span>
<li><a href="#propdef-margin-block-start">margin-block-start</a><span>, in §3.2</span>
<li><a href="#propdef-margin-inline-end">margin-inline-end</a><span>, in §3.2</span>
<li><a href="#propdef-margin-inline-start">margin-inline-start</a><span>, in §3.2</span>
<li><a href="#propdef-max-block-size">max-block-size</a><span>, in §3.1</span>
<li><a href="#propdef-max-inline-size">max-inline-size</a><span>, in §3.1</span>
<li><a href="#propdef-min-block-size">min-block-size</a><span>, in §3.1</span>
<li><a href="#propdef-min-inline-size">min-inline-size</a><span>, in §3.1</span>
<li><a href="#propdef-offset-block-end">offset-block-end</a><span>, in §3.2</span>
<li><a href="#propdef-offset-block-start">offset-block-start</a><span>, in §3.2</span>
<li><a href="#propdef-offset-inline-end">offset-inline-end</a><span>, in §3.2</span>
<li><a href="#propdef-offset-inline-start">offset-inline-start</a><span>, in §3.2</span>
<li><a href="#propdef-padding-block-end">padding-block-end</a><span>, in §3.3</span>
<li><a href="#propdef-padding-block-start">padding-block-start</a><span>, in §3.3</span>
<li><a href="#propdef-padding-inline-end">padding-inline-end</a><span>, in §3.3</span>
<li><a href="#propdef-padding-inline-start">padding-inline-start</a><span>, in §3.3</span>
<li>
physical
<ul>
<li><a href="#valdef-background-image-transform-physical">value for background-image-transform</a><span>, in §4.1</span>
<li><a href="#valdef-border-image-transform-physical">value for border-image-transform</a><span>, in §4.3</span>
</ul>
<li><a href="#valdef-logical-page-selector-recto">:recto</a><span>, in §2</span>
<li><a href="#valdef-logical-page-recto">recto</a><span>, in §2</span>
<li>
rotate
<ul>
<li><a href="#valdef-background-image-transform-rotate">value for background-image-transform</a><span>, in §4.1</span>
<li><a href="#valdef-border-image-transform-rotate">value for border-image-transform</a><span>, in §4.3</span>
</ul>
<li><a href="#valdef-logical-page-selector-verso">:verso</a><span>, in §2</span>
<li><a href="#valdef-logical-page-verso">verso</a><span>, in §2</span>
</ul>
<h3 class="no-num heading settled" id="index-defined-elsewhere"><span class="content">Terms defined by reference</span><a class="self-link" href="#index-defined-elsewhere"></a></h3>
<ul class="indexlist">
<li>
<a data-link-type="biblio" href="#biblio-css-2d-transforms-1">[css-2d-transforms-1]</a> defines the following terms:
<ul>
<li><a href="http://www.w3.org/TR/css3-2d-transforms/#valuedef-left0">left</a>
<li><a href="http://www.w3.org/TR/css3-2d-transforms/#valuedef-right0">right</a>
</ul>
<li>
<a data-link-type="biblio" href="#biblio-css-align-3">[css-align-3]</a> defines the following terms:
<ul>
<li><a href="https://drafts.csswg.org/css-align-3/#valdef-self-position-end">end</a>
<li><a href="https://drafts.csswg.org/css-align-3/#valdef-self-position-start">start</a>
</ul>
<li>
<a data-link-type="biblio" href="#biblio-css-backgrounds-3">[css-backgrounds-3]</a> defines the following terms:
<ul>
<li><a href="https://drafts.csswg.org/css-backgrounds-3/#background-repeat">background-repeat</a>
<li><a href="https://drafts.csswg.org/css-backgrounds-3/#background-size">background-size</a>
<li><a href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom">border-bottom</a>
<li><a href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom-color">border-bottom-color</a>
<li><a href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom-style">border-bottom-style</a>
<li><a href="https://drafts.csswg.org/css-backgrounds-3/#border-bottom-width">border-bottom-width</a>
View remainder of file in raw view