ParagraphStyle — Conceptos clave, propiedades y uso

¿Qué es ParagraphStyle en tipografía?

ParagraphStyle (estilo de párrafo) es un conjunto de reglas de formato aplicables a uno o varios párrafos de texto. A diferencia de los estilos de carácter (bold, italic, font-size) que actúan a nivel de caracteres individuales, ParagraphStyle gestiona macropropiedades: la ubicación del texto en el contenedor, los espacios entre líneas y párrafos, la dirección de escritura y las reglas de separación silábica.

Históricamente, el concepto de ParagraphStyle proviene de los sistemas de autoedición (QuarkXPress, PageMaker, InDesign), donde cada párrafo tenía su propio conjunto de parámetros. En el desarrollo móvil, este enfoque se ha transformado en APIs de software: NSMutableParagraphStyle en iOS, las clases ParagraphStyle y LineBreakStyle en Android, y parámetros como textAlign y textHeightBehavior en Flutter. Todos ellos cumplen un mismo propósito: gestionar el formato de párrafo mediante código, sin estar vinculados a un motor de texto específico.

Según Bringhurst — The Elements of Typographic Style (2024), una configuración adecuada de ParagraphStyle es la base de la cultura tipográfica de una interfaz. Si la tipografía y el tamaño de fuente definen la "voz" del texto, el estilo de párrafo define su "respiración": ritmo, pausas y acentos. En interfaces móviles donde el espacio es limitado, un ParagraphStyle correcto permite incluir más información sin perder legibilidad.

Propiedades principales de ParagraphStyle

ParagraphStyle incluye varios grupos de propiedades, cada uno responsable de un aspecto específico del formato. Veamos los parámetros clave disponibles en las APIs móviles. La alineación es el parámetro principal que determina la posición horizontal del texto. En iOS está disponible NSTextAlignment, en Android — Layout.Alignment, en Flutter — TextAlign.

Es importante entender que no todas las propiedades están disponibles en todas las plataformas en la misma medida. Por ejemplo, la sangría de primera línea (firstLineHeadIndent) solo es compatible completamente en iOS a través de NSMutableParagraphStyle. En Android se utiliza SpannableString con LeadingMarginSpan, y en Flutter — RichText con TextSpan personalizado y padding. En el desarrollo multiplataforma (Flutter, React Native), algunas propiedades de ParagraphStyle deben emularse mediante contenedores o Spacer.

ParagraphStyle en iOS: NSMutableParagraphStyle

En iOS, la herramienta principal para trabajar con el estilo de párrafo es la clase NSMutableParagraphStyle — subclase de NSParagraphStyle. Proporciona un conjunto completo de propiedades para gestionar el formato de párrafo y se aplica mediante NSAttributedString. NSMutableParagraphStyle se usa no solo en UILabel y UITextView, sino también en Core Text a través de CTParagraphStyle.

// iOS: configuración completa de ParagraphStyle
let paragraphStyle = NSMutableParagraphStyle()

// Alineación
paragraphStyle.alignment = .justified     // justificado

// Sangría
paragraphStyle.headIndent = 16          // sangría izquierda
paragraphStyle.tailIndent = -16         // sangría derecha (negativa)
paragraphStyle.firstLineHeadIndent = 32 // sangría de primera línea

// Espacio entre párrafos
paragraphStyle.paragraphSpacing = 12    // después del párrafo
paragraphStyle.paragraphSpacingBefore = 8 // antes del párrafo

// Altura de línea
paragraphStyle.minimumLineHeight = 24
paragraphStyle.maximumLineHeight = 24

let attributes: [NSAttributedString.Key: Any] = [
    .font: UIFont.systemFont(ofSize: 16),
    .paragraphStyle: paragraphStyle
]

let label = UILabel()
label.attributedText = NSAttributedString(
    string: "This paragraph has a custom ParagraphStyle.\n\nSecond paragraph with 12 pt spacing.",
    attributes: attributes
)

En SwiftUI no existe un equivalente directo de NSMutableParagraphStyle — en su lugar se usa una combinación de modificadores: .multilineTextAlignment() para alineación, .lineSpacing() para interlineado. Para la sangría de primera línea y el espacio entre párrafos en SwiftUI, hay que usar Text + padding o AttributedString (disponible desde iOS 15+), que admite NSParagraphStyle mediante atributos.

// SwiftUI: AttributedString con ParagraphStyle (iOS 15+)
var attributed: AttributedString = """
This is the first paragraph with indent.

This is the second paragraph with 12 pt spacing.
"""

