Skip to content

Commit 5863e66

Browse files
rachelandrewrachelandrew
committed
writing modes files
1 parent 5f0cfff commit 5863e66

File tree

7 files changed

+496
-0
lines changed

7 files changed

+496
-0
lines changed

‎learn/writing-modes/big-star.png‎

981 Bytes
Loading

‎learn/writing-modes/block-inline.html‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: block and inline</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
}
15+
16+
.box {
17+
border: 1px solid #ccc;
18+
padding: .5em;
19+
margin: 10px;
20+
}
21+
</style>
22+
23+
<style class="editable">
24+
.horizontal {
25+
writing-mode: horizontal-tb;
26+
}
27+
28+
.vertical {
29+
writing-mode: vertical-rl;
30+
}
31+
32+
</style>
33+
</head>
34+
35+
<body>
36+
<section class="preview">
37+
<div class="wrapper">
38+
<div class="box horizontal">
39+
<h2>Heading</h2>
40+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
41+
</div>
42+
<div class="box vertical">
43+
<h2>Heading</h2>
44+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
45+
</div>
46+
</div>
47+
</section>
48+
49+
<textarea class="playable playable-css" style="height: 200px;">
50+
.horizontal {
51+
writing-mode: horizontal-tb;
52+
}
53+
54+
.vertical {
55+
writing-mode: vertical-rl;
56+
}
57+
</textarea>
58+
59+
<textarea class="playable playable-html" style="height: 230px;">
60+
<div class="wrapper">
61+
<div class="box horizontal">
62+
<h2>Heading</h2>
63+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
64+
</div>
65+
<div class="box vertical">
66+
<h2>Heading</h2>
67+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
68+
</div>
69+
</div>
70+
</textarea>
71+
72+
<div class="playable-buttons">
73+
<input id="reset" type="button" value="Reset" />
74+
</div>
75+
</body>
76+
<script src="../playable.js"></script>
77+
</html>

‎learn/writing-modes/float.html‎

Lines changed: 75 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,75 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: logical values</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
}
15+
16+
.box {
17+
margin: 10px;
18+
padding: .5em;
19+
border: 1px solid #ccc;
20+
}
21+
</style>
22+
23+
<style class="editable">
24+
.box {
25+
inline-size: 200px;
26+
writing-mode: horizontal-tb;
27+
}
28+
29+
img{
30+
float: inline-start;
31+
margin-inline-end: 10px;
32+
margin-block-end: 10px;
33+
}
34+
35+
</style>
36+
</head>
37+
38+
<body>
39+
<section class="preview">
40+
<div class="wrapper">
41+
<div class="box">
42+
<img src="big-star.png" alt="star">
43+
<p>This box uses logical properties. The star image has been floated inline-start, it also has a margin on the inline-end and block-end.</p>
44+
</div>
45+
</div>
46+
</section>
47+
48+
<textarea class="playable playable-css" style="height: 200px;">
49+
.box {
50+
inline-size: 200px;
51+
writing-mode: horizontal-tb;
52+
}
53+
54+
img{
55+
float: inline-start;
56+
margin-inline-end: 10px;
57+
margin-block-end: 10px;
58+
}
59+
</textarea>
60+
61+
<textarea class="playable playable-html" style="height: 230px;">
62+
<div class="wrapper">
63+
<div class="box logical">
64+
<img src="big-star.png" alt="star">
65+
<p>This box uses logical properties. The star image has been floated inline-start, it also has a margin on the inline-end and block-end.</p>
66+
</div>
67+
</div>
68+
</textarea>
69+
70+
<div class="playable-buttons">
71+
<input id="reset" type="button" value="Reset" />
72+
</div>
73+
</body>
74+
<script src="../playable.js"></script>
75+
</html>

