> 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-es/scenes-sdk7/ui-2d/ui_text.md).
# Texto de UI
Escribe texto en entidades de UI.
Añade texto a tu UI creando una `Label` entity.
Una `Label` entity tiene los siguientes campos que se pueden configurar:
* `value`: La cadena a 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 ni de sus parent entities.
* `color`: El color del texto, como un [Color4](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/color-types.md).
* `font`: La fuente a usar. Los valores compatibles son:
* `'serif'`
* `'sans-serif'` *(predeterminado)*
* `'monospace'`
* `fontSrc`: Ruta a un `.ttf` archivo de fuente en tu escena, para renderizar el texto con una fuente personalizada. `font` se usa como alternativa. Consulta [Fuentes personalizadas](#custom-fonts).
* `textAlign`: Cómo se alineará el texto con su parent. Toma un valor del `TextAlignType` tipo. TextAlignType = 'top-left' | 'top-center' | 'top-right' | 'middle-left' | 'middle-center' | 'middle-right' | 'bottom-left' | 'bottom-center' | 'bottom-right';
* `textWrap`: Establece si el texto usa saltos de línea para evitar exceder el ancho máximo. Está activado por defecto (`'wrap'`), para desactivarlo pasa el valor `'nowrap'`.
{% hint style="warning" %}
**📔 Nota**: El `fontSize` no se ve afectado por el tamaño de su entity ni de sus parent entities.
{% endhint %}
Una `Label` entity también puede tener otros components 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 = () => (
)
```
***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 de esta página asumen que tienes una `.ts` similar a la anterior, ejecutando la `ReactEcsRenderer.setUiRenderer()` función.
{% 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 la `textWrap` propiedad a `'nowrap'`.
También puedes forzar un salto de línea añadiendo explícitamente `\n` a la cadena.
```ts
import { UiEntity, Label, ReactEcs } from '@dcl/sdk/react-ecs'
export const uiMenu = () => (
)
```
Si no se establece explícitamente `height` o `width` se establece en el `uiTransform` del contenedor, el contenedor usará el valor `auto`, que se ajusta para caber todo el texto. 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 vuelva demasiado pequeño, incluso si el texto es más corto.
{% hint style="warning" %}
**📔 Nota**: No dependas de ese ajuste automático para el texto. Cuánto espacio ocupa un `Label` takes up when you leave its size unset differs between explorers. The Bevy-based explorer measures the rendered text and lays it out accordingly. The Unity explorer gives it almost no height, but still draws the letters, so stacked labels land on top of each other and a parent sized from its text collapses to nothing.
Da a cada `Label` explícito `width` **y** `height` en su `uiTransform`, y dale una altura explícita a cualquier contenedor que apile labels. Para texto ajustado, calcula la altura para el número de líneas: dos líneas con `fontSize: 20` necesita aproximadamente `height: 60`.
Como esto difiere según el explorer, una vista previa que se ve bien en un cliente no demuestra que el diseño sea correcto en otro.
{% endhint %}
## Fuentes personalizadas
Para renderizar un `Label` con tu propia fuente, añade un archivo TrueType (`.ttf`) a la carpeta de tu escena y establece la `fontSrc` propiedad en su ruta, relativa a la carpeta raíz de la escena. Mantén `font` también configurado: es la alternativa que se usa siempre que no se pueda cargar la fuente personalizada.
{% hint style="warning" %}
**📔 Nota**: `fontSrc` requiere una versión del SDK posterior a 7.30.1. En 7.30.1 y anteriores, la propiedad no existe.
{% endhint %}
```tsx
```
El `Button` entity, el `uiText` de un `UiEntity` y el [`Input` y `Dropdown`](/creator/content-creator-es/scenes-sdk7/ui-2d/ui_special_types.md) entities aceptan `fontSrc` también, y también lo hace el [`TextShape`](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/text.md#custom-fonts) component para texto en el espacio 3D.
Ten en cuenta lo siguiente al usar fuentes personalizadas:
* **Solo `.ttf` se admiten archivos**. Las fuentes OpenType con contornos CFF (normalmente `.otf`), las colecciones de fuentes y las web fonts se rechazan, y el texto se renderiza con la alternativa `font`.
* **La fuente debe ser un archivo en tu escena**. `fontSrc` no puede apuntar a una URL externa, y los nombres de familias de fuentes (por ejemplo, de Google Fonts) tampoco son compatibles. Descarga el `.ttf` archivo e inclúyelo en la carpeta de tu escena. Asegúrate de que su licencia permita redistribuirlo.
* **En el cliente de escritorio, las fuentes personalizadas solo aparecen una vez que los assets de la escena están optimizados**. Cuando publicas una escena, sus fuentes se convierten en paquetes de assets optimizados junto con sus modelos 3D, y la fuente personalizada aparece una vez que esa conversión termina. Hasta entonces, el texto usa la alternativa `font`. **Compress Assets** opción en Creator Hub, o `npm run start -- --asset-bundles` desde la CLI). Consulta [Vista previa con assets optimizados](/creator/content-creator-es/scenes-sdk7/primeros-pasos/preview-scene.md#preview-with-optimized-assets). `.ttf` el archivo directamente, así que allí la fuente personalizada se muestra de inmediato, también en las vistas previas locales.
* **No compatible en móvil**. La aplicación móvil de Decentraland ignora `fontSrc` y renderiza la alternativa `font`. Elige una alternativa que siga viéndose bien, y no dependas de la fuente personalizada para que el texto quepa en un espacio fijo. Consulta [Funciones faltantes en móvil](/creator/content-creator-es/desarrollar-para-movil/cliente-movil/missing-features.md).
* **Los caracteres que la fuente no incluye** se dibujan con la fuente sans-serif integrada. Los caracteres no latinos que la fuente sí incluye se renderizan la primera vez que aparecen, lo que puede causar un breve tirón.
Para ver la lista completa de límites, como el tamaño máximo del archivo, consulta [Fuentes personalizadas](/creator/content-creator-es/scenes-sdk7/fundamentos-del-contenido-3d/text.md#custom-fonts) en la página de Text.
## No uses emoji en el texto de la UI
Deja los emoji fuera de cualquier `Label` o `Button` `value`, `uiText.value`, `Input` `placeholder`, y `Dropdown` opción.
El SDK no incluye glifos de emoji. Que un emoji aparezca depende de las fuentes que empaqueta cada explorer, y el explorer de Unity no incluye ninguno, así que el carácter aparece como una caja vacía o desaparece por completo. La misma precaución aplica a otros Unicode decorativos, como flechas y caracteres de dibujo de cajas.
Para una etiqueta pictórica, incluye el arte en su lugar: coloca una imagen en un pequeño `UiEntity` junto al texto, usando una `uiBackground` con una `texture`. Consulta [Fondos de UI](/creator/content-creator-es/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 = () => (
)
```
## Tamaño de texto adaptable
Usa la `scaleFontSize()` función para proporcionar valores de fuente que se ajusten al tamaño de pantalla del player. Al establecer la `fontSize` propiedad de una UI entity 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 = () => (
)
```
El `scaleFontSize()` La función requiere dos parámetros:
* `fontSize`: El tamaño base de fuente a usar.
* `scaleUnit` *(opcional)*: El factor de escala. Esto determina si el texto debe ajustarse en función del ancho o de la altura de la pantalla, y un multiplicador de cuánto adaptarlo. Predeterminado: `0.39` (un número, así que se interpreta como relativo a *width*). 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 a la CSS `calc()` función.
{% endhint %}
El valor de `scaleUnit` es un porcentaje del ancho o la altura de la ventana. Así que un `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 multiplica el ancho o la altura de la pantalla por el `scaleUnit`, y le suma el `fontSize` pasado en el primer parámetro.
```ts
final font = fontSize + (screen width * scaleUnit / 100)
```
Por ejemplo, en el fragmento siguiente 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 **25.24**, siguiendo la ecuación `15 + (1280 * 0.8 / 100)`.
{% hint style="warning" %}
**📔 Nota**: `scaleFontSize()` devuelve un **number**, así que su resultado es un tamaño en *virtual* píxeles — todavía se multiplica por el [factor de escala de la UI](/creator/content-creator-es/scenes-sdk7/ui-2d/onscreen-ui.md#screen-virtual-scale) antes de dibujarse. En el ejemplo anterior, con la pantalla virtual predeterminada de `1920x1080` y un canvas de 1280px de ancho, el factor de escala es `1280 / 1920 = 0.667`, así que el texto se renderiza a unos 16,8 px. Si quieres un tamaño de fuente medido directamente contra el canvas, que ignore la pantalla virtual, pasa una `vw`/`vh` **string** directamente a `fontSize` en su lugar — por ejemplo `fontSize: '1.8vh'`.
{% endhint %}
```ts
import { scaleFontSize } from '@dcl/sdk/react-ecs'
import { UiEntity, ReactEcs } from '@dcl/sdk/react-ecs'
export const uiMenu = () => (
)
```
{% hint style="info" %}
**💡 Consejo**: Si no tienes distintos tamaños de pantalla para probar, puedes intentar usar el Web Explorer y cambiar el tamaño de la ventana donde ejecutas la vista previa. El texto se ajustará al instante cada vez que cambies la ventana.
{% endhint %}
Como alternativa a `scaleFontSize()`, pasa una `vw`/`vh` cadena directamente como `fontSize` — por ejemplo `fontSize: '1.8vh'` — que dimensiona el texto contra el canvas e ignora por completo el factor de escala de la UI. No **lo** multipliques los tamaños de fuente por un factor que calcules tú mismo a partir de `UiCanvasInformation`: el SDK ya aplica uno, consulta [Tamaño adaptable de la UI](/creator/content-creator-es/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 by asking a question.
Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:
```
GET https://docs.decentraland.org/creator/content-creator-es/scenes-sdk7/ui-2d/ui_text.md?ask=&goal=
```
`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.
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.