text-size-adjust

  • Revision slug: CSS/text-size-adjust
  • Revision title: text-size-adjust
  • Revision id: 350595
  • Created:
  • Creator: scottrowe
  • Is current revision? No
  • Comment

Revision Content

{{CSSRef}} {{Non-standard_header}}

Summary

On mobile devices, the text-size-adjust CSS property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.

As this property is non-standard, it must be used prefixed: -moz-text-size-adjust, -webkit-text-size-adjust, and -ms-text-size-adjust.

Browsers on smartphones don't display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.

In essence, this means that either only a small, rectangular portion of the original web page is usually visible on a mobile device screen or that on mobile devices, the web page looks "zoomed out" and smaller than intended.

This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.

But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text inflation algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.

The text-size-adjust property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.

Notes:
  • This property is not standard. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.
  • Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.
  • This property only has an effect on smartphones. As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, not to opt in.
  • If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop and tablet browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page.#
  • Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn't). Again Web developers should read the browser compatibility section with the required attention.
  • {{Xref_cssinitial()}} auto for smartphone browsers supporting inflation, none in other cases (and then not modifiable)
  • Applies to all elements
  • {{Xref_cssinherited()}}yes
  • {{xref_csspercentage()}}yes, refer to the corresponding size of the text font
  • Media {{Xref_cssvisual()}}
  • {{Xref_csscomputed()}} the keyword or the percentage value
  • Animatable no

Syntax

Formal syntax: none | auto | <percentage>
text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <percentage>       /* text may be inflated of this exact proportion */

text-size-adjust: inherit

Values

none
Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On desktop Webkit-based browsers, this will only prevent any zoom on the whole page.
auto
Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won't do it on desktops and on some tablets. Its main use is to cancel a none value previously set.
<percentage>
A percentage value is a synonym of the auto keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.

Specifications

The text-size-adjust CSS property is not on the standard tracks and no formal specifications has been published.

Browser compatibility

Only mobile browser do support this CSS property.

{{CompatibilityTable()}}

Feature Chrome Firefox (Gecko) Internet Explorer Opera Safari (WebKit)
Basic support {{CompatNo}} (see Webkit note) {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} (see Webkit note)
Percentages {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}} {{CompatNo}}
Feature Android Firefox Mobile (Gecko) IE Phone Opera Mobile Safari Mobile
Basic support {{CompatUnknown}} {{CompatGeckoMobile("11.0")}} {{property_prefix("-moz")}}# {{CompatVersionUnknown}} (see note) {{CompatNo}} {{CompatVersionUnknown}}{{property_prefix("-webkit")}}
Percentages {{CompatUnknown}} {{CompatNo}} {{CompatVersionUnknown}}(see note) {{CompatNo}} {{CompatVersionUnknown}}

IE Phone note

If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS text-size-adjust property is ignored.

Webkit note

There is a bug in Webkit-based desktop browsers. If -webkit-text-size-adjust is explicitely set to none, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page. See Bug 56543 and Bug 84186.

See also

Revision Source

<div>
  {{CSSRef}} {{Non-standard_header}}</div>
