CSS Writing Mode Practice


by Jeremy Caudle
notes

I've worked a bit with writing modes in the past, but I have trouble recalling all the various modes. I learned a little bit more today within the small amount of time I've spent on today's practice. Gotta keep at it.

Writing Mode: Vertical with new lines appearing to the left (writing-mode: vertical-rl)

Writing Mode: Vertical with new lines appearing to the right (writing-mode: vertical-lr)

Writing Mode: Horizontal | flow depends on type of script used. (writing-mode: horizontal-tb)Language: English

これはペンです。 (writing-mode: horizontal-tb)Language: Japanese

Writing Mode: Sideways | flow depends on type of script used. (writing-mode: sideways-lr)
Writing Mode: Sideways | flow depends on type of script used. (writing-mode: sideways-rl)

Black Lives Matter

View the code:

HTML and JS 
<div class="codedoodle-block">
        <div class="card">

            <h1>Writing Mode: Vertical with new lines appearing to the left <span>(writing-mode: vertical-rl)</span></h1>
            <h2>Writing Mode: Vertical with new lines appearing to the right <span>(writing-mode: vertical-lr)</span></h2>
            <h3>Writing Mode: Horizontal | flow depends on type of script used. <span>(writing-mode: horizontal-tb)</span><span>Language: English</span></h3>
            <h4 lang="ja">これはペンです。 <span>(writing-mode: horizontal-tb)</span><span>Language: Japanese</span></h4>
            <h5>Writing Mode: Sideways | flow depends on type of script used. <span>(writing-mode: sideways-lr)</span></h5>
            <h6>Writing Mode: Sideways | flow depends on type of script used. <span>(writing-mode: sideways-rl)</span></h6>
						
						<p><a href="https://blacklivesmatters.carrd.co/">Black Lives Matter</a></p>
						
        </div>
    </div>
CSS 
/* Code Block styles */

        div.codedoodle-block {
            margin:0;
            width: auto;
            background-color: transparent;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        }

        .card {
            border: solid 1px #dedede;
            padding: 1em;
            margin: 1rem auto;
            font-size: 1.25rem;
        }

        @supports (display: flex) {
            .card {
                display: flex;
                flex-direction: column;
                align-content: center;
                justify-content: center;
            }
        }

        @supports (display: grid) {
            .card {
                display: grid;
                grid-template-columns:  1fr 1fr 1fr 1fr 1fr 1fr;
                grid-template-rows: 20% 20% 20% 20% 20%;
                grid-gap: 1em;
            }
        }

        
        .card h1 {
            writing-mode: vertical-rl;
            max-height: 30rem;
            grid-column: 1 / 2;
            grid-row: 1 / 5;
        }

        .card h2 {
            writing-mode: vertical-lr;
            max-height: 30vh;
            grid-column: 5 / 6;
            grid-row: 1 / 3;
        }

        .card h3 {
            writing-mode: horizontal-tb;
            grid-column: 2 / 3;
            grid-row: 1 / 2;
        }

        .card h4 {
            writing-mode: horizontal-tb;
            grid-column: 2 / 3;
            grid-row: 2 / 3;
        }

        .card h5 {
            writing-mode: sideways-lr;
            grid-column: 3 / 4;
            grid-row: 1 / 5;
        }

        .card h6 {
            writing-mode: sideways-rl;
            grid-column: 4 / 5;
            grid-row: 1 / 5;
        }
				
				.card p {
					display: flex;
					justify-content: center;
					align-content: center;
					writing-mode: vertical-lr;
					grid-column: 6 / 7;
					background-color: black;
					color: white;
					font-size: 2em;
				}
				
				.card p a {
					color: white;
				}

        h1 span, h2 span, h3 span, h4 span, h5 span, h6 span {
            display: block;
            font-size: .66em;
            color: orangered;
        }

Tags