‎learn/writing-modes/inline-size.html‎

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: inline-size</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
}
15+
16+
.box {
17+
border: 1px solid #ccc;
18+
padding: .5em;
19+
margin: 10px;
20+
}
21+
</style>
22+
23+
<style class="editable">
24+
.box {
25+
inline-size: 150px;
26+
}
27+
28+
.horizontal {
29+
writing-mode: horizontal-tb;
30+
}
31+
32+
.vertical {
33+
writing-mode: vertical-rl;
34+
}
35+
36+
37+
</style>
38+
</head>
39+
40+
<body>
41+
<section class="preview">
42+
<div class="wrapper">
43+
<div class="box horizontal">
44+
<h2>Heading</h2>
45+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
46+
<p>These boxes have inline-size.</p>
47+
</div>
48+
<div class="box vertical">
49+
<h2>Heading</h2>
50+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
51+
<p>These boxes have inline-size.</p>
52+
</div>
53+
</div>
54+
</section>
55+
56+
<textarea class="playable playable-css" style="height: 200px;">
57+
.box {
58+
inline-size: 150px;
59+
}
60+
61+
.horizontal {
62+
writing-mode: horizontal-tb;
63+
}
64+
65+
.vertical {
66+
writing-mode: vertical-rl;
67+
}
68+
</textarea>
69+
70+
<textarea class="playable playable-html" style="height: 230px;">
71+
<div class="wrapper">
72+
<div class="box horizontal">
73+
<h2>Heading</h2>
74+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
75+
<p>These boxes have inline-size.</p>
76+
</div>
77+
<div class="box vertical">
78+
<h2>Heading</h2>
79+
<p>A paragraph. Demonstrating Writing Modes in CSS.</p>
80+
<p>These boxes have inline-size.</p>
81+
</div>
82+
</div>
83+
</textarea>
84+
85+
<div class="playable-buttons">
86+
<input id="reset" type="button" value="Reset" />
87+
</div>
88+
</body>
89+
<script src="../playable.js"></script>
90+
</html>

‎learn/writing-modes/logical-mbp.html‎

Lines changed: 117 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,117 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Backgrounds and Borders: logical MBP</title>
6+
<link rel="stylesheet" href="../styles.css" />
7+
<style>
8+
* {
9+
box-sizing: border-box;
10+
}
11+
12+
.wrapper {
13+
display: flex;
14+
border: 5px solid #ccc;
15+
}
16+
17+
.box {
18+
margin-right: 30px;
19+
}
20+
</style>
21+
22+
<style class="editable">
23+
.box {
24+
inline-size: 200px;
25+
writing-mode: horizontal-tb;
26+
}
27+
28+
.logical {
29+
margin-block-start: 20px;
30+
padding-inline-start: 2em;
31+
padding-block-start: 2px;
32+
border-block-start: 5px solid pink;
33+
border-inline-end: 10px dotted rebeccapurple;
34+
border-block-end: 1em double orange;
35+
border-inline-start: 1px solid black;
36+
}
37+
38+
.physical {
39+
margin-top: 20px;
40+
padding-right: 2em;
41+
padding-top: 2px;
42+
border-top: 5px solid pink;
43+
border-right: 10px dotted rebeccapurple;
44+
border-bottom: 1em double orange;
45+
border-left: 1px solid black;
46+
}
47+
48+
h2 {
49+
border-bottom: 5px solid black;
50+
}
51+
</style>
52+
</head>
53+
54+
<body>
55+
<section class="preview">
56+
<div class="wrapper">
57+
<div class="box physical">
58+
<h2>Physical Properties</h2>
59+
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
60+
</div>
61+
<div class="box logical">
62+
<h2>Logical Properties</h2>
63+
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
64+
</div>
65+
</div>
66+
</section>
67+
68+
<textarea class="playable playable-css" style="height: 500px;">
69+
.box {
70+
inline-size: 200px;
71+
writing-mode: horizontal-tb;
72+
}
73+
74+
.logical {
75+
margin-block-start: 20px;
76+
padding-inline-start: 2em;
77+
padding-block-start: 2px;
78+
border-block-start: 5px solid pink;
79+
border-inline-end: 10px dotted rebeccapurple;
80+
border-block-end: 1em double orange;
81+
border-inline-start: 1px solid black;
82+
}
83+
84+
.physical {
85+
margin-top: 20px;
86+
padding-right: 2em;
87+
padding-top: 2px;
88+
border-top: 5px solid pink;
89+
border-right: 10px dotted rebeccapurple;
90+
border-bottom: 1em double orange;
91+
border-left: 1px solid black;
92+
}
93+
94+
h2 {
95+
border-bottom: 5px solid black;
96+
}
97+
</textarea>
98+
99+
<textarea class="playable playable-html" style="height: 230px;">
100+
<div class="wrapper">
101+
<div class="box physical">
102+
<h2>Physical Properties</h2>
103+
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
104+
</div>
105+
<div class="box logical">
106+
<h2>Logical Properties</h2>
107+
<p>A paragraph. Demonstrating Logical Properties in CSS.</p>
108+
</div>
109+
</div>
110+
</textarea>
111+
112+
<div class="playable-buttons">
113+
<input id="reset" type="button" value="Reset" />
114+
</div>
115+
</body>
116+
<script src="../playable.js"></script>
117+
</html>

0 commit comments

Comments
 (0)