# Texto da UI

Adicione texto à sua UI criando um `Label` .

A `Label` entity tem os seguintes campos que podem ser configurados:

* `value`: A string a ser exibida
* `fontSize`: O tamanho do texto, como um número.

  > NOTA: O `fontSize` não é afetado pelo tamanho de sua entidade ou de suas entidades pai.
* `color`: A cor do texto, como um [Color4](/creator/content-creator-pt/scenes-sdk7/essenciais-de-conteudo-3d/color-types.md).
* `font`: A fonte a ser usada, tomando um valor do `Font` enum. Os valores suportados são:
  * `F_SERIF`
  * `F_SANS_SERIF` *(padrão)*
  * `F_MONOSPACE`
* `textAlign`: Como o texto ficará alinhado com seu parent. Ele usa um valor do `TextAlingType` type. TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
* `textWrap`: Se o texto usa quebras de linha para garantir que tudo caiba na largura máxima permitida. Ele pode receber as strings `'wrap'` (padrão) ou `'nowrap'`.

{% hint style="warning" %}
**📔 Nota**: A `fontSize` não é afetado pelo tamanho de sua entidade ou de suas entidades pai.
{% endhint %}

A `Label` entity também pode ter outros components comuns encontrados em outros tipos de UI entities, como `uiTransform` e `uiBackground`.

***arquivo ui.tsx:***

```ts
import { UiEntity, Label, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
	<UiEntity uiTransform={{ width: 'auto', height: 'auto' }}>
		<Label
			value="This is a label"
			color={Color4.Red()}
			fontSize={29}
			font="F_SANS_SERIF"
			textAlign="top-left"
		/>
	</UiEntity>
)
```

***arquivo index.ts:***

```ts
import { ReactEcsRenderer } from '@dcl/sdk/react-ecs'
import { uiMenu } from './ui'

export function main() {
    ReactEcsRenderer.setUiRenderer(uiMenu, { virtualWidth: 1920, virtualHeight: 1080 })
}
```

{% hint style="warning" %}
**📔 Nota**: Todos os snippets a seguir nesta página assumem que você tem um `.ts` semelhante ao acima, executando a função `ReactEcsRenderer.setUiRenderer()` .
{% endhint %}

Se uma linha de texto for muito longa para caber na largura atribuída, ou na largura máxima do seu container, o texto continuará na próxima linha. Você pode desativar isso alterando o valor de `textWrap` propriedade para `'nowrap'`.

Você também pode forçar uma quebra de linha adicionando explicitamente `\n` à string.

```ts
import { TextWrap } from "@dcl/sdk/ecs";
import { UiEntity, Label, ReactEcs } from '@dcl/sdk/react-ecs'

export const uiMenu = () => (
	<UiEntity uiTransform={{ width: 700, height: 400 }}>
		<Label 
			value="Hello World!\nThis other bit is quite long. It probably won't fit in a single line, so it will include a line break somewhere.\nFourth line"
			textWrap= {`nowrap`} 
		/>
	</UiEntity>
)
```

Se nenhum `height` ou `width` explícito for definido no `uiTransform` do container, o container usará o valor `auto`, que se ajusta para caber em todo o texto. Você pode definir um `maxWidth` e um `maxHeight` para garantir que ele não exceda certos limites. Você também pode usar `minWidth` e `minHeight` para garantir que o container não fique pequeno demais, mesmo que o texto seja mais curto.

```ts
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
	<UiEntity
		uiTransform={{
			minWidth: 100,
			maxWidth: 300,
			height: 'auto',
			alignSelf: 'center',
			padding: 10,
		}}
		uiBackground={{
			color: Color4.Red(),
		}}
		uiText={{
			value: 'Hello world!',
			fontSize: 18,
		}}
	/>
)
```

## Tamanho de texto responsivo

Use o `scaleFontSize()` função para fornecer valores de fonte que se ajustam ao tamanho da tela do jogador. Ao definir a `fontSize` property de um text UI entity, passe esta função em vez de um único número.

```ts
import { scaleFontSize } from '@dcl/sdk/react-ecs'
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
import { Color4 } from '@dcl/sdk/math'

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 'auto',
      height: 'auto',
      alignSelf: 'center',
      padding: 10,
    }}
    uiText={{
      value: 'Hello world!',
      fontSize={scaleFontSize(15)}
    }}
  />
)
```

O `scaleFontSize()` função requer dois parâmetros:

* `fontSize`: O tamanho base da fonte a ser usado.
* `scaleUnit` *(opcional)*: O fator de escala. Isso determina se o texto deve ser ajustado com base na largura ou na altura da tela, e um multiplicador de quanto adaptar. Padrão: `"0.39vh"`. Os valores podem ser:
  * *Number*: Um número simples; neste caso, ele é interpretado como relativo a *width*
  * *String terminando em **vw***: Isso torna o número relativo à largura da visualização. Por exemplo `"0.8vw"`
  * *String terminando em **vh***: Isso torna o número relativo à altura da visualização. Por exemplo `"0.8vh"`

{% hint style="info" %}
**💡 Dica**: Esta função funciona de forma semelhante ao CSS `calc()` .
{% endhint %}

O valor de `scaleUnit` é uma porcentagem da largura ou da altura da janela. Então um `scaleUnit` de `"100vw"` é 100% da largura da tela, um valor de `"0.5vw"` é 0.5% da largura da tela.

A fórmula que `scaleFontSize()` segue é multiplicar a largura ou a altura da tela pelo `scaleUnit` e somar a isso o `fontSize` passado no primeiro parâmetro.

```ts
fonte final = fontSize + (largura da tela * scaleUnit / 100 )
```

Por exemplo, no trecho abaixo usa-se um `scaleUnit` valor de 0.8. Se a largura da tela for *1280px* isso resultará em um texto de tamanho **26.84**, seguindo a equação `15 + (1280 * 0.8 / 100)`.

```ts
import { scaleFontSize } from '@dcl/sdk/react-ecs'
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'

export const uiMenu = () => (
  <UiEntity
    uiTransform={{
      width: 'auto',
      height: 'auto',
      alignSelf: 'center',
      padding: 10,
    }}
    uiText={{
      value: 'Hello world!',
      fontSize={scaleFontSize(15, 0.8)}
    }}
  />
)
```

{% hint style="info" %}
**💡 Dica**: Se você não tiver diferentes tamanhos de tela para testar, pode tentar usar o Web Explorer e redimensionar a janela onde você executa o preview. O texto se ajustará instantaneamente toda vez que você alterar a janela.
{% endhint %}

Como alternativa ao uso da `scaleFontSize()` função, você também pode ajustar o tamanho da fonte ao tamanho da tela usando os métodos descritos em [Responsive UI Size](/creator/content-creator-pt/scenes-sdk7/ui-2d/ui-positioning.md#responsive-ui-size).


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/ui-2d/ui_text.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.