Skip to content

Commit ab78ebd

Browse files
author
Arron Eicholz
committed
Adding longdesc pages for images
1 parent e265763 commit ab78ebd

8 files changed

Lines changed: 296 additions & 0 deletions

‎css3-positioning/longdesc/flow-abs-rel-desc.html‎

Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for example illustrating positioning with respect to a positioned ancestor</title>
5+
</head>
6+
<body>
7+
<h1>Long description for example illustrating positioning with respect to a positioned ancestor</h1>
8+
<p>
9+
This diagram illustrates the effects of absolutely positioning a box ("inner") with
10+
respect to a containing block established by a relatively positioned ancestor ("outer").
11+
</p>
12+
<p>
13+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and
14+
"outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been
15+
positioned relative to the top and left edges of the "outer" element's first inline box.
16+
</p>
17+
<p>
18+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
19+
beginning with the appropriate number. The reference edges for positioning the "inner"
20+
box are indicated in the diagram by thick dashed lines. The upper left coordinates of
21+
the "inner" box are labeled by (+200, -100). In the PRE element below, the reference
22+
edges for "inner" are indicated by vertical bars and equal signs. The offset of the
23+
"inner" box is given in square brackets. The lines of text, as they appear in the image,
24+
contain approximately:
25+
</p>
26+
<pre> ====
27+
|
28+
1 Beginning of body contents.|Start
29+
30+
2 of outer contents. End of outer
31+
32+
3 contents. End of body contents.
33+
34+
4 [(+200, -100)]
35+
36+
5 Inner
37+
38+
6 contents.
39+
40+
7
41+
42+
8
43+
</pre>
44+
<p>
45+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
46+
blue. "End of outer contents" is red.
47+
</p>
48+
<p><a href="../Overflow.html#img-flow-abs-rel">Return to image.</a></p>
49+
</body>
50+
</html>

‎css3-positioning/longdesc/flow-absolute-desc.html‎

Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for example illustrating absolute positioning</title>
5+
</head>
6+
<body>
7+
<h1>Long description for example illustrating absolute positioning</h1>
8+
<p>This diagram illustrates the effects of absolutely positioning a box.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All text
11+
outside the "outer" box has been flowed into lines 1 and 2.
12+
</p>
13+
<p>
14+
The "outer" box is positioned absolutely so that it occupies the lower right quadrant of
15+
the document window. All text in "outer" and its descendants occupies the second half of
16+
lines 5 through 8.
17+
</p>
18+
<p>
19+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
20+
beginning with the appropriate number. The lines, as they appear in the image, contain:
21+
</p>
22+
<pre>
23+
1 Beginning of body contents. End of
24+
25+
2 body contents.
26+
27+
3
28+
29+
4
30+
31+
5 Start of outer
32+
33+
6 contents. Inner
34+
35+
7 contents. End of
36+
37+
8 outer contents.
38+
</pre>
39+
<p>
40+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
41+
blue. "End of outer contents" is red.
42+
</p>
43+
<p><a href="../Overview.html#img-flow-absolute">Return to image.</a></p>
44+
</body>
45+
</html>

‎css3-positioning/longdesc/flow-clear-desc.html‎

Lines changed: 39 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,39 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description of example illustrating floating without clear</title>
5+
</head>
6+
<body>
7+
<h1>Long description of example illustrating floating without clear</h1>
8+
<p>
9+
This diagram illustrates the effects of floating a box ("inner") and how its "sibling"
10+
flows alongside it.
11+
</p>
12+
<p>
13+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the
14+
"inner" box has been floated to the right, all other text flows around it, including
15+
that of the "sibling" box (on lines 1 through 5).
16+
</p>
17+
<p>
18+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
19+
beginning with the appropriate number. Vertical bars represent the left edge of the
20+
floated box. The lines, as they appear in the image, contain:
21+
</p>
22+
<pre>
23+
1 Beginning of body contents. Start
24+
25+
2 of outer contents. | Inner
26+
27+
3 Sibling contents. End | contents.
28+
29+
4 of outer contents. End of body
30+
31+
5 contents.
32+
</pre>
33+
<p>
34+
The default text color is black. "Start of outer contents" is red. "Sibling contents" is
35+
red. "Inner contents" is blue. "End of outer contents" is red.
36+
</p>
37+
<p><a href="../Overview.html#img-flow-clear">Return to image.</a></p>
38+
</body>
39+
</html>

