- From: Arron Eicholz via cvs-syncmail <cvsmail@w3.org>
- Date: Wed, 09 Nov 2011 23:00:00 +0000
- To: public-css-commits@w3.org
Update of /sources/public/csswg/css3-positioning/longdesc
In directory hutz:/tmp/cvs-serv23323
Added Files:
changebar-desc.html clip-desc.html flow-page-desc.html
flow-page-desc2.html
Log Message:
Adding longdesc for multiple images
--- NEW FILE: changebar-desc.html ---
<!DOCTYPE html>
<html>
<head>
<title>Long description for change bar example</title>
</head>
<body>
<h1>Long description for change bar example</h1>
<p>
This diagram illustrates the use of absolute positioning to create a changebar effect.
The changebar (represented by two hyphens in the image) appears in the 10px space to the
left of the paragraph.
</p>
<p>
The illustration shows a vertical line that represents the left edge of the paragraph's
containing block. The paragraph text (in black) is shifted 10px from this edge (shown in
the diagram). The change bars (two red hyphens) appear to the left of the word "THIS",
which begins the fourth line of text.
</p>
<p>
The following PRE element simulates the example. Vertical bars represent the left
containing block edge.
</p>
<pre>
| I used two red hyphens to serve
| as a change bar. They will "float"
| to the left of the line containing
| --THIS word.
</pre>
<p><a href="../../Overview.html#img-changebar">Return to image.</a>
</body>
</html>
--- NEW FILE: flow-page-desc.html ---
(This appears to be a binary file; contents omitted.)
--- NEW FILE: flow-page-desc2.html ---
<!DOCTYPE html>
<html>
<head>
<title>Long description illustrating page positioning with respect to the initial containing block</title>
</head>
<body>
<h1>Long description illustrating page positioning with respect to the initial containing block</h1>
<p>
This diagram illustrates the effects of page positioning a box with respect to the
initial containing block.
</p>
<p>
A document window is shown, with 8 lines (numbered 1 to 8), each 24px high. All body and
"outer" text has been flowed into lines into lines 1, 2, and 3. The "inner" box has been
positioned at "-100, 200" relative to the "0, 0" coordinates (the upper left corner of
the document window). Most of the "inner" box contents are therefore rendered outside
the document window.
</p>
<p>
In the following PRE element, each 24 pixel line is simulated by two lines, the second
beginning with the appropriate number. The text that is to the left of the line numbers
lies outside the initial containing block. The lines, as they appear in the image,
contain approximately:
</p>
<pre>
1 Beginning of body contents. [@]Start
2 of outer contents. End of outer
3 contents. End of body contents.
4
Inner 5
Conte 6 nts
7
8
</pre>
<p>
The default text color is black. "Start of outer contents" is red. The "nts" in "Inner
contents" is blue. "End of outer contents" is red.
</p>
<p><a href="../../Overview.html#img-flow-page2">Return to image.</a></p>
</body>
</html>
--- NEW FILE: clip-desc.html ---
<!DOCTYPE html>
<html>
<head>
<title>Long description for example of clipping region</title>
</head>
<body>
<h1>Long description for example clipping region</h1>
<p>
This diagram illustrates two block boxes, one above the other, with rectangular clipping
regions of different dimensions.
</p>
<p>
The block boxes (generated for a P element) are identical and depicted with a thick
black border and a gray background. A coordinate system has its origin at the upper left
corner of each block box. The x-axis increases along the top edge of the P box, the
y-axis down the left edge. Both axes depict increments of 5px.
</p>
<p>
The clipping region of the first P box lies entirely within it, offset 5px from the top
and left edges of the P box, and 10px from the right and bottom edges. The clipping
region has a thick dashed border and a white background and is labeled "clip region".
</p>
<p>
The clipping region of the second P box resembles that of the first in style and
position, except that the right edge is 5px to the right of the P box's right edge.
Thus, the clipping region lies partially outside the P box.
</p>
<p>
Both block boxes have four red arrows representing the four offsets in the corresponding
style rule: one short, vertical arrow labeled "top" goes from the top edge of the block
box to the top of the clipping region; one longer vertical arrow labeled "bottom" goes
from the top op the block box to the bottom of the clipping region; one short,
horizontal arrow labeled "left" goes from the left edge of the block to the left edge of
the clipping region; and one longer horizontal arrow labeled "right" goes from the left
edge of the block to the right edge of the clipping region.
</p>
<p><a href="../../Overview.html#img-clipping">Return to image.</a></p>
</body>
</html>
Received on Wednesday, 9 November 2011 23:00:02 UTC