Modos de Escritura y Alineación en CSS: Flexbox y CSS Grid

Clase 10 de 28 • Curso Profesional de CSS Grid Layout

Resumen

Explorando los modos de escritura y ejes de alineamiento resulta esencial para cualquier profesional o entusiasta del diseño web y el desarrollo front-end. Entender la base de Flexbox y CSS Grid, así como las propiedades de posición como top, right, bottom y left, crea un sólido fundamento para gestionar elementos en cualquier tipo de sistema de escritura. Sabías que, además del sistema de escritura latino, existen otros que alteran de manera significativa la forma en que construimos y visualizamos las páginas web. Todo esto nos conduce a comprender la importancia del GradingMode y cómo este impacta en el flujo del documento y el posicionamiento de los elementos, tanto en bloque como en línea.

¿Qué es el GradingMode y cómo influye en los diferentes sistemas de escritura?

El GradingMode es una propiedad en CSS que indica la dirección del flujo del texto y la orientación del contenido dentro de un elemento, lo que tiene un impacto directo en cómo construimos layouts con Flexbox y CSS Grid. Los diferentes valores que puede tomar esta propiedad son:

horizontal-tb: De arriba hacia abajo, con un flujo horizontal (izquierda a derecha)
vertical-rl: De arriba hacia abajo, con un flujo vertical (derecha a izquierda)
vertical-lr: De arriba hacia abajo, con un flujo vertical (izquierda a derecha)
sideways-rl: Flujo horizontal con el texto girado perpendicularmente
sideways-lr: Similar al valor anterior, pero en la dirección opuesta.

Estos valores nos permiten adaptar nuestros diseños para soportar diferentes modos de escritura a nivel mundial.

¿Cómo se relacionan los conceptos de bloque y en línea con los modos de escritura?

Estos dos conceptos son fundamentales para entender cómo se posicionan los elementos en la página:

Elementos en bloque: Asumen la totalidad del ancho disponible y se apilan verticalmente.
Elementos en línea: Se alinean uno tras otro de manera horizontal, como las palabras en una oración.

Entender estos conceptos es clave para saber cómo se comportarán los elementos en distintos modos de escritura.

¿Qué cambios observamos al combinar Flexbox y CSS Grid con diferentes modos de escritura?

Al aplicar Flexbox o CSS Grid, notarás cómo se modifican las orientaciones y alineaciones de los elementos según el modo de escritura establecido:

En Flexbox, propiedades como justify-content o align-items pueden verse afectadas visualmente cuando cambiamos de un modo de escritura a otro.
En CSS Grid, las filas y columnas pueden rotar o invertir su dirección, dependiendo del modo de escritura.

¿Cuál es la importancia de la propiedad Direction?

La propiedad direction especifica la dirección del texto y se puede configurar como ltr (left to right) o rtl (right to left). Esta propiedad es crucial cuando se trabaja con idiomas que se leen de derecha a izquierda, como el árabe o el hebreo.

Reto práctico sobre modos de escritura y ejes de alineamiento

Te invito a utilizar el repositorio proporcionado para jugar con las propiedades direction y writing-mode. Observa cómo cambian la apariencia del texto y la caja de comentarios. Además, explora la funcionalidad del overflow hidden y cómo esta propiedad puede ser útil en el diseño web.

Profundizando en las propiedades lógicas

Próximamente exploraremos las propiedades lógicas que proporcionan un nivel adicional de control y abstracción en el diseño, permitiendo una mayor flexibilidad en la adaptación de layouts para diferentes modos de escritura y direcciones de texto.

Este fascinante mundo de los modos y ejes de escritura es un claro ejemplo de cómo la web se ha ido adaptando a las diversas formas de comunicación escrita alrededor del globo. Te animo a seguir explorando y aprendiendo sobre estas técnicas avanzadas para mejorar tu habilidad en el diseño y desarrollo de interfaces multiculturales y accesibles. ¡Sigue adelante con tu aprendizaje!

Carlos Eduardo Gomez García

teacher•

