Modos de escritura y ejes de alineamiento + Reto

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 👀.

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

1. 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.

1. 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,

Más claro imposible 😉

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

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.

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.

Podemos olvidarnos de todo y hacer todo Horizontal TB?

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

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

Aqui el reto
https://codepen.io/luisfalconmx/pen/PoWqRXy

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 😉😉💚

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.

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. 😮

Que desastre como explica esta profesora!

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;
  } 

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.

código

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

Hola a todos, encontré documentación acerca de la propiedad direction. Según la documentación oficial no se recomienda usar direction como modificador de un elemento, se recomienda usar en la etiqueta html el atributo dir para cambiar el texto.

Nosotros como hispanohablantes y que usamos el alfabeto latino, solamente creo que algunos países asiáticos usan otros alfabetos, usualmente escribimos de izquierda a derecha, solamente al alfabeto árabe escribe de derecha a izquierda (pueden corregirme si existe algún otro que escriba de derecha a izquierda)

En fin, por defecto, el atributo dir trae por defecto el valor ltr. Si revisan la página de Wikipedia en árabe, podran inspeccionar que en la etiqueta html viene la propiedad con el atributo dir: rtl.

Gracias a clases como estas es que uno dice que vale la pena invertir en Platzi 💚 Ya he visto algunas cosas en internet sobre CSS, pero en ningún lado explican esto y así es como debería ser, saber bien lo que se hace para que después aplicarlo sea más fácil y a uno se le ocurran distintas maneras de dar solución a algo. ¡Genial!

Me quedaron claros los conceptos, pero he de pasar una tarde jugando con ellos.

Esta clase es importante para saber de donde vienen todas las propiedades de flex box y CSS grid. Nosotros en el sistema latin escribimos de izquierda a derecha, haciendo que el origen de nuestro navegador sea TOP-LEFT. Sin embargo hay otros sistemas de escritura

1. left to right (latin)
2. right to left(arabic)
3. bi-directional (latin-arabic)
4. vertical(asian charac.)

gracias a esto existe una propiedad llamada WRITING MODE. El cual tiene diferentes valores

• Horizontal TB Nos indica que va del top al bottom, flujo horizontal. De izquierda a derecha pero nuestro flujo normal es de arriba para abajo Top to Bottom. no es apta para tables (row y column) | BFD (block flow direction) vertical
• Vertical LR → BFD (block flow direction) vertical
• vertical AL ← BFD (block flow direction) vertical
• sideways LR →BFD (block flow direction) vertical
• sideways RL← BFD (block flow direction) vertical

Hay que tener en cuenta el modo de escritura, la dirección y la orientación del texto.

Para eso existen dos conceptos llamados

• Block flow direction | vertical
• inline base direction → horizontal
  
  

Es importante revisar el tema de CAN I USE para ver si es compatible con los diferentes navegadores.

Direction.

Left to Right y Right to Left son algunas de las propiedades de writting mode y se ve muy aplicado en flexbox y CSS grid.

Para flexbox está:

display:flex
flex-direction: 
row /*fila */ column /*columna */
justify-content: flex-start /*izquierda a derecha */| 
flex-end /*derecha a izquierda*/

para CSS grid sería

/*columnas*/
display:grid;
grid-column-start:1;
grid-column-end:2;
/*shorthand*/
grid-column:1/2;
/*row*/
grid-row-start:1;
grid-row-end:2;
/*shorthand*/
grid-row:1 / 2;

Bueno, ahorita haré el reto JEJEJE

Mi humilde contribución:

Esto realmente si lo desconcia totalmente, Excelente clase 🔥

RETO CUMPLIDO ❤️

Les comparto esto para que puedan ver los modos de escritura y las direcciones:
https://criniguez-curso-css-grid-layout.netlify.app/alineamiento/modos-escritura.html

aqui overflow esta mas que profundizado chequen : https://developer.mozilla.org/es/docs/Web/CSS/overflow

La propiedad Permite regular si los contenidos que sobresalen se seguirán viendo, si se ocultarán o si aparecerá una barra de scroll en el documento.

HTML

