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

Clase 10 de 28 • Curso Profesional de CSS Grid Layout

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

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

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

Diego Andres Jimenez Quintero

student•

No entendi bien el reto alguien puede explicarme por favor ?