let ps = NSMutableParagraphStyle()
ps.paragraphSpacing = 12
ps.firstLineHeadIndent = 20

let container = AttributeContainer()
    .paragraphStyle(ps)

attributed.mergeAttributes(container)

Text(attributed)
    .font(.body)

Según Apple — Text Programming Guide (2025), NSMutableParagraphStyle admite hasta 14 parámetros de formato diferentes. Es importante recordar que tailIndent se establece como un valor negativo respecto al ancho del contenedor, mientras que headIndent es positivo. Este comportamiento no evidente suele causar errores entre los desarrolladores iOS principiantes.

ParagraphStyle en Android: sistema View y Compose

En Android, el enfoque de ParagraphStyle difiere entre el sistema View y Jetpack Compose. En el sistema View clásico, los parámetros de párrafo se establecen mediante atributos XML de TextView (android:textAlignment, android:lineSpacingExtra) o mediante SpannableString con implementaciones de la interfaz ParagraphStyle del paquete android.text.style.

// Sistema Android View: ParagraphStyle mediante SpannableString
val text = "First paragraph with settings.\n\nSecond paragraph."
val spannable = SpannableString(text)

// Alineación justificada
spannable.setSpan(
    AlignmentSpan.Standard(Layout.Alignment.ALIGN_NORMAL),
    0, text.length,
    Spannable.SPAN_PARAGRAPH
)

// Sangría de primera línea mediante LeadingMarginSpan
spannable.setSpan(
    LeadingMarginSpan.Standard(0, 20),
    0, text.indexOf('\n'),
    Spannable.SPAN_EXCLUSIVE_EXCLUSIVE
)

textView.text = spannable

En Jetpack Compose, ParagraphStyle se gestiona mediante parámetros de TextStyle. Se usa textAlign para alineación, lineHeight (en sp o em) para interlineado, y textIndent para sangría de primera línea. Compose también admite LineBreak para un control detallado de los saltos de línea (Simple, Heading, Paragraph), lo que resulta especialmente útil para texto multilingüe.

// Jetpack Compose: ParagraphStyle mediante TextStyle
Text(
    text = "Primer párrafo con estilo personalizado.

Segundo párrafo con sangría.",
    style = TextStyle(
        textAlign = TextAlign.Justify,
        lineHeight = 24.sp,
        textIndent = TextIndent(firstLine = 16.sp),
        lineBreak = LineBreak.Paragraph
    )
)

Según Android Developers — Compose ParagraphStyle (2025), al usar TextIndent en Compose es importante establecer firstLine en sp (no en dp), ya que la sangría de primera línea debe escalar con el texto. Si se define la sangría en dp, al aumentar el tamaño de la fuente la sangría se volverá visualmente más pequeña, lo que romperá las proporciones tipográficas.

ParagraphStyle en Flutter: TextHeightBehavior y StrutStyle

En Flutter, la paradigma de ParagraphStyle no está separada en una clase dedicada — en su lugar se usa una combinación de parámetros de TextStyle y clases adicionales. La alineación se establece mediante TextAlign, el interlineado mediante height (sin unidad), y TextHeightBehavior controla las sangrías visibles de la primera y última línea.

// Flutter: ParagraphStyle mediante parámetros de Text
Text(
    'Párrafo con estilo en Flutter.

Segundo párrafo con sangrías.',
    style: TextStyle(
        fontSize: 16,
        height: 1.5,
        leadingDistribution: TextLeadingDistribution.proportional,
    ),
    textAlign: TextAlign.justify,
    textHeightBehavior: TextHeightBehavior(
        applyHeightToFirstAscent: true,
        applyHeightToLastDescent: true,
    ),
)

Para escenarios más complejos, Flutter ofrece el uso de RichText con TextSpan y WidgetSpan personalizados. Esto permite combinar texto con widgets en línea (iconos, imágenes) en un mismo párrafo, manteniendo reglas de formato uniformes. Sin embargo, este enfoque requiere control manual de los saltos de línea y no admite la separación silábica automática.

// Flutter: RichText con formato de párrafo personalizado
RichText(
    text: TextSpan(
        style: TextStyle(fontSize: 16, height: 1.5),
        children: [
            TextSpan(text: 'First paragraph with icon '),
            WidgetSpan(
                child: Icon(Icons.star, size: 16),
                alignment: PlaceholderAlignment.middle,
            ),
            TextSpan(text: '\n\nSecond paragraph after spacing.'),
        ],
    ),
)