Curioso, no conocía lo de los modos de escritura 🤔, si hubiese tenido que hacer un efecto similar, lo más probable es que hubiese hecho alguna cosa rara con Flexblox y rotates jaja . Por cierto, la propiedad overflow: hidden; sirve para ocultar cualqueir elemento hijo que se salga del elemento padre (siempre y cuando el elemento padre tenga dicha propiedad). Por ejemplo, si tu elemento padre tiene una altura de 500px, pero dentro tienes un texto que rebasa esos 500px, con un overflow: hidden; en el padre puedes hacer que se oculte todo lo que se salga 😄. . Sin overflow: hidden:

. Con overflow: hidden:

. También es muy útil para usarla como máscaras de recorte 👀.

Andrés Roldán Wilches

student•

Mascaras de recorte?, disculpa eso que es?

Team Platzi UNHEVAL

student•

tmb está la propiedad de overflow: hidden. Esto te permite hacer lo mismo q hidden solo que te agrega un scrollbar si deseas visualizar el texto de abajo.

Israel Vasquez

student•

Un cuadro resumen de como se vería cada propiedad writing mode aplicada.

Adolfo Hristo David Roque Gámez

student•

Eso lo sacaste de mozilla mdn

Paolo Joaquin Pinto Perez

student•

Gracias por el aporte

Liza Fernanda Castrillón Díaz

student•

La propiedad writing-mode define si los renglones de texto se disponen horizontal o verticalmente y la dirección en que avanzan los bloques.

horizontal-tb El contenido fluye horizontalmente de izquierda a derecha y verticalmente de arriba hacia abajo. El próximo renglón horizontal se posiciona debajo del renglón anterior.

vertical-rl El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de derecha a izquierda. El próximo renglón vertical se posiciona a la izquierda del renglón anterior.

vertical-lr El contenido fluye verticalmente de arriba hacia abajo y horizontalmente de izquierda a derecha. El próximo renglón vertical se posiciona a la derecha del renglón anterior.

sideways-rl El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la derecha.

sideways-lr El contenido fluye verticalmente de arriba hacia abajo y todos los glifos, incluidos aquellos de los sistemas de escritura verticales, se colocan de lado hacia la izquierda.

Cosas a tener en cuenta a la hora de usar writing mode:

El modo de escritura. -La dirección. -La orientación del texto.

Para esto hay que ver los elementos bloque y elementos en linea.

display-block: (horizontal)

Ocupan todo el espacio de su elemento padre (contenedor). -Fuerzan un salto de línea (ocupan todo el ancho disponible). -Respetan el width, el height, el margin-top y el margin-bottom indicados por el usuario. -Algunos son: div, p, h1, h2, h3, h4, h5, h6, hr, ol, ul, table, li.

display-inline: (vertical) -Son apilables. -No tienen ni margin-top ni margin-bottom (por mucho que se lo indiques en el CSS). -Si tienen margin-left y margin-right. No respetan ni width ni height. -Estas medidas dependerán del tamaño en píxels de su contenido. -Algunos son: a, span, label, strong, br, input, textarea, abbr,

Valentín Eduardo González Morales

student•

Excelente aporte, muchas gracias! :)

Rubén Cuello

student•

Más claro imposible ;)

Eduardo Rafael Romero Bernal

student•

¿Entonces el vertical-RL y el sideways-RL son iguales? Que curioso..

Brandon James Huamán Mallcco

student•

Eduardo me parece que sin son iguales :v. Alguien conoce alguna diferencia?

Jonathan Edwin Gutiérrez Olvera

student•

Aquí hay un ejemplo con Amazon Arabia para que puedan checar como cambia la pagina dependiendo el país o el idioma. 😁

Asbel Jose Herrera Morales

student•

interesante!! buen aporte

Nicolás Cualangelo

student•

Me dio curiosidad que la escritura árabe se lee de derecha a izquierda, pero los número de izquierda a derecha.

Reynaldo Fuentes Garcia

student•

