Writing mode

fenosoaliva_ratovoson · February 20, 2023, 6:22am

coucou @mikoMK! je n’ai pas réussi cette tâche

Fenosoaliva/Fenosoa.github.io/blob/main/writingmode/tache3.css

      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      .vertical {
        writing-mode:vertical-rl;
        border-inline-start: 5px dotted blue;
        border-block-end:  5px dotted red;
        border-block-start: 5px solid rebeccapurple;
        border-inline-end: 5px solid grey;
        padding-block-start:40px;
        marging-block-end: 30px;
        inline-size: 150px;
        block-size: 150px;
}

This file has been truncated. show original

github.com

Fenosoaliva/Fenosoa.github.io/blob/main/writingmode/tache3.css

      body {
        background-color: #fff;
        color: #333;
        font: 1.2em / 1.5 Helvetica Neue, Helvetica, Arial, sans-serif;
        padding: 1em;
        margin: 0;
      }

      .vertical {
        writing-mode:vertical-rl;
        border-inline-start: 5px dotted blue;
        border-block-end:  5px dotted red;
        border-block-start: 5px solid rebeccapurple;
        border-inline-end: 5px solid grey;
        padding-block-start:40px;
        marging-block-end: 30px;
        inline-size: 150px;
        block-size: 150px;
}

This file has been truncated. show original

merci

mikoMK · February 26, 2023, 4:00pm

Hi @fenosoaliva_ratovoson

Congratulation! You set all props correctly!

On a general note: It would have been better to replace the props in the .box instead of adding them to .vertical. .vertical should only include writing-mode: vertical-rl;. The logical props in .box would then behave correctly for different writing modes.

Does that make sense?

Michael

fenosoaliva_ratovoson · February 27, 2023, 5:33am

bonjour @mikoMK! pourtant quand je charge la page le mien ne ressemble pas à celui dans l’exemple de MDN

mikoMK · February 28, 2023, 3:00am

Yeah exactly.
Your vertical box has, for example, the correct padding-block-start:40px; but also padding-top: 40px; from the .box that doesn’t react to the writing mode. The correct borders get also overwritten by the “wrong” borders of .box.

fenosoaliva_ratovoson · March 1, 2023, 5:03am

bonjour @mikoMK! ahh ok merci