Párrafo de estilo

En esta página, se describe cómo puedes darle estilo al texto de tu párrafo. Para establecer el diseño a nivel del párrafo, puedes configurar parámetros como textAlign y lineHeight, o definir tu propio ParagraphStyle.

Configurar alineación del texto

El parámetro textAlign te permite establecer la alineación horizontal del texto dentro de un área de superficie componible Text.

De forma predeterminada, Text seleccionará la alineación del texto natural según su valor de contenido:

• Borde izquierdo del contenedor Text para alfabetos de izquierda a derecha, como el latino, el cirílico o el hangul
• Borde derecho del contenedor Text para alfabetos de derecha a izquierda, como el árabe o el hebreo

@Composable
fun CenterText() {
    Text(
        "Hello World", textAlign = TextAlign.Center, modifier = Modifier.width(150.dp)
    )
}
TextSnippets.kt

Si quieres configurar manualmente la alineación del texto de un elemento componible Text, usa TextAlign.Start y TextAlign.End en lugar de TextAlign.Left y TextAlign.Right, respectivamente, ya que se resuelven en el borde derecho de Text, según la orientación de texto del idioma preferido. Por ejemplo, TextAlign.End se alinea con el lado derecho para el texto en francés y con el lado izquierdo para el texto en árabe, pero TextAlign.Right se alinea con el lado derecho, sin importar qué alfabeto se use.

Nota: La alineación del texto es diferente de la alineación del diseño, que consiste en posicionar un elemento componible dentro de un contenedor, como Row o Column. Para obtener más información, consulta Conceptos básicos del diseño de Compose.

Cómo agregar varios estilos en un párrafo

Para agregar varios estilos en un párrafo, puedes usar ParagraphStyle en un AnnotatedString, que se puede anotar con estilos de anotaciones arbitrarias. Una vez que una parte del texto se marca con un ParagraphStyle, esa parte queda separada del resto como si tuviera feeds de líneas al principio y al final.

Para obtener más información sobre cómo agregar varios estilos en un texto, consulta Agrega varios estilos en el texto.

AnnotatedString tiene un compilador de tipo seguro para facilitar la creación: buildAnnotatedString. En el siguiente fragmento, se usa buildAnnotatedString para configurar ParagraphStyle:

@Composable
fun ParagraphStyle() {
    Text(
        buildAnnotatedString {
            withStyle(style = ParagraphStyle(lineHeight = 30.sp)) {
                withStyle(style = SpanStyle(color = Color.Blue)) {
                    append("Hello\n")
                }
                withStyle(
                    style = SpanStyle(
                        fontWeight = FontWeight.Bold, color = Color.Red
                    )
                ) {
                    append("World\n")
                }
                append("Compose")
            }
        }
    )
}
TextSnippets.kt

Cómo ajustar la altura y el relleno de las líneas

includeFontPadding es una propiedad heredada que agrega padding adicional en función de las métricas de fuente en la parte superior de la primera línea y en la parte inferior de la última línea de un texto. A partir de la versión 2024.01.01 de la BoM de Compose, includeFontPadding se establece en false de forma predeterminada, lo que alinea el diseño de texto predeterminado con las herramientas de diseño comunes.

La capacidad de configurar lineHeight no es nueva. Está disponible desde Android Q. Puedes configurar lineHeight para Text mediante el parámetro lineHeight, que distribuye la altura de la línea en cada línea de texto. Luego, puedes usar el nuevo LineHeightStyle API para configurar aún más cómo se alinea este texto dentro del espacio y quitar los espacios en blanco.

Es posible que desees ajustar lineHeight mediante la unidad de texto "em" (tamaño de fuente relativo) en lugar de "sp" (píxeles ajustados) para mejorar la precisión. Para obtener más información Para seleccionar una unidad de texto adecuada, consulta TextUnit.

Figura 1: Usa Alignment y Trim para ajustar el texto dentro del lineHeight establecido y, si es necesario, recorta el espacio adicional.

Text(
    text = text,
    style = LocalTextStyle.current.merge(
        TextStyle(
            lineHeight = 2.5.em,
            platformStyle = PlatformTextStyle(
                includeFontPadding = false
            ),
            lineHeightStyle = LineHeightStyle(
                alignment = LineHeightStyle.Alignment.Center,
                trim = LineHeightStyle.Trim.None
            )
        )
    )
)
TextSnippets.kt