https://developer.mozilla.org/es/docs/Web/CSS/overflow visible Valor por defecto. El contenido no es recortado, podría ser dibujado fuera de la caja contenedora. hidden El contenido es recortado y no se muestran barras de posición. scroll El contenido es recortado y el navegador web usa las barras de desplazamiento, se haya recortado contenido o no. Esto previene cualquier problema con las barras de desplazamiento apareciendo o desapareciendo en un entorno dinámico. Puede que las impresoras impriman contenido excedente. auto Depende del agente de usuario. Navegadores de escritorio como Firefox proveen barras de desplazamiento si hay contenido excedente.

Joel Eduardo Sánchez Herrera

student•

Nosotros por nuestro modo de escritura que es el sistema latin, que es de izquierda a derecha, el origen de nuestro navegador es el Top Left. Pero existen otros sistemas de escritura que pueden ser totalmente diferente. Por este tipo de cosas, surge una nueva propiedad llamada: "Writing Mode". Donde tenemos diferentes valores como:

Horizontal TB
Vertical LR
Vertical RL
Sideways LR
Sideways RL

LAS ULTIMAS DOS LETRAS, DEFINEN DE QUE DIRECCION A QUE DIRECCION VA ESCRITO.

ESTA PROPIEDAD NO ES APTA PARA TABLAS, NI ROW, NI COLUMN

Las cosas que tenemos que tener en cuenta son:

Modo De Escritura
La Direccion
La orientación del texto.

Sabemos que en el display cuando es en Block es ⬇️ y cuando es Inline es ➡️.

Este tipo de valores afectan a nuestros modelos en Flexbox y Grid.

David Antonio Garcia Saaib

student•

Podemos olvidarnos de todo y hacer todo Horizontal TB?

Sergio Brandon De Lucio Chavero

student•

nope

Irving Juárez

student•

Podríamos, pero mi religión no me lo permite.

Samuel Ulises Pérez Peña

student•

Aquí les dejo una documentación de writing-mode y direction respectivamente.

https://developer.mozilla.org/es/docs/Web/CSS/writing-mode

https://developer.mozilla.org/es/docs/Web/CSS/direction

Camilo Leon Camacho

student•

Queria hacer la tarjeta (adjunto imagen) asi, pero no me funcionó con sideways-lr, asi que encontré esta manera de hacerlo, 🤔🤔

Gilmar Andrei Forero Verano

student•

Hola, ya si es que con chrome no es compatible, se ven los cambios con otros navegadores.

Orlando Manuel Mendoza Vargas

student•

TIP: Uno de los usos que se le puede encontrar a overflow: hidden; es cuando vamos a hacer una ventana modal, si el contenido de esta modal es muy grande y necesitamos hacerle scroll a ese modal podemos utilizar el overflow: hidden; para añadirselo al body cuando el modal aparezca, este se puede hacer dinamicamente con Javascript.

Pronto haré un un tutorial dentro de este curso para crear modales utilizando CSS grid, positions y overflows 😉😉💚

Paolo Joaquin Pinto Perez

student•

Bueno hasta donde entendí: Overflow: Controla el contenido cuando este es más grande que las dimensiones de su contenedor. La propiedad overflow:hidden: Lo que hace es ocultar el contenido que sobrepasa o rebasa las dimensiones del contendor, como Cortandolo.

Edward Cabrera

student•

Excelente :)

Aldo Juarez Virgen

student•

Checando el reto de la profesora, me topé que sólo funciona (por ahora) el sideways-rl y sideways-lr en Fire Fox, pero no en Edge ni Chrome, digo hablando de los navegadores más usados. :O

ANDRO CARDENAS VARGAS

student•

entonces, el HIDDEN en el overflow = a lo que sobrepase de las demisiones asignada a su contenedor, será ocultado! y así jugué con el reto!👇😁

Lucia Rodriguez

student•

Que desastre como explica esta profesora!

Miguel Angel Lopez Monroy

student•