<div class="card">
	<div class="card__container">
		<p class="card__container__top">Curso de CSS Grid</p>
		<p class="card__container__left1">CSS Grid</p>
		<p class="card__container__left2">La Mejor Opción</p>
		<img class="card__container__img" src="./images/css-grid-layout.png" alt="Grid Layout" />
		<p class="card__container__right">The Best Option</p>
		<p class="card__container__bottom">Ta muy bueno</p>
	</div>
</div>

CSS

$cellBackgroundColor: #dbf6e9;
$backgroundColor:#9ddfd3;
$borderColor: #05977c;

* {
	margin: 0;
	box-sizing: border-box;
}

html {
	font-size: 62.5%;
}

.card {
	display: grid;
	place-content: center;
	height: 100vh;
}

.card__container {
	display: grid;
	grid-template-columns: auto auto 3fr auto;
	grid-template-rows: auto max-content auto;
	place-content: center;
	gap: 5px;
	width: 600px;
	height: 400px;
	padding: 20px;
	background-color: $backgroundColor;
	border: 1px solid $borderColor;
}

.cell {
	padding: 10px;
	background-color: $cellBackgroundColor;
	font-family: sans-serif;
	font-size: 1.8rem;
	font-weight: bold;
	text-align: center;
}

.card__container__top {
	@extend .cell;
	grid-area: 1/1/2/5;
   	font-size: 2rem;
    	font-weight: 900;
	letter-spacing: 0.2rem;
    	text-shadow: 0.2rem 0.2rem 0.6rem rgba(0,0,0,0.2);
}

.card__container__left1 {
	@extend .cell;
	writing-mode: vertical-rl;
	text-orientation: upright;
	text-transform: uppercase;
	letter-spacing: 10px;
}

.card__container__left2 {
	@extend .cell;
	writing-mode: vertical-rl;
	transform: rotate(180deg);
}

.card__container__img {
	width: 100%;
	height: 100%;
}

.card__container__right {
	@extend .cell;
	writing-mode: vertical-rl;
}

.card__container__bottom {
	@extend .cell;
	grid-area: 3/1/4/5;
    direction: rtl;
    transform: scale(-1,1);
}

El modo escritura es otro modo de inclusión. No sirve criticar, hay que celebrar la diversidad. 🥳

RETO!

Hola! Comunidad de Platzi, les comparto un pequeño repositorio en el cual construyo @mixins para el preprocesador Sass en diferentes métodos y direcciones de escritura los cuales solo tienen que ser llamados y aplicarse en los estilos de texto.

Repo <–
GitHubPages <–

Pues si esta complejo xd

RETO:)

Propiedad “direction”:

https://developer.mozilla.org/en-US/docs/Web/CSS/direction#:~:text=The direction CSS property sets,English and most other languages).

Propiedad “writing - mode”:

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

¡Excelente clase! No tenía ni idea que el Writing Mode existía en la web.

Básicamente, overflow: hidden, oculta los elementos que se salen del contenedor padre, tanto en vertical, como horizontal.
Precaución, si das tamaños fijos a los contenedores o al contenido del contenedor que tiene overflow hidden, por ejemplo cuando aplicas un box shadow no se va a mostrar el efecto.

Los modos de escritura es bastante importante para poder conocer de donde vienen ciertas propiedades que ya conocemos como Flexbox y como CSS Grid

Con los temas anteriores debemos manipular bien el tema de “positions” o “posiciones” tales como:

• top
• left
• right
• bottom

Ahora, con respecto a los modos de escritura todo cambia, como por ejemplo en sistema latín escribimos de izquierda a derecha y por eso el origen nuestro navegador es el “top-left”; sin embargo, hay otros sistemas de escritura

No solo existe el latín, hay otros y dependiendo de eso van a escribir de una forma completamente diferente, por ejemplo, podemos escribir:

• de derecha a izquierda
• de arriba hacia abajo
• etc.

Gracias a estos tipos de escrituras surge una nueva cosa que se conoce como “Writing Mode”, este “Writing Mode” va a tener diferentes valores, por ejemplo:

• Horizontal TB
• Vertical LR
• Vertical RL
• Sideways LR
• Sideways RL

