Rendering

Text Rendering

Utilities for fine tune optimization by suggesting to the browser as to how it should render text on the screen.


Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

classcss
text-optimize-autotext-rendering: auto;
text-optimize-speedtext-rendering: optimizeSpeed;
text-optimize-legibilitytext-rendering: optimizeLegibility;
text-optimize-precisiontext-rendering: geometricPrecision;

Usage

<div class="text-optimize-legibility">
...
</div>
HTML
.dummy {
@extend
.text-optimize-legibility;
}
SCSS