Skip to content

Commit 7045215

Browse files
rachelandrewrachelandrew
committed
inline formatting context examples
1 parent ebcee78 commit 7045215

File tree

5 files changed

+679
-0
lines changed

5 files changed

+679
-0
lines changed

‎inline-formatting/align.html‎

Lines changed: 144 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,144 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Inline Formatting Context - alignment</title>
6+
7+
<style>
8+
body {
9+
font: 1.2em Helvetica, Arial, sans-serif;
10+
margin: 20px;
11+
padding: 0;
12+
}
13+
14+
textarea {
15+
font-family: monospace;
16+
display: block;
17+
margin-bottom: 10px;
18+
background-color: #f4f7f8;
19+
border: none;
20+
border-left: 6px solid #558abb;
21+
color: #4d4e53;
22+
width: 90%;
23+
max-width: 700px;
24+
padding: 10px 10px 0px;
25+
font-size: 90%;
26+
}
27+
28+
textarea:nth-of-type(1) {
29+
height: 120px;
30+
}
31+
32+
textarea:nth-of-type(2) {
33+
height: 160px;
34+
}
35+
36+
.playable-buttons {
37+
text-align: right;
38+
width: 90%;
39+
max-width: 700px;
40+
padding: 5px 10px 5px 26px;
41+
font-size: 100%;
42+
}
43+
44+
section {
45+
width: 90%;
46+
max-width: 700px;
47+
border: 1px solid #4d4e53;
48+
border-radius: 2px;
49+
padding: 10px 14px 10px 10px;
50+
margin-bottom: 10px;
51+
}
52+
53+
section input {
54+
display: block;
55+
margin: 5px;
56+
}
57+
58+
.example {
59+
border: 5px solid black;
60+
margin: 20px;
61+
inline-size: 400px;
62+
}
63+
64+
.horizontal {
65+
writing-mode: horizontal-tb;
66+
}
67+
68+
.vertical {
69+
writing-mode: vertical-rl;
70+
}
71+
</style>
72+
73+
<style class="editable">
74+
span {
75+
font-size: 200%;
76+
vertical-align: top;
77+
}
78+
</style>
79+
</head>
80+
81+
<body>
82+
<section>
83+
<div class="example horizontal">
84+
Before that night—<span>a memorable night</span>, as it was to
85+
prove—hundreds of millions of people had watched the rising
86+
smoke-wreaths of their fires without drawing any special inspiration
87+
from the fact.”
88+
</div>
89+
90+
<div class="example vertical">
91+
Before that night—<span>a memorable night</span>, as it was to
92+
prove—hundreds of millions of people had watched the rising
93+
smoke-wreaths of their fires without drawing any special inspiration
94+
from the fact.”
95+
</div>
96+
</section>
97+
<textarea class="playable-css">
98+
span {
99+
font-size: 200%;
100+
vertical-align: top;
101+
}
102+
</textarea
103+
>
104+
105+
<textarea id="code" class="playable-html">
106+
107+
<div class="example horizontal">
108+
Before that night—<span>a memorable night</span>, 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.”
109+
</div>
110+
111+
<div class="example vertical">
112+
Before that night—<span>a memorable night</span>, 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.”
113+
</div>
114+
115+
</textarea>
116+
<div class="playable-buttons">
117+
<input id="reset" type="button" value="Reset" />
118+
</div>
119+
</body>
120+
<script>
121+
var section = document.querySelector("section");
122+
var editable = document.querySelector(".editable");
123+
var textareaHTML = document.querySelector(".playable-html");
124+
var textareaCSS = document.querySelector(".playable-css");
125+
var reset = document.getElementById("reset");
126+
var htmlCode = textareaHTML.value;
127+
var cssCode = textareaCSS.value;
128+
129+
function fillCode() {
130+
editable.innerHTML = textareaCSS.value;
131+
section.innerHTML = textareaHTML.value;
132+
}
133+
134+
reset.addEventListener("click", function() {
135+
textareaHTML.value = htmlCode;
136+
textareaCSS.value = cssCode;
137+
fillCode();
138+
});
139+
140+
textareaHTML.addEventListener("input", fillCode);
141+
textareaCSS.addEventListener("input", fillCode);
142+
window.addEventListener("load", fillCode);
143+
</script>
144+
</html>