Pero, que significan cada uno de estos, por ejemplo, el TB, es decir, el primer valor (Horizontal TB) indica que va del “Top” al “Bottom”, es decir que nuestro flujo es horizontal, es decir que escribimos de izquierda a derecha, sin embargo, cuando terminamos de escribir seguimos abajo, entonces escribimos de izquierda a derecha, pero nuestro flujo normal es de “arriba” para “abajo” (Top-Bottom), y gracias a esto tenemos diferentes valores diferentes formas de “izquierda a derecha”, de “derecha a izquierda”, eso es lo que nos indica esas dos últimas letras (Top, Bottom, Left, Right).

NOTA: Esta propiedad no es apta para tablas y row y column, es decir, para todo el resto menos para el tema de tablas.

Algo bien importante a tener en cuenta es:

• el modo de escritura,
• la dirección y también
• la orientación del texto

Para eso hay dos temas bastante importantes que son “Block” e “Inline”, es decir de “bloque” y de “linea”

Estos temas de Block y de Inline son simplemente para poder tener una dirección como lo vemos en la imagen, entonces esa dirección depende de:

• Si es en “bloque”
• O en “linea”

Entonces, si es en “bloque” será en “vertical” y si es en “linea” será “horizontal”

Por ejemplo:

Si hablamos de un <div>, un <div> tiene la propiedad por defecto “bloque”, esto que quiere decir que cuando nosotros colocamos un <div> después de otro, estos se organizaran de forma vertical, tal cual sería un <div> debajo de otro <div>, es decir, será de arriba hacia abajo.

Ahora, si hablamos de un <input>, que sucede con un <input>, esta etiqueta tiene por defecto la propiedad de “en línea”, al igual que <input> también está la etiqueta <span>, cualquiera de las etiquetas de HTML que sean por defecto “inline”, si los colocamos los vamos a tener como si fueran un texto, es decir cuando tenemos un texto tenemos diferentes palabras va seguido uno del otro y va a tener un pequeño espacio cada vez que haya una continuidad con los otros elementos. Entonces estos elementos están seguidos uno del otro (<input>, <span>), de ahí viene el nombre de “inline”, ya que será en orden horizontal.

Ahora, una vez que identificamos como es que trabajan todos estos elementos por defecto, cuando tenemos un “display: block;” o un “display: inline;”, ahora seremos más conscientes de como es el flujo o la dirección en este sentido que son 2 conceptos bastante interesantes, aquí tenemos los diferentes modos de escritura:

• Horizontal TB
• Vertical RL
• Vertical LR

NOTA: “Block Flow Direction” (BFD)

Valores desconocidos

Existen valores desconocidos o que no se sabe las formas de escritura que son por ejemplo este “sideways”

El flujo normal de este documento va de “derecha a izquierda” o de “izquierda a derecha”, muy parecidos al “Vertical RL” sin embargo, el texto se va orientando de forma completamente diferente y como ya se va orientando de forma diferente, pues entramos a otra propiedad que es la de “direction”

NOTA: Recordar siempre la compatibilidad con todas las propiedades de los diferentes navegadores en los que se está desarrollando.

Flujo de bloques:

display: block; // -> vertical
display: inline-block; // -> horizontal

Apenas empiezo en platzi, cuanto tiempo deje de aprovechar por no conseguir la suscrip antes :3 ahora sí a Darle duro!

overflow: hidden ----> GOT IT !

overflow: hidden sirve para ocultar el contenido que desborda a un elemento padre contenedor.

Wow, esto no lo sabía, es curioso y es bueno saberlo para cuando lo necesite, utilice estos valores y no haga cosas locas con css para hacer el mismo efecto.

Llevé un buen rato que no entendía porqué, pero cuando cambie de navegador (de CHrome a Firefox) recién se aplicaron los cambios

Reto, chevere

“Curso profesional de CSS Grid Layout”, clase 10 y aún no he obtenido nuevas skills en CSS Grid.