<h2 id="Summary" name="Summary">Summary</h2>
<p>On mobile devices, the <code>text-size-adjust</code> <a href="/en-US/docs/CSS" title="CSS">CSS</a> property allows Web authors to control if and how the text-inflating algorithm is applied to the textual content of the element it is applied to.</p>
<p>As this property is non-standard, it must be used prefixed: <code>-moz-text-size-adjust</code>, <code>-webkit-text-size-adjust</code>, and <code>-ms-text-size-adjust</code>.</p>
<p>Browsers on smartphones don't display web pages using the same algorithms as browsers rendering web pages on desktop machines. Instead of laying out the web page at the width of the device screen, they lay it out using a viewport that is much wider than the device screen, usually of 800 or 1000 pixels wide. One of two possible methods is used to map back to the original device coordinates: either a smaller window is then used to display on the device screen only part of what is actually being rendered, or the viewport is stretched to the size of the device.</p>
<p>In essence, this means that either only a small, rectangular portion of the original web page is usually visible on a mobile device screen or that on mobile devices, the web page looks "zoomed out" and smaller than intended.</p>
<p>This approach has been used as numerous web sites are not able to cope with small screens and are not usable when using the classical layout algorithm. This technique has drawbacks: the text is so tiny that it is unreadable without zooming. Even so, the user experience is better with the classical approach, which often leads to put secondary content at the top of the smartphone display, effectively pushing the main content of the page outside the viewport.</p>
<p>But when the user zoomed in until the text becomes readable, an horizontal scrollbar is often needed as the line becomes larger than the width of the screen. This horizontal scrollbar has to be used to read each line of the text, which is a user experience nightmare. To prevent this, several mobile browsers implement a text <strong>inflation</strong> algorithm. When a focused element containing text use 100 % of the width of the screen, its text size is increased until it reached a readable size, without modifying the layout and removing the need of an horizontal scrollbar.</p>
<p>The <code>text-size-adjust</code> property allows Web authors to opt out from this behavior, as Web pages designed to handle small screen widths do not need it.</p>
<div class="note">
  <strong>Notes</strong><strong>:</strong>
  <ul>
    <li>This property is not standard. In order to use it, Web authors have to duplicate, or even triplicate it, prefixed for each engine supporting it.</li>
    <li>Its behavior, and even the syntax, is slightly different from one browser engine to the other. Web developers should read the browser compatibility section with the required attention.</li>
    <li><strong>This property only has an effect on smartphones</strong><strong>. </strong>As there is no inflation algorithm on desktop browsers, and on some tablet browsers like the iPad, the property is not supported there (and ignored). This property is only designed to opt out, or to cancel this opt-out, of the inflating behavior, <em>not to opt in</em>.</li>
    <li>If <code>-webkit-text-size-adjust</code> is explicitely set to <code>none</code>, Webkit-based desktop and tablet browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page.<a href="https://bugs.webkit.org/show_bug.cgi?id=56543">#</a></li>
    <li>Not all engines do allow to control the final size of the text using a percentage value (E.g. Webkit and Trident do allow it, Gecko doesn't). Again Web developers should read the browser compatibility section with the required attention.</li>
  </ul>
</div>
<ul class="cssprop">
  <li><dfn>{{Xref_cssinitial()}}</dfn> <code>auto</code> for smartphone browsers supporting inflation, <code>none</code> in other cases (and then not modifiable)</li>
  <li><dfn>Applies to</dfn> all elements</li>
  <li><dfn>{{Xref_cssinherited()}}</dfn>yes</li>
  <li><dfn>{{xref_csspercentage()}}</dfn>yes, refer to the corresponding size of the text font</li>
  <li><dfn>Media</dfn> {{Xref_cssvisual()}}</li>
  <li><dfn>{{Xref_csscomputed()}}</dfn> the keyword or the percentage value</li>
  <li><dfn>Animatable</dfn> no</li>
</ul>
<h2 id="Syntax" name="Syntax">Syntax</h2>
<pre class="twopartsyntaxbox">
Formal syntax: none | auto | <var>&lt;percentage&gt;</var>
</pre>
<pre>
text-size-adjust: none               /* text is never inflated */
text-size-adjust: auto               /* text may be inflated */
text-size-adjust: <var>&lt;percentage&gt;</var>       /* text may be inflated of this exact proportion */

text-size-adjust: inherit</pre>
<h3 id="Values" name="Values">Values</h3>
<dl>
  <dt>
    <code>none</code></dt>
  <dd>
    Is a keyword preventing the usage of the inflation algorithm on the element. Basically, this means that the element will be displayed without its font inflated. On desktop Webkit-based browsers, this will only prevent any zoom on the whole page.</dd>
  <dt>
    <code>auto</code></dt>
  <dd>
    Is a keyword allowing the usage of the inflation algorithm on the element. Browsers are not forced to use it and they won't do it on desktops and on some tablets. Its main use is to cancel a <code>none</code> value previously set.</dd>
  <dt>
    <code>&lt;percentage&gt;</code></dt>
  <dd>
    A percentage value is a synonym of the <code>auto</code> keyword, with the additional information that the percentage value is the increase rate to be applied to the font size when the inflation algorithm is applied.</dd>
</dl>
<h2 id="Specifications" name="Specifications">Specifications</h2>
<p>The <code>text-size-adjust</code> CSS property is not on the standard tracks and no formal specifications has been published.</p>
<h2 id="Browser_compatibility" name="Browser_compatibility">Browser compatibility</h2>
<p>Only mobile browser do support this CSS property.</p>
<p>{{CompatibilityTable()}}</p>
<div id="compat-desktop">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Chrome</th>
        <th>Firefox (Gecko)</th>
        <th>Internet Explorer</th>
        <th>Opera</th>
        <th>Safari (WebKit)</th>
      </tr>
      <tr>
        <td rowspan="1">Basic support</td>
        <td>{{CompatNo}} (see Webkit note)</td>
        <td>{{CompatNo}}</td>
        <td rowspan="1">{{CompatNo}}</td>
        <td rowspan="1">{{CompatNo}}</td>
        <td>{{CompatNo}} (see Webkit note)</td>
      </tr>
      <tr>
        <td rowspan="1">Percentages</td>
        <td rowspan="1">{{CompatNo}}</td>
        <td>{{CompatNo}}</td>
        <td rowspan="1">{{CompatNo}}</td>
        <td rowspan="1">{{CompatNo}}</td>
        <td rowspan="1">{{CompatNo}}</td>
      </tr>
    </tbody>
  </table>
</div>
<div id="compat-mobile">
  <table class="compat-table">
    <tbody>
      <tr>
        <th>Feature</th>
        <th>Android</th>
        <th>Firefox Mobile (Gecko)</th>
        <th>IE Phone</th>
        <th>Opera Mobile</th>
        <th>Safari Mobile</th>
      </tr>
      <tr>
        <td>Basic support</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatGeckoMobile("11.0")}} {{property_prefix("-moz")}}<a href="https://bugzilla.mozilla.org/show_bug.cgi?id=627842">#</a></td>
        <td>{{CompatVersionUnknown}} (see note)</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}{{property_prefix("-webkit")}}</td>
      </tr>
      <tr>
        <td>Percentages</td>
        <td>{{CompatUnknown}}</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}(see note)</td>
        <td>{{CompatNo}}</td>
        <td>{{CompatVersionUnknown}}</td>
      </tr>
    </tbody>
  </table>