‎inline-formatting/break.html‎

Lines changed: 125 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,125 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Inline Formatting Context - alignment</title>
6+
7+
<style>
8+
body {
9+
font: 1.2em Helvetica, Arial, sans-serif;
10+
margin: 20px;
11+
padding: 0;
12+
}
13+
14+
textarea {
15+
font-family: monospace;
16+
display: block;
17+
margin-bottom: 10px;
18+
background-color: #f4f7f8;
19+
border: none;
20+
border-left: 6px solid #558abb;
21+
color: #4d4e53;
22+
width: 90%;
23+
max-width: 700px;
24+
padding: 10px 10px 0px;
25+
font-size: 90%;
26+
}
27+
28+
textarea:nth-of-type(1) {
29+
height: 120px;
30+
}
31+
32+
textarea:nth-of-type(2) {
33+
height: 160px;
34+
}
35+
36+
.playable-buttons {
37+
text-align: right;
38+
width: 90%;
39+
max-width: 700px;
40+
padding: 5px 10px 5px 26px;
41+
font-size: 100%;
42+
}
43+
44+
section {
45+
width: 90%;
46+
max-width: 700px;
47+
border: 1px solid #4d4e53;
48+
border-radius: 2px;
49+
padding: 10px 14px 10px 10px;
50+
margin-bottom: 10px;
51+
}
52+
53+
section input {
54+
display: block;
55+
margin: 5px;
56+
}
57+
58+
.example {
59+
border: 5px solid black;
60+
margin: 20px;
61+
inline-size: 400px;
62+
}
63+
</style>
64+
65+
<style class="editable">
66+
span {
67+
border: 5px solid rebeccapurple;
68+
}
69+
</style>
70+
</head>
71+
72+
<body>
73+
<section>
74+
<div class="example">
75+
Before that night—<span
76+
>a memorable night, as it was to prove—hundreds of millions of
77+
people</span
78+
>
79+
had watched the rising smoke-wreaths of their fires without drawing any
80+
special inspiration from the fact.”
81+
</div>
82+
</section>
83+
<textarea class="playable-css">
84+
span {
85+
border: 5px solid rebeccapurple;
86+
}
87+
</textarea
88+
>
89+
90+
<textarea id="code" class="playable-html">
91+
92+
<div class="example">
93+
Before that night—<span>a memorable night, as it was to prove—hundreds of millions of people</span> had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”
94+
</div>
95+
96+
</textarea>
97+
<div class="playable-buttons">
98+
<input id="reset" type="button" value="Reset" />
99+
</div>
100+
</body>
101+
<script>
102+
var section = document.querySelector("section");
103+
var editable = document.querySelector(".editable");
104+
var textareaHTML = document.querySelector(".playable-html");
105+
var textareaCSS = document.querySelector(".playable-css");
106+
var reset = document.getElementById("reset");
107+
var htmlCode = textareaHTML.value;
108+
var cssCode = textareaCSS.value;
109+
110+
function fillCode() {
111+
editable.innerHTML = textareaCSS.value;
112+
section.innerHTML = textareaHTML.value;
113+
}
114+
115+
reset.addEventListener("click", function() {
116+
textareaHTML.value = htmlCode;
117+
textareaCSS.value = cssCode;
118+
fillCode();
119+
});
120+
121+
textareaHTML.addEventListener("input", fillCode);
122+
textareaCSS.addEventListener("input", fillCode);
123+
window.addEventListener("load", fillCode);
124+
</script>
125+
</html>

0 commit comments

Comments
 (0)