# Texto de UI

Añade texto a tu UI creando un `Label` .

A `Label` Entity tiene los siguientes campos que se pueden configurar:

* `value`: La cadena que se mostrará
* `fontSize`: El tamaño del texto, como un número.

  > NOTA: El `fontSize` no se ve afectado por el tamaño de su entity o de sus parent entities.
* `color`: El color del texto, como un [Color4](/creator/content-creator-es/scenes-sdk7/esenciales-de-contenido-3d/color-types.md).
* `font`: La font que se usará, tomando un valor del `Font` enum. Los valores compatibles son:
  * `F_SERIF`
  * `F_SANS_SERIF` *(predeterminado)*
  * `F_MONOSPACE`
* `textAlign`: Cómo se alineará el texto con su padre. Toma un valor del `TextAlingType` type. TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
* `textWrap`: Si el texto usa saltos de línea para asegurarse de que quepa dentro del ancho máximo permitido. Puede tomar las cadenas `'wrap'` (predeterminado) o `'nowrap'`.

{% hint style="warning" %}
**📔 Nota**: La `fontSize` no se ve afectado por el tamaño de su entity o de sus parent entities.
{% endhint %}

A `Label` Entity también puede tener otros componentes comunes que se encuentran en otros tipos de UI entities, como `uiTransform` y `uiBackground`.

***archivo 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>
)
```

***archivo 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 los siguientes fragmentos en esta página asumen que tienes un `.ts` similar al anterior, ejecutando la función `ReactEcsRenderer.setUiRenderer()` .
{% endhint %}

Si una línea de texto es demasiado larga para caber en el ancho asignado, o en el ancho máximo de su contenedor, el texto continuará en la siguiente línea. Puedes desactivar esto cambiando el valor de `textWrap` propiedad en `'nowrap'`.

También puedes forzar un salto de línea añadiendo explícitamente `\n` a la cadena.

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

Si no se establece ningún `height` o `width` explícito en el `uiTransform` del contenedor, el contenedor usará el valor `auto`, que se ajusta para que todo el texto quepa. Puedes establecer un `maxWidth` y un `maxHeight` para asegurarte de que no exceda ciertos límites. También puedes usar `minWidth` y `minHeight` para asegurarte de que el contenedor no se haga demasiado pequeño, incluso si el texto es más corto.

```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,
		}}
	/>
)
```

## Tamaño de texto adaptable

Usa la `scaleFontSize()` function para proporcionar valores de fuente que se ajusten al tamaño de pantalla del jugador. Al configurar la `fontSize` propiedad de una entidad UI de texto, pasa esta función en lugar de un solo 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)}
    }}
  />
)
```

El `scaleFontSize()` function requiere dos parámetros:

* `fontSize`: El tamaño base de fuente que se usará.
* `scaleUnit` *(opcional)*: El factor de escala. Esto determina si el texto debe ajustarse según el ancho o la altura de la pantalla, y un multiplicador de cuánto adaptarse. Predeterminado: `"0.39vh"`. Los valores pueden ser:
  * *Number*: Un número simple; en este caso se interpreta como relativo a *width*
  * *Cadena que termina en **vw***: Esto hace que el número sea relativo al ancho de la vista. Por ejemplo `"0.8vw"`
  * *Cadena que termina en **vh***: Esto hace que el número sea relativo a la altura de la vista. Por ejemplo `"0.8vh"`

{% hint style="info" %}
**💡 Consejo**: Esta función funciona de forma similar al CSS `calc()` .
{% endhint %}

El valor de `scaleUnit` es un porcentaje del ancho o la altura de la ventana. Así que `scaleUnit` de `"100vw"` es el 100% del ancho de la pantalla, un valor de `"0.5vw"` es el 0.5% del ancho de la pantalla.

La fórmula que `scaleFontSize()` sigue consiste en multiplicar el ancho o la altura de la pantalla por `scaleUnit` y sumar a eso el `fontSize` pasado en el primer parámetro.

```ts
fuente final = fontSize + (ancho de pantalla * scaleUnit / 100 )
```

Por ejemplo, en el fragmento de abajo se usa un `scaleUnit` valor de 0.8. Si el ancho de la pantalla es *1280px* eso dará como resultado un texto de tamaño de **26.84**, habiendo seguido la ecuación `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" %}
**💡 Consejo**: Si no tienes diferentes tamaños de pantalla para probar, puedes intentar usar el Web Explorer y redimensionar la ventana donde ejecutas la vista previa. El texto se ajustará al instante cada vez que cambies la ventana.
{% endhint %}

Como alternativa a usar la `scaleFontSize()` function, también puedes ajustar el tamaño de fuente al tamaño de pantalla usando los métodos descritos en [Responsive UI Size](/creator/content-creator-es/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-es/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.