Que curioso eso de los modos de escritura, el artículo está superinteresante, 100% recomendado su lectura.
¡El modo de escritura de los Mongoles está tenaz!
Sin embargo, creo que lo principal que se puede sacar de esto, es que es 100% recomendado escribir de forma lógica y dejar las propiedades físicas. Ayudará bastante en proyecto de multilenguajes, aparte de ser un código mucho más funcional.

El overflow hidden, tiene que ver con el scrol cierto? .

Un ejemplo son los mangas orignarios de Japon que se leen de derecha a izquierda.

Overflow: hiden
Overflow esto sirve por si tenemos texto grande en un contenedor chico. Lo que hara es simple, es solo mostrar el pedazo de texto que quepa en ese contenedor

reto completado

Me encantan las diapositivas de la profe, tienen una identidad muy marcada durante todos sus cursos, son geniales

Muy bueno el link que dejaste de Jen Simmons 👏

overflow quiere decir, exedente osea, que queremos hacer con el exedente, entonces la opción de Hidden nos oculta ese exedente

Asi entendi para las Webs de japon! Increible!

Nunca habia pensando en eso y si en japon se escribe de derecha a izquiera y de izquiera top hacia abajo! wow!

La propiedad CSS overflow especifica: si recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento a nivel de bloque. Con hidden
El contenido es recortado y no se muestran barras de posición.

Ni sabia que existian values

it’s very interesting all about the writing mode,… it is normal not thinking about it, because i has rarely made a web for a different country where it’s necessary this kind of mode, the overflow hidden it’s an amazing tool, if you can pull out all the advantages, your web site it’s gonna be more didactic

La propiedad «overflow» permite recortar contenido, dibujar barras de desplazamiento o mostrar el contenido excedente en un elemento.

Con «overflow: hidden;»: El contenido es recortado para encajar dentro del contenedor en el que se encuentra.

CSS Direction

direction: [ ltr | rtl | inherit ]

Writing mode

Esta clase me ha volado la cabeza 🤯wow, nunca había pensando en todo lo relacionado al modo de escritura!!

En el tipo de escritura "Vertical RL (Right Left)" se escribe verticalmente (de arriba hacia abajo) empezando por el lado derecho y cuando se termina la línea, se pasa a la izquierda. Por esta razón el BFD va de derecha a izquierda, para que se entienda mejor comparalo con nuestro modo de escritura, el cual es "Horizontal TB (Top`Bottom)". Nosotros escribimos de izquierda a derecha empezando de arriba hacia abajo, entonces el BFD es de arriba hacia abajo.

El Block Flow Direction (BFD) fluye de abajo hacia arriba en el tipo de escritura "Horizontal TB (Top Bottom)". Se refiere a que los elementos de tipo bloque van listarse de arriba hacia abajo según se vayan creando. Algo similar sucede con el "Vertical RL" y el "Vertical LR"

El BLOCK FLOW DIRECTION y el INLINE BASE DIRECTION se basan en tres cosas importantes: writing mode, direction y text orientation.

El BLOCK FLOW DIRECTION y el INLINE BASE DIRECTION se basan en tres cosas importantes: writing mode, direction y text orientation.

La propiedad Overflow se traduce como excedente, con el valor hidden lo que hacemos es ocultar el contenido que se excede de un contenedor para que este no se sobrepase.

Creo que este curso esta MUY bueno pero, es como para verlo 2 veces. Hay mucha informacion y te vuela la cabeza. 🤯

me acabo de quedar como ahhhhhhhhhhhhhhhhhhhhhhh

PROPIEDAD OVERFLOW
La propiedad overflow permite regular la visiblidad de los contenidos que sobresalen de una caja html.

Permite regular si los contenidos que sobresalen se seguirán viendo, si se ocultarán o si aparecerá una barra de scroll en el documento.

Los valores que puede tomar son:
overflow:hidden; scroll; visible;

Aun no entiendo que debe hacer el

sideways-lr / rl

🤔🤔

No las conocia en absoluto :0
Y ya tengo ideas como usarlas en diseños locos.

Reto…

overflow:hidden
Es utilizado para que todo el contenido sobrante de una caja no sea visible.

Jugando me doy cuenta de que cuando aplico, claramente el texto va de derecha a izquierda

