> For the complete documentation index, see [llms.txt](https://docs.decentraland.org/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.decentraland.org/creator/content-creator-pt/scenes-sdk7/ui-2d/ui_text.md).

# Texto da UI

Escreva texto em UI entities.

Adicione texto à sua UI criando um `Label` entity.

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.

  > OBSERVAÇÃO: O `fontSize` não é afetado pelo tamanho da sua entity ou das entities pai.
* `color`: A cor do texto, como um [Color4](/creator/content-creator-pt/scenes-sdk7/fundamentos-de-conteudo-3d/color-types.md).
* `font`: A fonte a ser usada. Os valores suportados são:
  * `'serif'`
  * `'sans-serif'` *(padrão)*
  * `'monospace'`
* `textAlign`: Como o texto será alinhado com o seu pai. Ele recebe um valor do `TextAlignType` tipo. TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
* `textWrap`: Define se o texto usa quebras de linha para evitar ultrapassar a largura máxima. Vem ativado por padrão (`'wrap'`), para desativá-lo passe o valor `'nowrap'`.

{% hint style="warning" %}
**📔 Nota**: O `fontSize` não é afetado pelo tamanho da sua entity ou das entities pai.
{% endhint %}

A `Label` entity também pode ter outros componentes comuns encontrados em outros tipos de entities de UI, 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="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 uma `.ts` semelhante à acima, executando a função `ReactEcsRenderer.setUiRenderer()` .
{% endhint %}

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

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

```ts
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 não houver uma definição explícita `altura` ou `largura` estiver definida no `uiTransform` do container, o container usará o valor `auto`, que se ajusta para caber 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 demasiado pequeno, mesmo que o texto seja mais curto.

{% hint style="warning" %}
**📔 Nota**: Não dependa desse ajuste automático para o texto. O espaço que um `Label` ocupa quando você deixa o seu tamanho indefinido difere entre explorers. O explorer baseado em Bevy mede o texto renderizado e organiza-o de acordo. O explorer da Unity quase não lhe dá altura, mas ainda desenha as letras, então rótulos empilhados ficam sobrepostos e um pai dimensionado a partir do seu texto colapsa para nada.

Dê a cada `Label` uma definição explícita `largura` **e** `altura` na sua `uiTransform`, e dê uma altura explícita a qualquer container que empilhe rótulos. Para texto com quebra de linha, dimensione a altura pelo número de linhas: duas linhas com `fontSize: 20` precisam de cerca de `height: 60`.

Como isso difere por explorer, uma preview que parece correta em um client não prova que o layout esteja correto em outro.
{% endhint %}

## Não use emoji no texto da UI

Deixe os emoji de fora de qualquer `Label` ou `Button` `value`, `uiText.value`, `Input` `placeholder`, e `Dropdown` .

O SDK não inclui glifos de emoji. Se um emoji aparece ou não depende das fontes que cada explorer inclui, e o explorer da Unity não inclui nenhuma, então o caractere surge como uma caixa vazia ou desaparece por completo. A mesma cautela aplica-se a outros Unicode decorativos, como setas e caracteres de desenho de caixas.

Para um rótulo pictórico, inclua a arte em vez disso: coloque uma imagem num pequeno `UiEntity` ao lado do texto, usando um `uiBackground` com um `texture`. Veja [Fundos da UI](/creator/content-creator-pt/scenes-sdk7/ui-2d/ui_background.md).

```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

Usa o `scaleFontSize()` função para fornecer valores de fonte que se ajustam ao tamanho do ecrã do jogador. Ao definir a `fontSize` propriedade de uma entity de UI de texto, 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)
    }}
  />
)
```

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

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

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

O valor de `scaleUnit` é uma percentagem da largura ou altura da janela. Assim, 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()` se segue multiplica a largura ou a altura do ecrã pelo `scaleUnit`, e soma a isso o `fontSize` passado no primeiro parâmetro.

```ts
final font = fontSize + (screen width * scaleUnit / 100)
```

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

{% hint style="warning" %}
**📔 Nota**: `scaleFontSize()` retorna um **número**, então o seu resultado é um tamanho em *virtual* pixels — ainda é multiplicado pelo [fator de escala da UI](/creator/content-creator-pt/scenes-sdk7/ui-2d/onscreen-ui.md#screen-virtual-scale) antes de ser desenhado. No exemplo acima, com o `1920x1080` ecrã virtual e um canvas de 1280px de largura, o fator de escala é `1280 / 1920 = 0.667`, então o texto é renderizado em cerca de 16,8px. Se você quiser um tamanho de fonte medido diretamente em relação ao canvas, ignorando o ecrã virtual, passe uma `vw`/`vh` **string** diretamente para `fontSize` em vez disso — por exemplo `fontSize: '1.8vh'`.
{% endhint %}

```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 ecrã para testar, pode tentar usar o Web Explorer e redimensionar a janela onde executa a Preview. O texto ajustar-se-á instantaneamente sempre que alterar a janela.
{% endhint %}

Como alternativa a `scaleFontSize()`, passe uma `vw`/`vh` string diretamente como o `fontSize` — por exemplo `fontSize: '1.8vh'` — que dimensiona o texto em relação ao canvas e ignora totalmente o fator de escala da UI. Não **não** multiplique tamanhos de fonte por um fator que você calcula por conta própria a partir de `UiCanvasInformation`: o SDK já aplica um, veja [Tamanho responsivo da UI](/creator/content-creator-pt/scenes-sdk7/ui-2d/ui-positioning.md#responsive-ui-size).


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## 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, and the optional `goal` query parameter:

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

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

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.