De derecha a izquierda y dirección del diseño
Admite idiomas RTL y diseños reflejados.
De derecha a izquierda y dirección del diseño es una lección gratuita de Swift Academy en CoddyKit. Esta es la lección 4 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Swift Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Swift Academy incluye 4 lecciones en total.
Idiomas que se leen de derecha a izquierda
El árabe, el hebreo, el persa y el urdu se escriben de derecha a izquierda (RTL). Para estos usuarios, toda la interfaz debería reflejarse: los botones de volver de la navegación deben apuntar a la derecha, las listas deben alinearse con el borde derecho y el progreso debe avanzar de derecha a izquierda. La compatibilidad con RTL es una parte esencial de la internacionalización.
// RTL locales include: ar, he, fa, ur
// The whole UI mirrors, not just the text.Leading y trailing, no izquierda y derecha
La regla de oro es diseñar con leading y trailing en lugar de izquierda y derecha. Leading es el lado donde comienza la lectura (izquierda en inglés y derecha en árabe). Al utilizar leading/trailing, el sistema refleja automáticamente el diseño en RTL.
// SwiftUI uses leading/trailing automatically:
// HStack { Image(...); Text("Title") }
// .padding(.leading, 16) // flips in RTL
let edge = "leading mirrors automatically"
_ = edgeLeer layoutDirection
SwiftUI expone la dirección actual mediante el valor de entorno layoutDirection, que puede ser .leftToRight o .rightToLeft. Léallo cuando necesite una lógica que dependa de la dirección, como elegir un recurso de chevrón.
// In a SwiftUI View:
// @Environment(\.layoutDirection) var direction
// let chevron = direction == .rightToLeft
// ? "chevron.left" : "chevron.right"
let ltr = "leftToRight"
let rtl = "rightToLeft"
print(ltr, rtl)Reflejar SF Symbols e imágenes
Muchos SF Symbols se reflejan automáticamente. En el caso de imágenes personalizadas direccionales, indique que deben invertirse con la dirección del diseño para que una flecha que apunta hacia delante siga apuntando hacia delante en RTL. El modificador flipsForRightToLeftLayoutDirection controla este comportamiento.
// SwiftUI:
// Image("forwardArrow")
// .flipsForRightToLeftLayoutDirection(true)
let shouldFlip = true
_ = shouldFlipForzar una dirección
En ocasiones, una subvista debe conservar una dirección fija, por ejemplo, un número de teléfono o un fragmento de código de izquierda a derecha dentro de un diseño RTL. Anúlela únicamente para ese subárbol mediante el modificador environment(\.layoutDirection, _).
// Keep a code block LTR even in an RTL app:
// CodeView(snippet)
// .environment(\.layoutDirection, .leftToRight)
let forced = "leftToRight subtree"
_ = forcedAlineación del texto y multilineTextAlignment
Utilice .leading y .trailing también para la alineación del texto. Un párrafo alineado con .leading se ajusta automáticamente al borde derecho en árabe. Evite .left/.right, ya que nunca se reflejan.
// Text(longBody)
// .multilineTextAlignment(.leading) // flips in RTL
let alignment = "leading flips, left does not"
_ = alignmentTexto bidireccional
Los párrafos RTL suelen incluir fragmentos LTR (URL, números y nombres de marcas en inglés). El algoritmo bidireccional de Unicode gestiona el orden, pero puede envolver los fragmentos ambiguos con caracteres de aislamiento direccional para evitar alteraciones visuales.
import Foundation
// First-strong isolate keeps an embedded run intact
let isolated = "\u{2068}example.com\u{2069}"
print(isolated.count > 0)Contenido semántico para vistas que no deben reflejarse
Algunos controles —como los botones de reproducción multimedia y las líneas de tiempo— NO deben reflejarse porque su significado es físico, no depende de la lectura. El semanticContentAttribute de UIKit (.playback, .spatial, .forceLeftToRight) indica al sistema cuándo debe conservar una dirección fija.
// UIKit example:
// playbackBar.semanticContentAttribute = .playback
// mapOverlay.semanticContentAttribute = .spatial
let keepFixed = "playback / spatial do not mirror"
_ = keepFixedProbar RTL sin traducir
No necesita una traducción al árabe para probar el reflejo. Ejecute la app con el Right-to-Left Pseudolanguage en la configuración del idioma de la app del esquema. La interfaz se refleja usando las cadenas existentes, de modo que puede detectar al instante los errores causados por .left/.right escritos directamente.
// Edit Scheme > Run > Options >
// App Language: Right-to-Left Pseudolanguage
let test = "mirror without real translations"
_ = testErrores comunes de RTL
Preste atención a lo siguiente:
- Alineación o espaciado escritos directamente con
.left/.right. - Vistas posicionadas manualmente mediante desplazamientos x fijos.
- Imágenes personalizadas direccionales que no se invierten.
- Chevrones de volver o controles deslizantes que apuntan en la dirección incorrecta.
- Cadenas bidireccionales concatenadas que se muestran desordenadas.
// Replace fixed offsets with leading/trailing layout
// so AutoLayout / SwiftUI can mirror them.
let rule = "prefer leading/trailing everywhere"
_ = ruleUna fila preparada para RTL
Una fila bien construida utiliza leading/trailing en todo momento, permite que los símbolos se inviertan y fuerza la dirección únicamente cuando lo exige la semántica. Una vista así no necesita ningún cambio para verse correctamente tanto en inglés como en árabe.
// HStack {
// Image(systemName: "star")
// Text("Favorite")
// Spacer()
// Image(systemName: "chevron.forward") // mirrors
// }
// .padding(.horizontal, 16)
let ready = "row mirrors automatically"
_ = readyComprobación rápida
Recuerde el principio fundamental de un diseño compatible con RTL.
Resumen
Aprendió a admitir idiomas de derecha a izquierda:
- Diseñe con leading/trailing, nunca con izquierda/derecha.
- Lea el entorno
layoutDirectionpara la lógica que dependa de la dirección. - Invierta las imágenes direccionales; anule la dirección para subárboles fijos, como código o números de teléfono.
- Utilice
semanticContentAttributepara los controles de reproducción o espaciales que no deben reflejarse. - Pruebe con el pseudolenguaje RTL antes de publicar.
Aprende Swift con un tutor de IA — gratis
Escribe y ejecuta código real en tu navegador, obtén ayuda instantánea de un tutor de IA disponible 24/7 y continúa donde lo dejaste en la web o en la aplicación.
- Cursos
- 122
- Lecciones
- 409
Preguntas frecuentes
¿La lección «De derecha a izquierda y dirección del diseño» es gratis?
Sí — el texto completo de «De derecha a izquierda y dirección del diseño» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Swift Academy, actualiza a CoddyKit PRO. El curso de Swift Academy incluye 4 lecciones en total.
¿Qué aprenderé en «De derecha a izquierda y dirección del diseño»?
Admite idiomas RTL y diseños reflejados. Practicas Swift Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Swift Academy?
No se requiere experiencia previa. Swift Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 4 de 4.
¿Cuánto tiempo toma la lección «De derecha a izquierda y dirección del diseño»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Swift Academy?
Sí. Cada lección de Swift Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Catálogos de cadenas y cadenas localizadas
- Pluralización y Stringsdict
- Formato según la configuración regional
- De derecha a izquierda y dirección del diseño