Según Flutter Documentation — Text Widget (2025), TextHeightBehavior es un parámetro clave para la visualización correcta de ParagraphStyle en Flutter. Si applyHeightToFirstAscent se establece en false, se ignora la sangría superior de la primera línea y el texto se "adhiere" al borde superior del contenedor. Esto es útil para títulos, pero no deseable para el texto principal.

ParagraphStyle y localización: LTR/RTL y particularidades regionales

ParagraphStyle debe tener en cuenta la dirección de escritura para cada configuración regional. En aplicaciones móviles con soporte para árabe, hebreo o urdu (escritura de derecha a izquierda, RTL), la sangría y la alineación deben reflejarse de forma especular. iOS admite el cambio automático mediante baseWritingDirection = .natural, Android mediante TextDirection, Flutter mediante textDirection.

La configuración de alineación para locales RTL requiere especial atención. Si en modo LTR headIndent define la sangría izquierda, en RTL se convierte automáticamente en la derecha. Sin embargo, no todas las implementaciones manejan correctamente esta transición cuando se especifica explícitamente la alineación (NSTextAlignment.left en lugar de NSTextAlignment.natural). Según Google Internationalization Guide (2025), para aplicaciones multilingües usa siempre alineación natural y verifica las sangrías en ambos modos.

// Android: soporte RTL en ParagraphStyle
val textView = TextView(context)

// Habilitar soporte RTL automático
textView.textDirection = View.TEXT_DIRECTION_LOCALE
textView.textAlignment = View.TEXT_ALIGNMENT_TEXT_START

// Spannable con soporte RTL
val spannable = SpannableString(arabicText)
spannable.setSpan(
    AlignmentSpan.Standard(Layout.Alignment.ALIGN_NORMAL),
    0, arabicText.length,
    Spannable.SPAN_PARAGRAPH
)

Las particularidades regionales también incluyen diferentes reglas para la sangría de primera línea. En la tipografía europea, la sangría de primera línea (firstLineHeadIndent) es un estándar para la separación de párrafos. En la tipografía japonesa y china también se usa la sangría de primera línea, pero su tamaño puede diferir (normalmente 1 em frente a 1.5 em en la tradición europea). Para la tipografía árabe, la sangría de primera línea es poco común: los párrafos suelen separarse con espacio vertical.

Errores típicos al trabajar con ParagraphStyle

El error más común es usar ParagraphStyle solo a través de atributos globales del campo de texto sin considerar el formato diferente de párrafos individuales. En un UILabel o TextView con varios párrafos separados por , ParagraphStyle se aplica a todo el texto de manera uniforme a menos que se use texto atribuido con diferentes estilos para cada párrafo.

• Ignorar paragraphSpacingBefore — muchos desarrolladores establecen paragraphSpacing pero olvidan paragraphSpacingBefore. Para el primer párrafo de un bloque, paragraphSpacingBefore permite definir un margen superior sin crear un contenedor adicional. Esto es especialmente útil para listas con títulos.
• Alineación fija (left/right) en lugar de natural — si la aplicación admite locales RTL, usar NSTextAlignment.left o TextAlign.Start en lugar de natural provoca una visualización incorrecta en las locales árabe y hebrea.
• Falta de verificación del modo de salto de línea — en contenedores estrechos (listas, barras laterales), un lineBreakMode incorrecto provoca el truncamiento de palabras. Usa byWordWrapping y verifica las palabras largas en el contexto de la configuración regional específica.
• Mezclar Spannable con diferentes ParagraphStyle — al configurar Spannable con SPAN_PARAGRAPH, es importante calcular correctamente los límites de los párrafos. La falta de coincidencia de las posiciones inicial/final con los límites reales del párrafo provoca que se ignore el estilo.
• Olvidar la alineación de la línea base — al usar ParagraphStyle con un lineHeight fijo (minimumLineHeight), asegúrate de que la alineación del texto con la línea base esté activada. En iOS se usa label.baselineAdjustment = .alignBaselines.

Según UX Collective — Common Typography Bugs in Mobile Apps (2025), los problemas con ParagraphStyle representan el 18% de todos los errores tipográficos en aplicaciones móviles. Los casos más críticos son cuando un paragraphSpacing incorrecto provoca superposición de texto en diferentes líneas o cuando las locales RTL se muestran con sangrías LTR. Se recomienda crear pruebas unitarias para cada parámetro de ParagraphStyle con cadenas de prueba en diferentes idiomas.