[CSS21] WD 8.1 diagram: minor clarifications

It's a problem that the word "Border" appears very close to the
border-edge line, and that the border-edge line is thick: it tends to
make readers interpret the border-edge line as being the border itself
when looking quickly at the diagram.  (Certainly this has happened to
me.)

I append a version that moves the word "Border" to the vertical middle of
that region, and nudges a few things to align with each other or with the
pixel grid (i.e. avoiding antialiasing greyness/"fuzziness" at the edges
of lines).

I believe the file to be valid SVG {1.1,1.2} Tiny/Mobile in case that
makes it easier to publish the SVG itself in addition to just the
resulting png.

Note that this SVG includes an image object referring to the existing
boxdim.png file, and marked with display="none".  I've retained it just
in case it's useful to anyone before publishing, but of course this
image line should be simply removed from the file before publishing.


An issue that I haven't addressed is that it isn't clear whether
the four labels "Top", "Right", ... in the diagram are trying to denote
the region above (etc.) the box, or whether it's trying to show which
side of the border etc. is considered the top border edge.  They might
get misinterpreted as trying to show what the 'top' etc. properties refer
to.  I'd be inclined just to remove these four labels.
(In the SVG file, these are in a <g id="direction"> towards the bottom
of the file.)


pjrm.


<?xml version="1.0" encoding="UTF-8" standalone="no"?>
<!-- Created with Inkscape, vi and sed. -->
<svg
   xmlns:svg="http://www.w3.org/2000/svg"
   xmlns="http://www.w3.org/2000/svg"
   xmlns:xlink="http://www.w3.org/1999/xlink"
   width="455"
   height="340"
   version="1.1"
   font-family="Verdana, sans"
   >
  <image
     y="17"
     x="15"
     xlink:href="boxdim.png"
     height="317"
     width="433"
     display="none"
     opacity="0.3" />
  <g id="edges" fill="none" stroke="#000">
    <g id="margin-edge" stroke-width="3" stroke-dasharray="12, 3">
      <rect width="366" height="202" x="47.5" y="36.5" />
      <path d="m 174,268.5 40,0" />
    </g>
    <g id="border-edge" stroke-width="3">
      <rect width="301" height="150" x="79.5" y="62.5" />
      <path d="m 174,287.5 40,0" />
    </g>
    <g id="padding-edge" stroke-dasharray="12, 4">
      <rect width="255" height="102" x="102.5" y="86.5" />
      <path d="m 174,306.5 40,0" />
    </g>
    <g id="content-edge">
      <rect width="195" height="44" x="132.5" y="115.5" />
      <path d="m 174,325.5 40,0" />
    </g>
  </g>
  <g id="area-sides"
      font-size="12px" font-style="italic" font-weight="bold"
      text-align="center" text-anchor="middle">
    <text x="144" y="53" >TM</text>
    <text x="396" y="141" >RM</text>
    <text x="144" y="229" >BM</text>
    <text x="63" y="141" >LM</text>
    <text x="144" y="78" >TB</text>
    <text x="368" y="141" >RB</text>
    <text x="144" y="203" >BB</text>
    <text x="91" y="141" >LB</text>
    <text x="144" y="105" >TP</text>
    <text x="342" y="141" >RP</text>
    <text x="144" y="179" >BP</text>
    <text x="118" y="141" >LP</text>
  </g>
  <g id="direction" font-size="12px">
    <text x="134" y="29" >Top</text>
    <text x="419" y="141" >Right</text>
    <text x="135" y="252" >Bottom</text>
    <text x="18" y="141" >Left</text>
  </g>
  <g id="edge-legend" font-size="10px">
    <text x="227" y="272" >Margin edge</text>
    <text x="227" y="291" >Border edge</text>
    <text x="227" y="310" >Padding edge</text>
    <text x="227" y="329" >Content edge</text>
  </g>
  <g id="areas" font-size="12px" font-style="italic" font-weight="bold">
    <text x="208" y="53" >Margin (Transparent)</text>
    <text x="208" y="78" >Border</text>
    <text x="208" y="105" >Padding</text>
    <text x="208" y="141" >Content</text>
  </g>
</svg>

Received on Saturday, 8 January 2011 01:26:17 UTC