Aquí esta el reto: ![](

El código HTML:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modos de escritura</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <div class="card writemode1">
            <div class="card__header">Dirección left to right</div>
            <div class="card__main">Horizontal top to bottom</div>
        </div>
        <div class="card writemode2">
            <div class="card__header">Dirección left to right</div>
            <div class="card__main">Vertical left to right</div>
        </div>
        <div class="card writemode3">
            <div class="card__header">Dirección left to right</div>
            <div class="card__main">Vertical right to left</div>
        </div>
        <div class="card writemode4">
            <div class="card__header">Dirección left to right 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas left to right</div>
        </div>
        <div class="card writemode5">
            <div class="card__header">Dirección left to right 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas right to left</div>
        </div>
        <div class="card writemode6">
            <div class="card__header">Dirección right to left</div>
            <div class="card__main">Horizontal top to bottom</div>
        </div>
        <div class="card writemode7">
            <div class="card__header">Dirección right to left</div>
            <div class="card__main">Vertical left to right</div>
        </div>
        <div class="card writemode8">
            <div class="card__header">Dirección right to left</div>
            <div class="card__main">Vertical right to left</div>
        </div>
        <div class="card writemode9">
            <div class="card__header">Dirección right to left 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas left to right</div>
        </div>
        <div class="card writemode10">
            <div class="card__header">Dirección right to left 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas right to left</div>
        </div>
    </div>
    
</body>
</html>

El código CSS:

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5rem;
    font-family: 'Lato', sans-serif;
    width: 55rem;
  }
.card {
    background: #ffdada;
    width: 30rem;
    height: 15rem;
    border-radius: 1rem;
    overflow: hidden;
  }
  
  .writemode1 {
      direction: ltr;
      writing-mode: horizontal-tb;
  }

  .writemode2 {
      direction: ltr;
      writing-mode: vertical-lr;
  }

  .writemode3 {
      direction: ltr;
      writing-mode: vertical-rl;
  }

  .writemode4 {
      direction: ltr;
      writing-mode: sideways-lr;
  }

  .writemode5 {
    direction: ltr;
    writing-mode: sideways-rl;
}

.writemode6 {
    direction: rtl;
    writing-mode: horizontal-tb;
}

.writemode7 {
    direction: rtl;
    writing-mode: vertical-lr;
}

.writemode8 {
    direction: rtl;
    writing-mode: vertical-rl;
}

.writemode9 {
    direction: rtl;
    writing-mode: sideways-lr;
}

.writemode10 {
    direction: rtl;
    writing-mode: sideways-rl;
}

  .card__header {
    background: #dbf6e9;
    padding: 2rem;
  }
  
  .card__main {
    background: #9ddfd3;
    padding: 2rem;
  }

Segundo Juan

student•

omg

Julio Sarango

student•

hoverflow: hidden: En otras palabras permite que el contenido NO se muestre fuera de su caja contenedora. Modos de escritura: Totalmente nuevo para mí, no lo había conocido. Esto se pone interesante.

Gonzalo Ceron Denetro

student•

código

Ignacio Consuegra

student•

El overflow hidden sirve para ucultar las barras de posicion cuando el contenido se recorta.

Mateo Alberto Ossa Barrios

student•

la propiedad "direction" modifica el "inline base direction" y la propiedad "writing-mode" modifica el "block flow direction"? la verdad creo que no se hace suficiente incapie en que propiedad modifica exactamente que, es bastante confuso, no entendí nada.

Ulqernesh Karvenae

student•

En este link dan mas informacion al respecto, espero que te sirva, pd link sacado del comentario de la profe

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modos de escritura</title>
    <link rel="stylesheet" href="./style.css">
</head>
<body>
    <div class="wrapper">
        <div class="card writemode1">
            <div class="card__header">Dirección left to right</div>
            <div class="card__main">Horizontal top to bottom</div>
        </div>
        <div class="card writemode2">
            <div class="card__header">Dirección left to right</div>
            <div class="card__main">Vertical left to right</div>
        </div>
        <div class="card writemode3">
            <div class="card__header">Dirección left to right</div>
            <div class="card__main">Vertical right to left</div>
        </div>
        <div class="card writemode4">
            <div class="card__header">Dirección left to right 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas left to right</div>
        </div>
        <div class="card writemode5">
            <div class="card__header">Dirección left to right 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas right to left</div>
        </div>
        <div class="card writemode6">
            <div class="card__header">Dirección right to left</div>
            <div class="card__main">Horizontal top to bottom</div>
        </div>
        <div class="card writemode7">
            <div class="card__header">Dirección right to left</div>
            <div class="card__main">Vertical left to right</div>
        </div>
        <div class="card writemode8">
            <div class="card__header">Dirección right to left</div>
            <div class="card__main">Vertical right to left</div>
        </div>
        <div class="card writemode9">
            <div class="card__header">Dirección right to left 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas left to right</div>
        </div>
        <div class="card writemode10">
            <div class="card__header">Dirección right to left 右から左への方向CSSコースはとても良いです</div>
            <div class="card__main">Ambas right to left</div>
        </div>
    </div>
    