</div>
<h3 id="IE_Phone_note" name="IE_Phone_note">IE Phone note</h3>
<p>If the viewport is set using {{HTMLElement("meta")}} element, the value of the CSS <code>text-size-adjust</code> property is ignored.</p>
<h3 id="Webkit_note" name="Webkit_note">Webkit note</h3>
<p>There is a bug in Webkit-based desktop browsers. If <code>-webkit-text-size-adjust</code> is explicitely set to <code>none</code>, Webkit-based desktop browsers, like Chrome or Safari, instead of ignoring the property, will prevent the user to zoom in or out the Web page. See <a href="https://bugs.webkit.org/show_bug.cgi?id=56543">Bug 56543</a> and <a href="https://bugs.webkit.org/show_bug.cgi?id=84186">Bug 84186</a>.</p>
<h2 id="See_also" name="See_also">See also</h2>
<ul>
  <li>Apple's <a class="link-https" href="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html" title="https://developer.apple.com/library/ios/#DOCUMENTATION/AppleApplications/Reference/SafariWebContent/AdjustingtheTextSize/AdjustingtheTextSize.html">documentation</a>.</li>
  <li>Gecko's <a class="external" href="http://dbaron.org/log/20111126-font-inflation" title="http://dbaron.org/log/20111126-font-inflation">behavior description</a> by L. David Baron.</li>
  <li>Microsoft's <a class="external" href="http://msdn.microsoft.com/en-us/library/ff462082(v=vs.92).aspx#sectionToggle2" title="http://msdn.microsoft.com/en-us/library/ff462082(v=vs.92).aspx#sectionToggle2">documentation</a>.</li>
</ul>
Revert to this revision