# Text-Align

Os alinhadores de texto do **WPF** são classes utilitárias que controlam o alinhamento horizontal de texto em elementos HTML. Eles utilizam a propriedade CSS `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">text-align</span>` para oferecer flexibilidade e simplicidade no ajuste de layouts textuais.

### Como Funcionam os Alinhadores de Texto

Os alinhadores seguem as seguintes definições principais:

<table border="1" id="bkmrk-classe-utilit%C3%A1ria-co" style="border-collapse: collapse; width: 100%; height: 238.375px;"><colgroup><col style="width: 50%;"></col><col style="width: 50%;"></col></colgroup><thead><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">Classe Utilitária</td><td class="align-center" style="height: 29.7969px;">Comportamento</td></tr></thead><tbody><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">`t-left`</td><td class="align-center" style="height: 29.7969px;">*Alinha o texto à esquerda.*  
</td></tr><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">`t-center`</td><td class="align-center" style="height: 29.7969px;">*Centraliza o texto.*  
</td></tr><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">`t-right`</td><td class="align-center" style="height: 29.7969px;">*Alinha o texto à direita.*  
</td></tr><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">`t-start`</td><td class="align-center" style="height: 29.7969px;">*Alinha o texto no início da **direção configurada do texto**.*  
</td></tr><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">`t-end`</td><td class="align-center" style="height: 29.7969px;">*Alinha o texto no final da **direção configurada do texto**.*  
</td></tr><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">`t-justify`</td><td class="align-center" style="height: 29.7969px;">*Justifica o texto.*  
</td></tr><tr style="height: 29.7969px;"><td class="align-center" style="height: 29.7969px;">`t-justify-all`</td><td class="align-center" style="height: 29.7969px;">*Justifica todas as linhas do texto, **incluindo a última**.*  
</td></tr></tbody></table>

### Exemplos de Uso

#### Alinhamento Básico

```html
<p class="t-left"><!-- Texto à esquerda. --></p>
<p class="t-center"><!-- Texto centralizado. --></p>
<p class="t-right"><!-- Texto à direita. --></p>
```

#### Alinhamento Dinâmico

```html
<p class="t-start"><!-- Texto no início (esquerda em LTR). --></p>
<p class="t-end"><!-- Texto no final (direita em LTR). --></p>
```

#### Justificação

```html
<p class="t-justify"><!-- Texto justificado, exceto a última linha. --></p>
<p class="t-justify-all"><!-- Texto justificado, incluindo a última linha. --></p>
```

### Notas

<p class="callout info">**Suporte a Idiomas**: Use `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">t-start</span>` e `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">t-end</span>` para layouts que precisam se adaptar a direções de texto como *RTL (right-to-left)*.</p>

<p class="callout info">**Justify vs. Justify-All**: `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">t-justify</span>` é ideal para parágrafos normais, enquanto `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">t-justify-all</span>` é útil para textos curtos que exigem alinhamento completo.</p>

<p class="callout warning">O valor `<span class="text-sm px-1 rounded-sm !font-mono bg-sunset/10 text-rust dark:bg-dawn/10 dark:text-dawn">justify-all</span>` pode **não ser suportado** em navegadores mais antigos; <span style="text-decoration: underline;">teste a compatibilidade se necessário</span>.</p>