mozilla

Revision 426775 of kerning

  • Revision slug: Web/SVG/Attribute/kerning
  • Revision title: kerning
  • Revision id: 426775
  • Created:
  • Creator: Jeremie
  • Is current revision? Yes
  • Comment page created, 269 words addedSVG/Attribute/kerning Web/SVG/Attribute/kerning

Revision Content

« SVG Attribute reference home

The kerning attribute indicates whether the browser should adjust inter-glyph spacing based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and instead set inter-character spacing to a specific length (typically, zero).

The value of auto indicates that the user agent should adjust inter-glyph spacing based on kerning tables that are included in the font that will be used.

If a <length> is provided, then auto-kerning is disabled. Instead, inter-character spacing is set to the given <length>. The most common scenario, other than auto, is to set kerning to a value of 0 so that auto-kerning is disabled.

If a <length> is provided without a unit identifier (e.g., an unqualified number such as 128), the browser processes the <length> as a width value in the current user coordinate system.

If a <length> is provided with a unit identifier (e.g., .25em or 1%), then the browser converts the <length> into a corresponding value in the current user coordinate system.

When a <length> is provided, its value is added to the inter-character spacing value specified by the {{ SVGAttr("letter-spacing") }} attribute.

As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("kerning","CSS kerning") }} for further information.

Usage context

Categories Presentation attribute
Value auto | <length> | inherit
Animatable Yes
Normative document SVG 1.1 (2nd Edition)

{{ page("/en/SVG/Content_type","Length") }}

Elements

The following elements can use the kerning attribute

See also

  • {{ cssxref("kerning","CSS kerning") }}

Revision Source

<p>« <a href="/en/SVG/Attribute" title="en/SVG/Attribute">SVG Attribute reference home</a></p>
<p>The <code>kerning</code> attribute indicates whether the browser should adjust inter-glyph spacing based on kerning tables that are included in the relevant font (i.e., enable auto-kerning) or instead disable auto-kerning and instead set inter-character spacing to a specific length (typically, zero).</p>
<p>The value of <code><span class="prop-value">auto</span></code> indicates that the user agent should adjust inter-glyph spacing based on kerning tables that are included in the font that will be used.</p>
<p>If a <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> is provided, then auto-kerning is disabled. Instead, inter-character spacing is set to the given <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a>. The most common scenario, other than <span class="prop-value">auto</span>, is to set <code>kerning</code> to a value of <span class="prop-value">0</span> so that auto-kerning is disabled.</p>
<p>If a <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> is provided without a unit identifier (e.g., an unqualified number such as <span class="attr-value">128</span>), the browser processes the <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> as a width value in the current user coordinate system.</p>
<p>If a <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> is provided with a unit identifier (e.g., <span class="attr-value">.25em</span> or <span class="attr-value">1%</span>), then the browser converts the <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> into a corresponding value in the current user coordinate system.</p>
<p>When a <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> is provided, its value is added to the inter-character spacing value specified by the {{ SVGAttr("letter-spacing") }} attribute.</p>
<p>As a presentation attribute, it also can be used as a property directly inside a CSS stylesheet, see {{ cssxref("kerning","CSS kerning") }} for further information.</p>
<h2 id="Usage_context">Usage context</h2>
<table class="standard-table"> <tbody> <tr> <th scope="row">Categories</th> <td>Presentation attribute</td> </tr> <tr> <th scope="row">Value</th> <td><strong>auto</strong> | <a href="/en/SVG/Content_type#Length" title="https://developer.mozilla.org/en/SVG/Content_type#Length">&lt;length&gt;</a> | inherit</td> </tr> <tr> <th scope="row">Animatable</th> <td>Yes</td> </tr> <tr> <th scope="row">Normative document</th> <td><a class="external" href="http://www.w3.org/TR/SVG11/text.html#KerningProperty" title="http://www.w3.org/TR/SVG11/text.html#KerningProperty">SVG 1.1 (2nd Edition)</a></td> </tr> </tbody>
</table>
<p>{{ page("/en/SVG/Content_type","Length") }}</p>
<h2 id="Elements">Elements</h2>
<p>The following elements can use the <code>kerning</code> attribute</p>
<ul> <li><a href="/en/SVG/Element#Text_content_elements" title="en/SVG/Element#Text_content_elements">Text content elements</a> »</li>
</ul>
<h2 id="See_also">See also</h2>
<ul> <li>{{ cssxref("kerning","CSS kerning") }}</li>
</ul>
Revert to this revision