Además de ajustar lineHeight, ahora puedes centrar aún más el texto y darle estilo Usa parámetros de configuración con la API experimental de LineHeightStyle: LineHeightStyle.Alignment y LineHeightStyle.Trim (includeFontPadding se debe establecer en false para Cortar para trabajar). Alignment y Trim utilizan el espacio medido entre las líneas de texto para distribuirlo de manera más adecuada en todas las líneas, lo que incluye una sola línea de texto y la línea superior de un bloque de texto.

LineHeightStyle.Alignment define cómo alinear la línea en el espacio que proporciona la altura de la línea. Dentro de cada una, puedes alinear el texto en la parte superior, inferior, central o de forma proporcional. Luego, LineHeightStyle.Trim te permite dejar o quitar el espacio adicional en la parte superior de la primera línea y en la parte inferior de la última línea del texto, que se genera de cualquier ajuste de lineHeight y Alignment. En los siguientes ejemplos, se muestra cómo luce un texto de varias líneas con varios parámetros de configuración de LineHeightStyle.Trim cuando la alineación está centrada (LineHeightStyle.Alignment.Center).

LineHeightStyle.Trim.None	LineHeightStyle.Trim.Both
LineHeightStyle.Trim.FirstLineTop	LineHeightStyle.Trim.LastLineBottom

Advertencia: Estos ajustes con la API de LineHeightStyle (Trim) solo puede funcionar cuando los usas junto con la configuración includeFontPadding = false.

Consulta la entrada de blog Fixing Font Padding in Compose Text para obtener más información sobre el contexto de este cambio, el funcionamiento de includeFontPadding en el sistema View y los cambios que realizamos en Compose y las nuevas APIs de LineHeightStyle.

Inserta saltos de línea

La API de LineBreak define los criterios según los que se divide el texto varias líneas. Puedes especificar el tipo de salto de línea que deseas en la Bloque TextStyle del elemento Text componible. Los tipos de corte de línea preestablecidos incluyen los siguientes:

• Simple: salto de línea rápido y básico. Se recomienda para los campos de entrada de texto.
• Heading: Salto de línea con reglas de corte más flexibles. Se recomienda para texto corto, como títulos.
• Paragraph: Salto de línea más lento y de mejor calidad para una mejor legibilidad. Se recomienda para cantidades de texto más grandes, como párrafos.

En el siguiente fragmento, se usan Simple y Paragraph para especificar el comportamiento de los saltos de línea en un bloque largo de texto:

TextSample(
    samples = mapOf(
        "Simple" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Simple
                )
            )
        },
        "Paragraph" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph
                )
            )
        }
    )
)
TextSnippets.kt

Figura 1: Un bloque de texto con una estrategia de saltos de línea simple (arriba) en comparación con un bloque de texto con saltos de línea optimizados para el párrafo (abajo).

En el resultado anterior, observa que el comportamiento de los saltos de línea de Paragraph produce un resultado más equilibrado visualmente que el de Simple.

Cómo personalizar los saltos de línea

También puedes crear tu propia configuración de LineBreak con Strategy. parámetro. Strategy puede ser cualquiera de los siguientes:

• Balanced: Intenta equilibrar la longitud de las líneas del texto y también se aplica. la separación silábica automática si está habilitada. Se recomienda para pantallas pequeñas, como relojes, para maximizar la cantidad de texto que se muestra.
• HighQuality: Optimiza un párrafo para brindar texto más legible, lo que incluye: la separación silábica si está habilitada. (Debería ser la opción predeterminada para todo lo que Balanced o Simple).
• Simple: Estrategia básica y rápida. Si se habilita esta opción, la separación silábica se realiza solo para palabras que no caben en toda una línea por sí mismas. Útil para editar texto para evitar cambiar de posición mientras escribes.

Nota: También puedes personalizar el comportamiento de cambio de línea con el elemento Strictness. y WordBreak. Estos parámetros están diseñados para idiomas CJK. Es posible que no veas el efecto deseado si las usas en idiomas que no son CJK. Para Para obtener más información, consulta Consideraciones de CJK.

