FluidTypography KIT

On this page

A directive that adjusts font size for the text to fit in the container

Text

There is some text in here

    
      <div
    style="resize: horizontal; overflow: hidden; white-space: nowrap; line-height: 2rem; margin-bottom: 1rem"
    tuiFluidTypography
    [textContent]="text"
></div>

<button
    tuiButton
    type="button"
    (click)="randomize()"
>
    Randomize
</button>

Textfield

    
      <tui-textfield>
    <input
        placeholder="Type in long value"
        tuiFluidTypography
        tuiInput
        [(ngModel)]="value"
    />
</tui-textfield>

Options

Min/Max (converted to pixels)

    
      <tui-textfield>
    <input
        placeholder="Type in long value"
        tuiInput
        [tuiFluidTypography]="scale()"
        [(ngModel)]="value"
    />
</tui-textfield>

<tui-input-range
    [max]="30"
    [min]="1"
    [ngModel]="range()"
    [style.inset-block-start.rem]="0.5"
    (ngModelChange)="range.set($event)"
>
    Min/Max (converted to pixels)
</tui-input-range>

GitHub StackBlitz