‎css3-positioning/longdesc/flow-clear2-desc.html‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description of example illustrating floating with clear</title>
5+
</head>
6+
<body>
7+
<h1>Long description of example illustrating floating with clear</h1>
8+
<p>
9+
This diagram illustrates the effects of floating a box ("inner") and how its "sibling"
10+
is forced below it due to the 'clear' property.
11+
</p>
12+
<p>
13+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Text before
14+
the "inner" box flows on lines 1 and halfway on line 2. The "inner" box has been floated
15+
to the right and occupies the second half of lines 3 and 4. The sibling box flows on the
16+
following line (line 4) and is followed by the remainder of the text.
17+
</p>
18+
<p>
19+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
20+
beginning with the appropriate number. Vertical bars represent the left edge of the
21+
floated box. The lines, as they appear in the image, contain:
22+
</p>
23+
<pre>
24+
1 Beginning of body contents. Start
25+
26+
2 of outer contents. | Inner
27+
28+
3 | contents.
29+
30+
4 Sibling contents. End of outer
31+
32+
5 contents. End of body contents.
33+
</pre>
34+
<p>
35+
The default text color is black. "Start of outer contents" is red. "Sibling contents" is
36+
red. "Inner contents" is blue. "End of outer contents" is red.
37+
</p>
38+
<p><a href="../Overview.html#img-flow-clear2">Return to image.</a></p>
39+
</body>
40+
</html>

‎css3-positioning/longdesc/flow-float-desc.html‎

Lines changed: 34 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,34 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description of example illustrating floating</title>
5+
</head>
6+
<body>
7+
<h1>Long description of example illustrating floating</h1>
8+
<p>This diagram illustrates the effects of floating a box.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Since the
11+
"inner" box has been floated to the right, all other text flows around it (on lines 1
12+
through 4).
13+
</p>
14+
<p>
15+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
16+
beginning with the appropriate number. Vertical bars represent the left edge of the
17+
floated box. The lines, as they appear in the image, contain:
18+
</p>
19+
<pre>
20+
1 Beginning of body contents. Start
21+
22+
2 of outer contents. End | Inner
23+
24+
3 of outer contents. End | contents.
25+
26+
4 of body contents.
27+
</pre>
28+
<p>
29+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
30+
blue. "End of outer contents" is red.
31+
</p>
32+
<p><a href="../Overview.html#img-flow-float">Return to image.</a></p>
33+
</body>
34+
</html>

‎css3-positioning/longdesc/flow-generic-desc.html‎

Lines changed: 32 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for normal flow example</title>
5+
</head>
6+
<body>
7+
<h1>Long description for normal flow example</h1>
8+
<p>This diagram illustrates the normal flow of text between parent and sibling boxes.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. Four lines
11+
of text are displayed, occupying line 1 through 4.
12+
</p>
13+
<p>
14+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
15+
beginning with the appropriate number. The lines, as they appear in the image, contain:
16+
</p>
17+
<pre>
18+
1 Beginning of body contents. Start
19+
20+
2 of outer contents. Inner contents.
21+
22+
3 End of outer contents. End of body
23+
24+
4 contents.
25+
</pre>
26+
<p>
27+
The default text color is black. "Start of outer contents" is red. "Inner contents" is
28+
blue. "End of outer contents" is red.
29+
</p>
30+
<p><a href="../Overview.html#img-flow-generic">Return to image.</a></p>
31+
</body>
32+
</html>

‎css3-positioning/longdesc/flow-relative-desc.html‎

Lines changed: 36 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,36 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for relative flow example</title>
5+
</head>
6+
<body>
7+
<h1>Long description for relative flow example</h1>
8+
<p>This diagram illustrates the effects of relative positioning.</p>
9+
<p>
10+
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. The text of
11+
the "outer" box (at the end of line 1, halfway into line 2, and halfway into line 3) is
12+
shifted upward 12px. The text of the "inner" box, thought shifted upward as well, has
13+
been relatively positioned so that it lies in its normal flow position at the end of
14+
line 2.
15+
</p>
16+
<p>
17+
In the following PRE element, each 24 pixel line is simulated by two lines, the second
18+
beginning with the appropriate number. The lines, as they appear in the image, contain:
19+
</p>
20+
<pre>
21+
Start
22+
1 Beginning of body contents.
23+
24+
2 of outer contents.
25+
Inner contents.
26+
3
27+
End of outer contents.
28+
4 End of body
29+
30+
5 contents
31+
</pre>
32+
<p>
33+
The default text color is black. "Start of outer contents" is red. "Inner contents" is blue. "End of outer contents" is red.
34+
<p><a href="../Overview.html#img-flow-relative">Return to image.</a>
35+
</body>
36+
</html>

‎css3-positioning/longdesc/frame-desc.html‎

Lines changed: 20 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,20 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<title>Long description for frame layout example</title>
5+
</head>
6+
<body>
7+
<h1>Long description for frame layout example</h1>
8+
<p>This diagram illustrates a frame-like layout with 'position: fixed'.</p>
9+
<p>
10+
The illustration shows a four-panel frameset. The top panel ("header") covers the entire
11+
width of the frameset and takes up 15% of the vertical space. Below it on the left is
12+
the "sidebar", which is 10em wide; it's height is automatically calculated. To the right
13+
of the sidebar and below the header is the "main" area, whose dimensions are computed
14+
based on remaining available space. Finally, at the bottom, the "footer" area is 100px
15+
high and covers the entire width of the frameset.
16+
</p>
17+
<p>Each area is labeled and dimensions that are not 'auto' are indicated.</p>
18+
<p><a href="../Overview.html#img-frame">Return to image.</a></p>
19+
</body>
20+
</html>

0 commit comments

Comments
 (0)