Skip to content

Commit 7e5710a

Browse files
rachelandrewrachelandrew
committed
Writing Modes and flow layout examples
1 parent a31481f commit 7e5710a

File tree

10 files changed

+1142
-0
lines changed

10 files changed

+1142
-0
lines changed

‎flow/writing-modes/block-change-mode.html‎

Lines changed: 149 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,149 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Changing the writing mode of an block box</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
.box{
62+
writing-mode: vertical-rl;
63+
}
64+
.box > div {
65+
writing-mode: horizontal-tb;
66+
padding: 10px;
67+
border: 1px solid rebeccapurple;
68+
}
69+
.float {
70+
width: 100px;
71+
height: 150px;
72+
background-color: rebeccapurple;
73+
float: left;
74+
}
75+
</style>
76+
</head>
77+
78+
<body>
79+
<section>
80+
<div class="box">
81+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
82+
83+
<div>
84+
<div class="float"></div> This box should establish a new BFC.
85+
</div>
86+
87+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
88+
89+
</div>
90+
91+
</section>
92+
<textarea class="playable-css">
93+
.box {
94+
writing-mode: vertical-rl;
95+
}
96+
.box > div {
97+
writing-mode: horizontal-tb;
98+
padding: 10px;
99+
border: 1px solid rebeccapurple;
100+
}
101+
.float {
102+
width: 100px;
103+
height: 150px;
104+
background-color: rebeccapurple;
105+
float: left;
106+
}
107+
</textarea>
108+
<textarea id="code" class="playable-html">
109+
<div class="box">
110+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
111+
112+
<div>
113+
<div class="float"></div> This box should establish a new BFC.
114+
</div>
115+
116+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
117+
118+
</div>
119+
</textarea>
120+
<div class="playable-buttons">
121+
<input id="reset" type="button" value="Reset">
122+
</div>
123+
</body>
124+
<script>
125+
var section = document.querySelector('section');
126+
var editable = document.querySelector('.editable');
127+
var textareaHTML = document.querySelector('.playable-html');
128+
var textareaCSS = document.querySelector('.playable-css');
129+
var reset = document.getElementById('reset');
130+
var htmlCode = textareaHTML.value;
131+
var cssCode = textareaCSS.value;
132+
133+
function fillCode() {
134+
editable.innerHTML = textareaCSS.value;
135+
section.innerHTML = textareaHTML.value;
136+
}
137+
138+
reset.addEventListener('click', function () {
139+
textareaHTML.value = htmlCode;
140+
textareaCSS.value = cssCode;
141+
fillCode();
142+
});
143+
144+
textareaHTML.addEventListener('input', fillCode);
145+
textareaCSS.addEventListener('input', fillCode);
146+
window.addEventListener('load', fillCode);
147+
</script>
148+
149+
</html>

‎flow/writing-modes/blue-sky.png‎

73.6 KB
Loading

‎flow/writing-modes/creative-use.html‎

Lines changed: 119 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,119 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>Flow and Writing Modes</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
h1 {
62+
writing-mode: vertical-lr;
63+
float: left;
64+
}
65+
</style>
66+
</head>
67+
68+
<body>
69+
<section>
70+
<div class="box">
71+
<h1>A heading</h1>
72+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
73+
74+
</div>
75+
76+
</section>
77+
<textarea class="playable-css">
78+
h1 {
79+
writing-mode: vertical-lr;
80+
float: left;
81+
}
82+
</textarea>
83+
<textarea id="code" class="playable-html">
84+
<div class="box">
85+
<h1>A heading</h1>
86+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
87+
88+
</div>
89+
</textarea>
90+
<div class="playable-buttons">
91+
<input id="reset" type="button" value="Reset">
92+
</div>
93+
</body>
94+
<script>
95+
var section = document.querySelector('section');
96+
var editable = document.querySelector('.editable');
97+
var textareaHTML = document.querySelector('.playable-html');
98+
var textareaCSS = document.querySelector('.playable-css');
99+
var reset = document.getElementById('reset');
100+
var htmlCode = textareaHTML.value;
101+
var cssCode = textareaCSS.value;
102+
103+
function fillCode() {
104+
editable.innerHTML = textareaCSS.value;
105+
section.innerHTML = textareaHTML.value;
106+
}
107+
108+
reset.addEventListener('click', function () {
109+
textareaHTML.value = htmlCode;
110+
textareaCSS.value = cssCode;
111+
fillCode();
112+
});
113+
114+
textareaHTML.addEventListener('input', fillCode);
115+
textareaCSS.addEventListener('input', fillCode);
116+
window.addEventListener('load', fillCode);
117+
</script>
118+
119+
</html>

‎flow/writing-modes/horizontal-tb.html‎

Lines changed: 115 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,115 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>horizontal-tb</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
.box {
62+
writing-mode: horizontal-tb;
63+
}
64+
</style>
65+
</head>
66+
67+
<body>
68+
<section>
69+
<div class="box">
70+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
71+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
72+
</div>
73+
74+
</section>
75+
<textarea class="playable-css">
76+
.box {
77+
writing-mode: horizontal-tb;
78+
}
79+
</textarea>
80+
<textarea id="code" class="playable-html">
81+
<div class="box">
82+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney. Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
83+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
84+
</div>
85+
</textarea>
86+
<div class="playable-buttons">
87+
<input id="reset" type="button" value="Reset">
88+
</div>
89+
</body>
90+
<script>
91+
var section = document.querySelector('section');
92+
var editable = document.querySelector('.editable');
93+
var textareaHTML = document.querySelector('.playable-html');
94+
var textareaCSS = document.querySelector('.playable-css');
95+
var reset = document.getElementById('reset');
96+
var htmlCode = textareaHTML.value;
97+
var cssCode = textareaCSS.value;
98+
99+
function fillCode() {
100+
editable.innerHTML = textareaCSS.value;
101+
section.innerHTML = textareaHTML.value;
102+
}
103+
104+
reset.addEventListener('click', function () {
105+
textareaHTML.value = htmlCode;
106+
textareaCSS.value = cssCode;
107+
fillCode();
108+
});
109+
110+
textareaHTML.addEventListener('input', fillCode);
111+
textareaCSS.addEventListener('input', fillCode);
112+
window.addEventListener('load', fillCode);
113+
</script>
114+
115+
</html>

0 commit comments

Comments
 (0)