/*overflow: hidden;*/
direction: rtl;
/*writing-mode: vertical-rl;*/

cuando le aplico el overflow: hidden, este vuelve a su estado normal sin importar si le aplico la propiedad wriing-mode o direction, sin embargo si aplico wriing-mode: vertical-rl; o wriing-mode: vertical-rl; y direction: rtl; tambien sigue sin ocurrir nada, tengo que dejar alguno de estos 2 para que surta efecto.

Si aplico

  /*overflow: hidden;*/
  /*direction: rtl;*/
  writing-mode: vertical-lr;
}

  /*overflow: hidden;*/
  /*direction: rtl;*/
  writing-mode: vertical-rl;
}

En pocas palabras creo que el overflow: hidden es una propiedad muy especial 🤔.

En las practicas que había hecho no me había topado con esto, ahora se abren muchas más posibilidades.

En mi vida había escuchado hablar de esta propiedad. Esta súper genial 🤯.

Adicione tres lineas de codigo a .card:
text-orientation: upright; (para orientar la letra)
letter-spacing: 5px; (espaciado entre las letras)
text-transform: uppercase; (mayusculas)

Modos de escritura Css y textos en vertical con writing-mode

Una pequeña introducción al documento “CSS Writing Modes” (status Candidate Recommendation) sobre la orientación de los textos en aquellos aspectos aplicables a nuestra forma de escribir. Dde izquierda a derecha y de arriba a abajo es lo habitual en nuestro modo latino. Pero ahí fuera existen otros.

El modo o forma de la escritura en Css se controla con tres propiedades que actúan sobre los flujos (orientación) o forma de componerse del texto:

🟠 Inline base direction el flujo en las líneas de texto. Dos direcciones posibles: horizontal y vertical. Y en cada una de ellas dos sentidos: de izquierda a derecha o viceversa y de de arriba a abajo o contrario. Es controlado por la propiedad direction con la ayuda de unicode-bidi.

🟠 Block flow direction o cómo crece el bloque de textos. Esto es, cómo se organizan las líneas sucesivas respecto a las anteriores. La propiedad Css encargada es writing-mode.

🟠 Line orientation controlado por la propiedad text-orientation. Controla la orientación de cada carácter o glifo del texto en su línea.

🔸🔸Les dejo el articulo completo y un bonus de información extra🔸🔸
https://escss.blogspot.com/2013/03/escritura-vertical-writing-mode.html
https://medium.com/@SusCasasola/el-futuro-de-css-modos-de-escritura-propiedades-y-valores-lógicos-a9c4bcaae5a1

El overflow hidden funciona para que lo que se salga de nuestro contenedor padre cuando usamos propiedades como position absolute dentro de un position relative no aparezca, es decir, no se ven. Les voy a dejar un ejemplo de uncompañero llamado Jose Alberto del curso de Responsive Design

Como pueden ver donde dice recomendado se ve cortado conforme a la forma del contenedor

La definición de estilo “overflow: hidden” oculta el estilo excedente y las barras de desplazamiento.

Muy interesante, no conocía estas propiedades

Para entender como funciona la propiedad de overflow, primero tenemos que saber que significa esto. En español overflow es desbordamiento. Eso significa que en una etiqueta puede haber un desbordamiento de información, lo que provoca una muy mala experiencia para el usuario. Sabiendo esto, lo único que hay que saber después es que hidden quiere decir oculto, lo que significa que una vez que haya un desbordamiento, esto no se va a ver. Aunque usar esta propiedad también va a causar una mala experiencia al usuario.

The writing-mode property specifies whether lines of text are laid out horizontally or vertically.

Primera vez que escucho de los modos de escritura, que interesante la complejidad que puede llegar a tener CSS

Direction: ltr; —> Texto de izquierda a derecha.
Direction:rtl; —> Texto de derecha a izquierda.

En relacion a los display: block & inline. También existe uno que se llama inline-block. El cual nos permite combinar las mejores propiedades de estas dos. Es muy recomendable usar esta propiedad.

https://caniuse.com/?search=writing-mode%3A sideways-lr%3B