CSS text-size-adjust Property

❮ Previous Reference Next ❯

Experimental: This is an experimental technology.

Example

.none {
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}

.auto {
  -webkit-text-size-adjust: auto;
  text-size-adjust: auto;
}

.custom {
  -webkit-text-size-adjust: 80%;
  text-size-adjust: 80%;
}
Try this code ❯

Meaning:

The text-size-adjust CSS property controls the text inflation algorithm used on some smartphones and tablets. Other browsers will ignore this property.

Because many websites have not been developed with small devices in mind, mobile browsers differ from desktop browsers in the way they render web pages. Instead of laying out pages at the width of the device screen, they lay them out using a viewport that is much wider, usually 800 or 1000 pixels. To map the extra-wide layout back to the original device size, they either show only part of the whole render or scale the viewport down to fit.

Since text that has been scaled down to fit a mobile screen may be very small, many mobile browsers apply a text inflation algorithm to enlarge the text to make it more readable. When an element containing text uses 100% of the screen's width, the algorithm increases its text size, but without modifying the layout. The text-size-adjust property allows web authors to disable or modify this behavior, as web pages designed with small screens in mind do not need it.

Default value:auto
Inherited:No
Animatable:No
Version:CSS3
JavaScript syntax:
object.style.textSizeAdjust="none|auto|percentage|initial|inherit|revert|revert-layer|unset";


Standard Syntax

text-size-adjust: none|auto|percentage|initial|inherit|revert|revert-layer|unset;


Browser Support



Status





Property Values

The following table describes the values of this property:

Value Description
none Disables the browser's inflation algorithm.
auto Enables the browser's inflation algorithm. This value is used to cancel a none value previously set with CSS.
percentage Enables the browser's inflation algorithm, specifying a percentage value with which to increase the font size.
initial Sets this property to its default value.
inherit If specified, the associated element takes the computed value of its parent element animation-delay property.
revert Reverts the cascaded value of the property from its current value to the value the property
revert-layer Rollback styles to the ones specified in previous cascade layers.
unset Resets a property to its inherited value if the property naturally inherits from its parent, and to its initial value if not.


Default CSS Property Values

selectors {
  text-size-adjust: none;
}
❮ Previous Reference Next ❯