</body>
</html>

* {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}
html {
    font-size: 62.5%;
}
body {
    font-size: 1.6rem;
}
.wrapper {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    grid-gap: 0.5rem;
    font-family: 'Lato', sans-serif;
    width: 55rem;
  }
.card {
    background: #ffdada;
    width: 30rem;
    height: 15rem;
    border-radius: 1rem;
    overflow: hidden;
  }
  
  .writemode1 {
      direction: ltr;
      writing-mode: horizontal-tb;
  }

  .writemode2 {
      direction: ltr;
      writing-mode: vertical-lr;
  }

  .writemode3 {
      direction: ltr;
      writing-mode: vertical-rl;
  }

  .writemode4 {
      direction: ltr;
      writing-mode: sideways-lr;
  }

  .writemode5 {
    direction: ltr;
    writing-mode: sideways-rl;
}

.writemode6 {
    direction: rtl;
    writing-mode: horizontal-tb;
}

.writemode7 {
    direction: rtl;
    writing-mode: vertical-lr;
}

.writemode8 {
    direction: rtl;
    writing-mode: vertical-rl;
}

.writemode9 {
    direction: rtl;
    writing-mode: sideways-lr;
}

.writemode10 {
    direction: rtl;
    writing-mode: sideways-rl;
}

  .card__header {
    background: #dbf6e9;
    padding: 2rem;
  }
  
  .card__main {
    background: #9ddfd3;
    padding: 2rem;
  } 

Modos de Escritura y Alineación en CSS: Flexbox y CSS Grid

Lleva tus conocimientos de CSS a otro nivel

CSS Grid: Fundamentos y Prácticas Esenciales

¿De dónde venimos y en dónde estamos?

Historia y evolución del CSS: De CHSS a la primera versión estándar

Limitaciones y Evolución de CSS en el Diseño Web

Herramientas Esenciales para el Desarrollo Web Eficiente

¿Cómo se llegó al concepto de CSS Grid?

Historia y evolución de CSS Grid: del concepto a la realidad

CSS Grid: Revolución del Diseño Web

Control de alineamiento

Alineación de Elementos con Margin y Line Height en CSS

Técnicas de Alineamiento CSS: Table Cell y Positions

Alineación de Elementos con CSS y Modos de Escritura

Modos de Escritura y Alineación en CSS: Flexbox y CSS Grid

Propiedades lógicas en CSS: uso y aplicación práctica

Técnicas de Alineamiento con Flexbox en CSS

Dibujos Creativos con CSS: Técnicas y Desafíos

Conceptos generales para comenzar a trabajar con CSS Grid

Conceptos Fundamentales de CSS Grid: Relaciones Padre-Hijo

Fundamentos de CSS Grid: Líneas, Tracks, Celdas y Áreas

Inspiración y Diseño Creativo con CSS Grid

Propiedades y valores para el elemento padre

Comprender Display Grid e Inline Grid en CSS

Creación y Optimización de Grids en CSS

Alineación de Elementos con CSS Grid

Generación Automática de Tracks en CSS Grid

Uso avanzado de CSS Grid para diseño responsivo

Propiedades y valores para los elementos hijos

Creación de Grids en CSS para Diseños Creativos

Alineación de Elementos Hijos en CSS Grid

Alineación de elementos en CSS Grid: Justify, Align y Place Self

Ubicación y Alineación de Elementos con CSS Grid

Alineación de Elementos con CSS Grid y Flexbox

Lo que podemos lograr adicionalmente con CSS Grid

Diseño Responsive: Breakpoints y Media Queries en CSS

Examen de Certificación en CSS Grid Layout