W3C home > Mailing lists > Public > www-svg@w3.org > June 2015

Re: [svgwg] Rename 'extent' to 'inline-size' and change to presentation attribute.

From: Amelia Bellamy-Royds <amelia.bellamy.royds@gmail.com>
Date: Tue, 30 Jun 2015 09:59:44 -0600
Message-ID: <CAFDDJ7z5_4J0WM-GUtcE-jUndXv1LnXnGvTCdaXHzm-Zu=Tt2Q@mail.gmail.com>
To: www-svg <www-svg@w3.org>, Tavmjong Bah <tav.w3c@gmail.com>
I like the idea of making the maximum length of a text line a presentation
attribute.  However, this means that we now need a proper initial value,
instead of only a rule for what should happen when the value is not
specified

Possible options:

   - auto.  This is consistent with CSS height auto, meaning as large as
   required by the content.
   - infinite.  Since inline-size acts as a limit on the line length, and
   the default value is unlimited.

I'd vote for "auto" because of simplicity and familiarity.

ABR

https://github.com/w3c/svgwg/commit/ce980b066140100079e5e6f9acd714ccc8a08ee3
> commit ce980b066140100079e5e6f9acd714ccc8a08ee3
> Author: Tavmjong Bah <tavmjong@free.fr>
> Date:   Tue Jun 30 15:38:54 2015 +0200
>
>     Rename 'extent' to 'inline-size' and change to presentation attribute.
>
> diff --git a/master/definitions.xml b/master/definitions.xml
> index a37579b..ca7ed41 100644
> --- a/master/definitions.xml
> +++ b/master/definitions.xml
> @@ -547,7 +547,6 @@
>      <attribute name='dy' href='text.html#TextElementDYAttribute'
> animatable='yes'/>
>      <attribute name='rotate' href='text.html#TextElementRotateAttribute'
> animatable='yes'/>
>      <attribute name='textLength'
> href='text.html#TextElementTextLengthAttribute' animatable='yes'/>
> -    <attribute name='extent' href='text.html#TextElementExtentAttribute'
> animatable='yes'/>
>    </element>
>
>    <element
> @@ -770,7 +769,7 @@
>    <attributecategory
>      name='presentation'
>      href='intro.html#TermPresentationAttribute'
> -    presentationattributes='alignment-baseline, baseline-shift,
> buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation,
> color-interpolation-filters, color-rendering, cursor, direction, display,
> dominant-baseline, fill, fill-opacity, fill-rule, filter, flood-color,
> flood-opacity, font-family, font-size, font-size-adjust, font-stretch,
> font-style, font-variant, font-weight, glyph-orientation-horizontal,
> glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering,
> letter-spacing, lighting-color, line-break, line-height, marker-end,
> marker-mid, marker-start, mask, opacity, overflow, overflow-wrap,
> paint-order, pointer-events, shape-inside, shape-margin, shape-padding,
> shape-rendering, shape-outside, solid-color, solid-opacity, stop-color,
> stop-opacity, stroke, stroke-dasharray, stroke-dashoffset, stroke-linecap,
> stroke-linejoin, stroke-miterlimit, stroke-opacity, stroke-width, tab-size,
> text-align, text-anchor, text-decoration, text-indent, text
>  -overflow, text-rendering, transform, unicode-bidi, vector-effect,
> visibility, white-space, word-break, word-spacing, word-wrap, writing-mode,
> x'/>
> +    presentationattributes='alignment-baseline, baseline-shift,
> buffered-rendering, clip, clip-path, clip-rule, color, color-interpolation,
> color-interpolation-filters, color-rendering, cursor, direction, display,
> dominant-baseline, fill, fill-opacity, fill-rule, filter, flood-color,
> flood-opacity, font-family, font-size, font-size-adjust, font-stretch,
> font-style, font-variant, font-weight, glyph-orientation-horizontal,
> glyph-orientation-vertical, hanging-punctuation, hyphens, image-rendering,
> inline-size, letter-spacing, lighting-color, line-break, line-height,
> marker-end, marker-mid, marker-start, mask, opacity, overflow,
> overflow-wrap, paint-order, pointer-events, shape-inside, shape-margin,
> shape-padding, shape-rendering, shape-outside, solid-color, solid-opacity,
> stop-color, stop-opacity, stroke, stroke-dasharray, stroke-dashoffset,
> stroke-linecap, stroke-linejoin, stroke-miterlimit, stroke-opacity,
> stroke-width, tab-size, text-align, text-anchor, text-decoration, text
>  -indent, text-overflow, text-rendering, transform, unicode-bidi,
> vector-effect, visibility, white-space, word-break, word-spacing,
> word-wrap, writing-mode, x'/>
>
>    <attributecategory
>        name='document event'
> @@ -962,6 +961,7 @@
>    <property name='glyph-orientation-vertical'
> href='text.html#GlyphOrientationVerticalProperty'/>
>    <property name='hanging-punctuation'
> href='text.html#HangingPunctuationProperty'/>
>    <property name='image-rendering'
> href='painting.html#ImageRenderingProperty'/>
> +  <property name='inline-size' href='text.html#InlineSizeProperty'/>
>    <property name='letter-spacing' href='text.html#LetterSpacingProperty'/>
>    <property name='marker' href='painting.html#MarkerProperty'/>
>    <property name='marker-end' href='painting.html#MarkerEndProperty'/>
> diff --git a/master/text.html b/master/text.html
> index 7cb36b3..7307e71 100644
> --- a/master/text.html
> +++ b/master/text.html
> @@ -603,8 +603,8 @@
>      possible adjustments due to the value of the
>      <a>'text-anchor'</a> property or the <a>'text-align'</a> property).
>      For pre-formatted text and for auto-wrapped text where the
> -    <a>content area</a> is determined by the <a>'text/extent'</a>
> -    attribute, the initial <a>current text
> +    <a>content area</a> is determined by the <a>'inline-size'</a>
> +    property, the initial <a>current text
>      position</a> is determined by the <a>'tspan/x'</a> and
>      <a>'tspan/y'</a> values of the <a>'text'</a> or <a>'tspan'</a>
>      element which contains the first rendered character.
> @@ -1030,32 +1030,6 @@
>        </p>
>      </dd>
>
> -    <dt id="TextElementExtentAttribute"><span
> class="adef">extent</span></dt>
> -    <dd>
> -      <p class="annotation">
> -       'extent' added by resolution from
> -       <a href="http://www.w3.org/2015/02/12-svg-minutes.html#action17
> ">February
> -         12th, 2015</a>. 'extent' replaces the 'width' and 'height'
> -         attributes, added by resolution from June 27th, 2013.
> -      </p>
> -      <p>
> -       Only valid on a <a>'text'</a> element.
> -       Establishes a rectangular <a>content area</a>. The value
> -       of <a>'extent'</a> gives the width of the rectangle for
> -       horizontal text and the height for vertical text. The other
> -       dimension (height for horizontal text, width for vertical
> -       text) is of infinite length. See
> -       the <a href="text.html#TextLayoutContentArea">Content Area</a>
> -       section.
> -      </p>
> -
> -      <dl class="attrdef-svg2">
> -       <dt>Value</dt>                <dd><a>&lt;length&gt;</a> |
> <a>&lt;percentage&gt;</a> | <a>&lt;number&gt;</a></dd>
> -       <dt><a>Initial value</a></dt>  <dd>As if not specified.</dd>
> -       <dt><a>Animatable</a></dt>    <dd>yes</dd>
> -      </dl>
> -    </dd>
> -
>    </dl>
>
>  <h3 id="TSpanNotes">Notes on 'x', 'y', 'dx', 'dy' and 'rotate'</h3>
> @@ -1072,7 +1046,7 @@
>      <a>'dy'</a>, and <a>'rotate'</a> attributes are
>      ignored for auto-wrapped text (except for the initial <a>current
>      text position</a> when the <a>content area</a> is specified by
> -    the <a>'text/extent'</a> attribute).
> +    the <a>'inline-size'</a> property).
>    </p>
>
>    <p class="annotation" data-issue="2">
> @@ -1416,7 +1390,7 @@
>      elements.
>
>      The <a>content area</a> may be explictly declared by setting the
> -    <a>'text/extent'</a> attribute or by setting
> +    <a>'inline-size'</a> property, or by setting
>      the <a>'shape-inside'</a> property that defines or references an
>      SVG <a>shape</a>. If a <a>content area</a> is not declared, it
>      defaults to a rectangle of infinite width and height. The rules
> @@ -1507,8 +1481,8 @@
>         <div class="figure">
>           <img class="bordered" src="images/text/text-wrapped.svg"
>                 alt="Image showing auto-wrapped text on two lines."/>
> -         <p class="caption">Auto-wrapped text. The <a>'text/extent'</a>
> -           parameter defines a rectangular content area (shown
> +         <p class="caption">Auto-wrapped text. The <a>'inline-size'</a>
> +           property defines a rectangular content area (shown
>             in light blue).</p>
>         </div>
>        </div>
> @@ -1583,12 +1557,15 @@
>
>    <p>
>      A <dfn>content area</dfn> is defined by specifying in
> -    a <a>'text'</a> element a <a>'text/extent'</a> attribute
> +    a <a>'text'</a> element a <a>'inline-size'</a> property,
>      or a <a>'shape-inside'</a> property that defines
>      or references an SVG <a>shape</a>. If no <a>content area</a> is
>      provided, the <a>content area</a> defaults to a rectangle of
>      infinite width and height (see the
>      <a href="text.html#TextLayoutPre">pre-formatted text</a> section).
> +    If both an <a>'inline-size'</a> property and a
> +    <a>'shape-inside'</a> property with value other than 'none' are
> +    given, the <a>'shape-inside'</a> property is used.
>    </p>
>
>    <p id="TextLayoutWrappingArea">
> @@ -1606,48 +1583,90 @@
>      causes an additional inset to the <a>wrapping area</a>.
>    </p>
>
> -<h3 id='TextLayoutExtent'>The 'extent' attribute</h3>
>
> -  <p>
> -    The <a>content area</a> can be defined using the
> -    <a>'text'</a> element attribute <a>'text/extent'</a>:
> -  </p>
> +<h3 id='InlineSize'>The <span class="property">'inline-size'</span>
> property</h3>
>
> -  <dl>
> -    <dt>Horizontal text</dt>
> -    <dd>
> -      Specifies the width of a "rectangular" <a>content area</a> of
> -      infinite height.
> +  <p class="annotation">
> +    'extent' added by resolution from
> +    <a href="http://www.w3.org/2015/02/12-svg-minutes.html#action17
> ">February
> +      12th, 2015</a>. 'extent' replaces the 'width' and 'height'
> +    attributes, added by resolution from June 27th, 2013.
> +    Replaced by 'inline-size' presentation attribute per resolution from
> +    <a href="http://www.w3.org/2015/06/11-svg-minutes.html#item09
> ">Linkoping
> +      F2F, June 11, 2015</a>.
> +  </p>
>
> -      For left-to-right text, the initial <a>current text position</a>
> -      is at the left of the rectangle. For right-to-left text it is at
> -      the right of the rectangle.
> -    </dd>
> +  <p>
> +    The <a>'inline-size'</a> property allows one to set the
> +    <a>content area</a> to a rectangluar shape. The computed value of
> +    the property sets the width of the rectangle for horizontal text
> +    and the height of the rectangle for vertical text. The other
> +    dimension (height for horizontal text, width for vertical text) is
> +    of infinite length.
> +  </p>
>
> -    <dt>Vertical text</dt>
> -    <dd>
> -      Specifies the height of a "rectangular" <a>content area</a> of
> -      infinite width. The initial <a>current text position</a> is at
> -      the top of the rectangle.
> -    </dd>
> +  <p>
> +    The initial <a>current text position</a> is taken from the
> +    <a>'text/x'</a> and <a>'text/y'</a> attributes of the
> +    <a>'text'</a> element (or first child <a>'tspan'</a> element
> +    if the attributes are not given on the <a>'text'</a> element).
>
> -  </dl>
> +    For left-to-right text, the initial <a>current text position</a>
> +    is at the left of the rectangle. For right-to-left text it is at
> +    the right of the rectangle.
>
> -  <p>
> -    In both cases, the initial <a>current text position</a> is taken
> -    from the <a>'text/x'</a> and <a>'text/y'</a> attributes of
> -    the <a>'text'</a> element.
> +    For vertical text, the initial <a>current text position</a> is at
> +    the top of the rectangle.
>    </p>
>
> +  <table class="propdef">
> +    <tr>
> +      <th>Name:</th>
> +      <td><dfn id="InlineSizeProperty">inline-size</dfn></td>
> +    </tr>
> +    <tr>
> +      <th>Value:</th>
> +      <td><a>&lt;length&gt;</a> | <a>&lt;percentage&gt;</a> |
> <a>&lt;number&gt;</a></td>
> +    </tr>
> +    <tr>
> +      <th>Initial:</th>
> +      <td>As if not specified.</td>
> +    </tr>
> +    <tr>
> +      <th>Applies to:</th>
> +      <td><a>'text'</a> elements</td>
> +    </tr>
> +    <tr>
> +      <th>Inherited:</th>
> +      <td>no</td>
> +    </tr>
> +    <tr>
> +      <th>Percentages:</th>
> +      <td>Refer to the width (for horizontal text) or height (for
> vertical text) of the current viewport
> +       (see <a href="coords.html#Units">Units</a>)</td>
> +    </tr>
> +    <tr>
> +      <th>Media:</th>
> +      <td>visual</td>
> +    </tr>
> +    <tr>
> +      <th>Computed&#160;value:</th>
> +      <td>absolute length or percentage</td>
> +    </tr>
> +    <tr>
> +      <th><a>Animatable</a>:</th>
> +      <td>yes</td>
> +    </tr>
> +  </table>
>
>    <div class="example">
> -    <p>An example of using <a>'text/extent'</a> for wrapping horizontal
> text.</p>
> +    <p>An example of using <a>'inline-size'</a> for wrapping horizontal
> text.</p>
>
>      <pre><![CDATA[
>  <svg xmlns="http://www.w3.org/2000/svg"
>       width="300" height="100" viewBox="0 0 300 100">
>
> -  <text x="50" y="30" extent="200"
> +  <text x="50" y="30" inline-size="200"
>          font-family="sans-serif"
>         font-size="20px" >This text wraps at 200 pixels.</text>
>
> @@ -1667,13 +1686,13 @@
>    </div>
>
>    <div class="example">
> -    <p>An example of using <a>'text/extent'</a> for wrapping right to
> left horizontal text.</p>
> +    <p>An example of using <a>'inline-size'</a> for wrapping right to
> left horizontal text.</p>
>
>      <pre><![CDATA[
>  <svg xmlns="http://www.w3.org/2000/svg"
>       width="300" height="100" viewBox="0 0 300 100">
>
> -  <text x="250" y="30" extent="200"
> +  <text x="250" y="30" inline-size="200"
>         writing-mode="rl-tb"
>          font-family="PakType Naqsh"
>         font-size="20px" >هذا النص يلتف في 200 بكسل.</text>
> @@ -1700,13 +1719,13 @@
>    </div>
>
>    <div class="example">
> -    <p>An example of using <a>'text/extent'</a> for wrapping vertical
> text.</p>
> +    <p>An example of using <a>'inline-size'</a> for wrapping vertical
> text.</p>
>
>      <pre><![CDATA[
>  <svg xmlns="http://www.w3.org/2000/svg"
>       width="100" height="300" viewBox="0 0 100 300">
>
> -  <text x="62.5" y="25" extent="200"
> +  <text x="62.5" y="25" inline-size="200"
>         writing-mode="tb-rl"
>          font-family="IPAMincho"
>         font-size="25px" >テキストは10文字後に折り返されます。</text>
> @@ -1733,6 +1752,7 @@
>      </p>
>    </div>
>
> +
>  <h3 id='TextShapeInside'>The <span class="property">'shape-inside'</span>
> property</h3>
>
>    <p>
> @@ -2178,19 +2198,19 @@
>      </li>
>
>      <li>
> -      If the <a>'text'</a> element has an <a>'text/extent'</a>
> +      If the <a>'text'</a> element has an <a>'inline-size'</a>
>        attribute, then lay out <var>root</var> with its <a>block
> -      size</a> set to the <a>'text/extent'</a> attribute's value and
> +      size</a> set to the <a>'inline-size'</a> attribute's value and
>        with an unconstrained <a>inline size</a>.
>        <p class='note'>
>         This means that <var>root</var> is laid out with its
> -       width set to the <a>'text/extent'</a> value, if
> <a>'writing-mode'</a>
> +       width set to the <a>'inline-size'</a> value, if
> <a>'writing-mode'</a>
>         is <span class='prop-value'>horizontal-tb</span>, and its height
> otherwise.
>        </p>
>      </li>
>
>      <li>
> -      Otherwise, <a>'text/extent'</a> was not specified.  Lay
> +      Otherwise, <a>'inline-size'</a> was not specified.  Lay
>        out <var>root</var> with an unconstrained width and height.
>      </li>
>
> @@ -2456,7 +2476,7 @@
>
>    <p>
>      In the case where the <a>content area</a> is defined by the by
> -    the <a>'text/extent'</a> attribute,
> +    the <a>'inline-size'</a> attribute,
>      the <a>'tspan/x'</a> and <a>'tspan/y'</a> attributes
>      corresponding to the first rendered glyph define the
>      initial <a>current text position</a>.  When the <a>content
> @@ -3339,7 +3359,7 @@ text anchoring chunks.</p>
>      Note that the effect of <a>'text-overflow'</a> is purely visual,
>      the ellipsis itself does not become part of the DOM.  For all the
>      DOM methods it's as if <a>'text-overflow'</a> wasn't applied, and
> -    as if <a>'text/extent'</a> didn't constrain the text.
> +    as if <a>'inline-size'</a> didn't constrain the text.
>    </p>
>
>    <p class="issue" data-issue="39">Need updated example.</p>
>
>
> ============================================================
> * stabilizing issues in Overview, toc, intro, render, types, struct,
> styling, geometry, coords, paths, shapes, text, embedded, painting,
> pservers, interact, linking, animate, svgdom, idl, implnote, conform,
> access, refs, eltindex, attindex, propidx, idlindex, mimereg, changes
> * stabilizing issues in Overview
> * stabilizing issues in Overview
> * stabilizing issues in Overview
> * stabilizing issues in Overview
> coords.html:766:34: warning: unknown attribute "extent" on element "text"
> coords.html:816:78: warning: unknown attribute "extent" on element "text"
> changes.html:170:13: warning: unknown attribute "extent" on element "text"
> * building Overview, toc, intro, render, types, struct, styling, geometry,
> coords, paths, shapes, text, embedded, painting, pservers, interact,
> linking, animate, svgdom, idl, implnote, conform, access, refs, eltindex,
> attindex, propidx, idlindex, mimereg, changes
> * building single page spec
>
> Building specs/integration
> * building Overview
>
> Building specs/markers
> Overview.html:1515:7: warning: unknown term "SVGPathSegList"
> * building Overview
>
> Building specs/paths
> * building Overview
>
> Building specs/strokes
> * building Overview
> # On branch master
> # Untracked files:
> #   (use "git add <file>..." to include in what will be committed)
> #
> #       specs/integration/master/issue-state.txt
> #       specs/markers/master/issue-state.txt
> #       specs/paths/master/issue-state.txt
> #       specs/strokes/master/issue-state.txt
> nothing added to commit but untracked files present (use "git add" to
> track)
>
>
Received on Tuesday, 30 June 2015 16:00:16 UTC

This archive was generated by hypermail 2.4.0 : Friday, 17 January 2020 22:55:01 UTC