En el siguiente fragmento, se muestra la diferencia entre un párrafo con la configuración predeterminada y un párrafo optimizado para pantallas pequeñas con el salto de línea Balanced estrategia:

TextSample(
    samples = mapOf(
        "Balanced" to {
            val smallScreenAdaptedParagraph =
                LineBreak.Paragraph.copy(strategy = LineBreak.Strategy.Balanced)
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = smallScreenAdaptedParagraph
                )
            )
        },
        "Default" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(200.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default
            )
        }
    )
)
TextSnippets.kt

Figura 2: Un párrafo con formato de una estrategia de saltos de línea Balanced (arriba) en comparación con un párrafo con formato sin una estrategia de saltos de línea.

Consideraciones del CJK

También puedes personalizar LineBreak con Strictness y APIs de WordBreak, que se diseñaron específicamente para lenguajes CJK. Es posible que no siempre veas los efectos de estas APIs en idiomas que no sean CJK. En general, las reglas de saltos de línea se definen según la configuración regional.

Strictness describe la rigurosidad de la interrupción de línea de la siguiente manera: propiedades:

Nota: El valor predeterminado recomendado para Strictness varía según la configuración regional.

• Default: Son las reglas de incumplimiento predeterminadas de la configuración regional. Puede corresponder a Normal o Strict.
• Loose: Son las reglas menos restrictivas. Adecuada para líneas cortas.
• Normal: Son las reglas más comunes para el salto de línea.
• Strict: Son las reglas más estrictas para el salto de línea.

WordBreak define cómo se deben insertar los saltos de línea en las palabras con el siguientes propiedades:

• Default: Son las reglas de saltos predeterminadas para la configuración regional.
• Phrase: El salto de línea se basa en frases.

El siguiente fragmento usa una rigurosidad Strict y una rotura de palabras en Phrase configuración de un texto en japonés:

Nota: Para probar el siguiente fragmento, elige la configuración regional japonesa en tu dispositivo. (Configuración > Sistema > Idiomas y entradas > Idiomas > japonés).

val customTitleLineBreak = LineBreak(
    strategy = LineBreak.Strategy.HighQuality,
    strictness = LineBreak.Strictness.Strict,
    wordBreak = LineBreak.WordBreak.Phrase
)
Text(
    text = "あなたに寄り添う最先端のテクノロジー。",
    modifier = Modifier.width(250.dp),
    fontSize = 14.sp,
    style = TextStyle.Default.copy(
        lineBreak = customTitleLineBreak
    )
)
TextSnippets.kt

Figura 3: Texto formateado con los parámetros de configuración Strictness y WordBreak (arriba) en comparación con el texto con formato solo LineBreak.Heading (parte inferior).

Guionar texto dividido en líneas

La API de Hyphens te permite agregar compatibilidad con la separación silábica a tu app. La hifenación se refiere a la inserción de signos de puntuación en forma de guion para indicar que un palabra se divide en líneas de texto. Cuando está habilitada, se agrega la separación silábica entre las sílabas de una palabra en los puntos apropiados de separación silábica.

De forma predeterminada, la separación silábica no está habilitada. Para habilitar la división en sílabas, agrega Hyphens.Auto como parámetro en un bloque TextStyle:

TextSample(
    samples = mapOf(
        "Hyphens - None" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.None
                )
            )
        },
        "Hyphens - Auto" to {
            Text(
                text = SAMPLE_LONG_TEXT,
                modifier = Modifier
                    .width(130.dp)
                    .border(BorderStroke(1.dp, Color.Gray)),
                fontSize = 14.sp,
                style = TextStyle.Default.copy(
                    lineBreak = LineBreak.Paragraph,
                    hyphens = Hyphens.Auto
                )
            )
        }
    )
)
TextSnippets.kt

Figura 4: Un párrafo sin la división en sílabas habilitada (arriba) en comparación con un párrafo con la división en sílabas habilitada (abajo).

Cuando está habilitada, la división en sílabas solo se produce en las siguientes condiciones:

• Una palabra no cabe en una línea. Si usas una estrategia de salto de línea de Simple, la separación silábica de una palabra solo ocurre si una línea es más corta que el único una palabra.
• La configuración regional adecuada se establece en tu dispositivo, ya que la división en sílabas adecuada se determina con los diccionarios presentes en el sistema.