- From: SVG Working Group repository <cam+svgwgrepo@mcc.id.au>
- Date: Sun, 09 Feb 2014 21:24:33 -0800
- To: public-svg-wg@w3.org
details: https://svgwg.org/hg/svg2/rev/6eabe9a93aea
branches:
changeset: 620:6eabe9a93aea
user: Cameron McCormack <cam@mcc.id.au>
date: Mon Feb 10 16:21:50 2014 +1100
description:
Port over improved bounding box wording from SVG Tiny 1.2.
diffstat:
master/coords.html | 155 +++++++++++++++++++++++++++++++++++-
master/definitions.xml | 9 +-
master/images/bbox01.png | 0
master/images/coords/bbox-calc.svg | 18 ++++
master/images/coords/bbox01.svg | 59 ++++++++++++++
master/intro.html | 21 +---
master/painting.html | 7 +-
master/style/default_svg.css | 2 +
8 files changed, 245 insertions(+), 26 deletions(-)
diffs (585 lines):
diff --git a/master/coords.html b/master/coords.html
--- a/master/coords.html
+++ b/master/coords.html
@@ -1030,20 +1030,145 @@ middle rectangle is set to 1% of the
case is .01*sqrt(4000*4000+2000*2000)/sqrt(2), or 31.62. The
bottom rectangle of the group illustrates what happens when
values specified in percentage units are scaled.</p>
<div class="ready-for-wg-review">
<h2 id="BoundingBoxes">Bounding boxes</h2>
-<p>The bounding box of an element is an axis-aligned rectangle in a given
-coordinate system that tightly contains certain parts of the element.
-The following algorithm describes how to compute the bounding box for a
-given element. The inputs to the algorithm are:</p>
+<p>The bounding box (or "bbox") of an element is the tightest fitting rectangle
+aligned with the axes of that element's user coordinate system that entirely
+encloses it and its descendants.</p>
+
+<p>Three kinds of bounding boxes can be computed for an element:</p>
+
+<ol>
+ <li>The <dfn id="TermObjectBoundingBox" data-dfn-type="dfn" data-export="">object bounding box</dfn> is the bounding box that contains only
+ an element's geometric shape. For <a>basic shapes</a>, this is the area
+ that is filled. Unless otherwise specified, this is what is meant by the
+ unqualified term "bounding box".</li>
+
+ <li>The <dfn id="TermStrokeBoundingBox" data-dfn-type="dfn" data-export="">stroke bounding box</dfn> is the bounding box that contains
+ an element's geometric shape and its <a>stroke shape</a>.</li>
+
+ <li>The <dfn id="TermDecoratedBoundingBox" data-dfn-type="dfn" data-export="">decorated bounding box</dfn> is the bounding box that contains
+ an element's geometric shape, its <a>stroke shape</a> and its <a>markers</a>.</li>
+</ol>
+
+<p class='note'>Note that the values of the <a>'opacity'</a>, <a>'visibility'</a>, <a>'fill'</a>,
+<a>'fill-opacity'</a>, <a>'fill-rule'</a>, <a>'stroke-dasharray'</a>
+and <a>'stroke-dashoffset'</a> properties on an element have no effect on the
+bounding box of an element.</p>
+
+<p>For curved shapes, the bounding box must enclose all portions of the shape
+along the edge, not just end points. Note that control points for a curve which
+are not defined as lying along the line of the resulting curve (e.g., the second
+coordinate pair of a Cubic Bézier command) must not contribute to the dimensions
+of the bounding box (though those points may fall within the area of the
+bounding box, if they lie within the shape itself, or along or close to the
+curve). For example, control points of a curve that are at a further distance
+than the curve edge, from the non-enclosing side of the curve edge, must be
+excluded from the bounding box.</p>
+
+<div class="figure">
+ <img src="images/coords/bbox01.svg"
+ alt="Image showing the object bounding box of a quadratic Bézier curve." />
+ <p class="caption">The path <span class='attr-value'>'M20,50 L35,100 H120 V50 Q70,10 20,50'</span>
+ is shown in light blue. On the left, a correct object bounding box of the path is
+ shown. Note that it does not include the top-most control point of the curve, but
+ it does include all of the blue shape, even the parts that lie outside of the convex hull
+ of the control points.</p>
+</div>
+
+<p>Even if an element is not in the rendering tree – due to it being
+<span class='prop-value'>'display: none'</span>, within a <a>'defs'</a>
+element, not usually rendered like a <a>'symbol'</a> element or not
+currently present in the document tree – it still has a bounding box.
+A call to <a href="types.html#__svg__SVGGraphicsElement__getBBox">getBBox</a>
+on the element will return the same rectangle as if the element were
+rendered. However, an element that is not in the rendering tree
+does not contribute to the bounding box of any ancestor element.</p>
+
+<div class='example'>
+ <p>The following example defines a number of elements. The <a>object bounding box</a>
+ for each element with an ID is shown below.</p>
+
+ <edit:includefile href='images/coords/bbox-calc.svg'/>
+
+ <table class='vert' summary="Bounding box results for different elements, depending on context.">
+ <thead>
+ <tr>
+ <th>Element ID</th>
+ <th>Bounding Box Result</th>
+ </tr>
+ </thead>
+ <tbody>
+ <tr>
+ <td>"<code>defs-1</code>"</td>
+ <td>{0, 0, 0, 0}</td>
+ </tr>
+ <tr>
+ <td>"<code>rect-1</code>"</td>
+ <td>{20, 20, 40, 40}</td>
+ </tr>
+ <tr>
+ <td>"<code>group-1</code>"</td>
+ <td>{30, 30, 40, 40}</td>
+ </tr>
+ <tr>
+ <td>"<code>use-1</code>"</td>
+ <td>{30, 30, 40, 40}</td>
+ </tr>
+ <tr>
+ <td>"<code>group-2</code>"</td>
+ <td>{10, 10, 100, 100}</td>
+ </tr>
+ <tr>
+ <td>"<code>rect-2</code>"</td>
+ <td>{10, 10, 100, 100}</td>
+ </tr>
+ </tbody>
+ </table>
+</div>
+
+<p>For <a>text content elements</a>, for the purposes of the bounding box
+calculation, each glyph must be treated as a separate graphics element.
+he calculations must assume that all glyphs occupy the full glyph cell.
+For example, for horizontal text, the calculations must assume that each glyph
+extends vertically to the full ascent and descent values for the font.
+An exception to this is when the <a>'text/width'</a> or <a>'text/height'</a>
+attribute has been specified on the <a>'text'</a> element, in which case the
+element's <a>content area</a> is its bounding box.</p>
+
+<p>Because declarative or scripted animation can change the shape, size, and
+position of an element, the bounding box is mutable. Thus, the bounding box
+for an element shall reflect the current values for the element at the snapshot
+in time at which the bounding box is requested, whether through a script call
+or as part of a declarative or linking syntax.</p>
+
+<p>Note that an element which has zero width, zero height, or both (such as a
+vertical or horizontal line, or a <a>'rect'</a> element with an unspecified
+<a>'rect/width'</a> or <a>'rect/height'</a>) still has a bounding box, with a
+positive value for the positive dimension, or with <span class='attr-value'>'0'</span>
+for both the width and height if no positive dimension is specified. Similarly,
+subpaths segments of a <a>'path'</a> element with zero width and height must be
+included in that element's geometry for the sake of the bounding box. Note also
+that elements whose DOM object does not derive from <a>SVGGraphicsElement</a>
+(such as gradient elements) do not have a bounding box, and thus have no
+interface to request a bounding box.</p>
+
+<p>Elements in the rendering tree which reference unresolved resources shall
+still have a bounding box, defined by the position and dimensions specified in
+their attributes, or by the <a>lacuna value</a> for those attributes if no
+values are supplied. For example, the element <code><use xlink:href="#bad" x="10" y="10"/></code>
+would have a bounding box with an x and y of 10 and a width and height of 0.</p>
+
+<p>The following algorithm defines how to compute a bounding box for a given
+element. The inputs to the algorithm are:</p>
<ul>
<li><var>element</var>, the element we are computing a bounding box for;</li>
<li><var>space</var>, a coordinate space in which the bounding box will be computed;</li>
<li><var>fill</var>, a boolean indicating whether the bounding box includes the geometry of the element and its descendants;</li>
<li><var>stroke</var>, a boolean indicating whether the bounding box includes the stroke of the element and its descendants;</li>
<li><var>markers</var>, a boolean indicating whether the bounding box includes the markers of the element and its descendants; and</li>
<li><var>clipped</var>, a boolean indicating whether the bounding box is affected by any clipping paths applied to the element and its descendants.</li>
@@ -1057,25 +1182,29 @@ given element. The inputs to the algori
<dt>a <a>shape</a></dt>
<dt>a <a>text content element</a></dt>
<dt>an <a>'a'</a> element within a <a>text content element</a></dt>
<dd>
<ol class="algorithm">
<li>Let <var>box</var> be a rectangle initialized to (0, 0, 0, 0).</li>
<li>Let <var>fill-shape</var> be the <a>equivalent path</a> of <var>element</var>
if it is a <a>shape</a>, or a shape that includes each of the glyph cells corresponding
- to the text within the elements otherwise.</li>
+ to the text within the elements otherwise.
+ <p class='issue'>Need to update this take into account <a>'text/width'</a> and <a>'text/height'</a>
+ on <a>'text'</a>.</p></li>
<li>If <var>fill</var> is true, then set <var>box</var> to the tightest rectangle
in the coordinate system <var>space</var> that contains <var>fill-shape</var>.
- <p class='issue'>We should say something about allowed approximations such as using the bounding
- box of a Bézier segment's control points.</p></li>
+ <p class='note'>The values of the <a>'fill'</a>, <a>'fill-opacity'</a> and <a>'fill-rule'</a>
+ properties do not affect <var>fill-shape</var>.</p></li>
<li>If <var>stroke</var> is true and the element's <a>'stroke'</a> is anything other than
<span class='prop-value'>none</span>, then set <var>box</var> to be the union of <var>box</var> and the
tightest rectangle in coordinate system <var>space</var> that contains the <a href="painting.html#StrokeShape">stroke shape</a> of the
- element, with the assumption that the element has no dash pattern.</li>
+ element, with the assumption that the element has no dash pattern.
+ <p class='note'>The values of the <a>'stroke-opacity'</a>, <a>'stroke-dasharray'</a>
+ and <a>'stroke-dashoffset'</a> do not affect the calculation of the stroke shape.</p></li>
<li>If <var>markers</var> is true, then for each marker <var>marker</var> rendered on the element:
<ol>
<li>For each descendant <a>graphics element</a> <var>child</var> of the <a>'marker element'</a> element
that defines <var>marker</var>'s content:
<ol>
<li>If <var>child</var> has an ancestor element within the <a>'marker element'</a> that is
<span class='prop-value'>'display: none'</span>, has a failing <a>conditional processing attribute</a>,
or is not an <a>'a'</a>, <a>'g'</a>, <a>'svg'</a> or <a>'switch'</a> element, then
@@ -1132,16 +1261,26 @@ given element. The inputs to the algori
<span class='attr-name'>'width'</span> and
<span class='attr-name'>'height'</span> attributes of the element.
<p class='issue'>This returns a bounding box even if <var>fill</var> is false. Is this what we want?</p>
</li>
</ol>
</dd>
</dl>
+<p>The <a>object bounding box</a>, <a>stroke bounding box</a> or <a>decorated bounding box</a>
+of an element is the result of invoking the bounding box computation algorithm
+above with the following arguments:
+<var>element</var> is the element itself;
+<var>space</var> is the element's user coordinate system;
+<var>fill</var> is true;
+<var>stroke</var> is true if we are computing the <a>stroke bounding box</a> or <a>decorated bounding box</a>, and false othwerise;
+<var>markers</var> is true if we are computing the <a>decorated bounding box</a>, and false otherwise; and
+<var>clipped</var> is false.</p>
+
</div>
<h2 id="ObjectBoundingBoxUnits">Object bounding box units</h2>
<p id="ObjectBoundingBox">The following elements offer the option of expressing
coordinate values and lengths as fractions (and, in some cases,
percentages) of the <a>bounding box</a>,
by setting a specified attribute to <span class="attr-value">'objectBoundingBox'</span>
diff --git a/master/definitions.xml b/master/definitions.xml
--- a/master/definitions.xml
+++ b/master/definitions.xml
@@ -1444,17 +1444,16 @@
<term name='non-local IRI references' href='intro.html#TermNonLocalIRIReference'/>
<!-- ... other, defined in intro.html ... -->
<term name='bounding box' href='intro.html#TermBoundingBox'/>
<term name='canvas' href='intro.html#TermCanvas'/>
<term name='current SVG document fragment' href='intro.html#TermCurrentSVGDocumentFragment'/>
<term name='CTM' href='intro.html#TermCTM'/>
<term name='current transformation matrix' href='intro.html#TermCurrentTransformationMatrix'/>
<term name='context element' href='intro.html#TermContextElement'/>
- <term name='decorated bounding box' href='intro.html#TermDecoratedBoundingBox'/>
<term name='font' href='intro.html#TermFont'/>
<term name='glyph' href='intro.html#TermGlyph'/>
<term name='glyphs' href='intro.html#TermGlyph'/>
<term name='hit-test' href='intro.html#TermHitTesting'/>
<term name='hit-testing' href='intro.html#TermHitTesting'/>
<term name='invalid' href='intro.html#TermInvalidValue'/>
<term name='invalid value' href='intro.html#TermInvalidValue'/>
<term name='lacuna value' href='intro.html#TermLacunaValue'/>
@@ -1493,28 +1492,36 @@
<term name='equivalent path' href='paths.html#TermEquivalentPath'/>
<term name='initial coordinate system' href='coords.html#InitialCoordinateSystem'/>
<term name='inherit' href='http://www.w3.org/TR/2008/REC-CSS2-20080411/cascade.html#value-def-inherit'/>
<term name='object bounding box units' href='coords.html#ObjectBoundingBoxUnits'/>
<term name='simple alpha compositing' href='masking.html#SimpleAlphaBlending'/>
<term name='Conforming Dynamic SVG Viewers' href='conform.html#ConformingDynamicSVGViewers'/>
<term name='Conforming Static SVG Viewers' href='conform.html#ConformingStaticSVGViewers'/>
+ <!-- ... defined in coords.html ... -->
+ <term name='object bounding box' href='coords.html#TermObjectBoundingBox'/>
+ <term name='stroke bounding box' href='coords.html#TermStrokeBoundingBox'/>
+ <term name='decorated bounding box' href='coords.html#TermDecoratedBoundingBox'/>
+
<!-- ... defined in painting.html ... -->
<term name='cap shape' href='painting.html#TermCapShape'/>
<term name='dash positions' href='painting.html#TermDashPositions'/>
<term name='line join shape' href='painting.html#TermLineJoinShape'/>
+ <term name='marker' href='painting.html#Markers'/>
+ <term name='markers' href='painting.html#Markers'/>
<term name='marker property' href='painting.html#TermMarkerProperties'/>
<term name='marker properties' href='painting.html#TermMarkerProperties'/>
<term name='positioned marker' href='painting.html#TermPositionedMarker'/>
<term name='positioned markers' href='painting.html#TermPositionedMarker'/>
<term name='repeating marker' href='painting.html#TermRepeatingMarker'/>
<term name='repeating markers' href='painting.html#TermRepeatingMarker'/>
<term name='segment marker' href='painting.html#TermSegmentMarker'/>
<term name='segment markers' href='painting.html#TermSegmentMarker'/>
+ <term name='stroke shape' href='painting.html#TermStrokeShape'/>
<term name='vertex marker' href='painting.html#TermVertexMarker'/>
<term name='vertex markers' href='painting.html#TermVertexMarker'/>
<!-- ... defined in text.html ... -->
<term name='current text position' href='text.html#CurrentTextPosition'/>
<!-- === defined in other specifications ================================ -->
diff --git a/master/images/bbox01.png b/master/images/bbox01.png
new file mode 100755
index 0000000000000000000000000000000000000000..b5aee5fea318e3e71a62bc51499928a7ba136698
GIT binary patch
literal 5427
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
diff --git a/master/images/coords/bbox-calc.svg b/master/images/coords/bbox-calc.svg
new file mode 100755
--- /dev/null
+++ b/master/images/coords/bbox-calc.svg
@@ -0,0 +1,18 @@
+<svg xmlns="http://www.w3.org/2000/svg"
+ xmlns:xlink="http://www.w3.org/1999/xlink">
+
+ <title>Bounding Box Calculation</title>
+ <desc>Examples of elements with different bounding box results based on context.</desc>
+
+ <defs id="defs-1">
+ <rect id="rect-1" x="20" y="20" width="40" height="40" fill="blue" />
+ </defs>
+
+ <g id="group-1">
+ <use id="use-1" xlink:href="#rect-1" x="10" y="10" />
+
+ <g id="group-2" display="none">
+ <rect id="rect-2" x="10" y="10" width="100" height="100" fill="red" />
+ </g>
+ </g>
+</svg>
diff --git a/master/images/coords/bbox01.svg b/master/images/coords/bbox01.svg
new file mode 100644
--- /dev/null
+++ b/master/images/coords/bbox01.svg
@@ -0,0 +1,59 @@
+<svg xmlns='http://www.w3.org/2000/svg'
+ xmlns:xlink='http://www.w3.org/1999/xlink'
+ version='1.1' width='380px' height='120px' viewBox='0 0 380 120'>
+
+ <title>Bounding Box of a Path</title>
+ <desc>
+ Illustration of one shape (a 'path' element with a quadratic Bézier) with
+ three bounding boxes, only one of which is correct.
+ </desc>
+
+ <style>
+ text { font: 12px sans-serif; }
+ rect { shape-rendering: optimizeSpeed; }
+ </style>
+
+ <defs>
+ <g id='shape'>
+ <line x1='120' y1='50' x2='70' y2='10' stroke='#888'/>
+ <line x1='20' y1='50' x2='70' y2='10' stroke='#888'/>
+ <path stroke-width='2' fill='rgb(173, 216, 230)' stroke='none' fill-rule='evenodd'
+ d='M20,50
+ L35,100
+ H120
+ V50
+ Q70,10 20,50'/>
+ <circle cx='120' cy='50' r='3' fill='none' stroke='#888'/>
+ <circle cx='20' cy='50' r='3' fill='none' stroke='#888'/>
+ <circle cx='70' cy='10' r='3' fill='#888' stroke='none'/>
+ </g>
+ </defs>
+
+ <g text-anchor='middle'>
+ <g>
+ <title>Correct Bounding Box</title>
+ <use xlink:href='#shape'/>
+ <rect x='20' y='30' width='100' height='70'
+ fill='none' stroke='green' stroke-dasharray='2' stroke-linecap='round'/>
+ <text x='70' y='115'>Correct</text>
+ </g>
+
+ <g transform='translate(120)'>
+ <title>Incorrect Bounding Box</title>
+ <desc>Bounding box does not encompass entire shape.</desc>
+ <use xlink:href='#shape'/>
+ <rect x='20' y='50' width='100' height='50'
+ fill='none' stroke='red' stroke-dasharray='2' stroke-linecap='round'/>
+ <text x='70' y='115'>Incorrect</text>
+ </g>
+
+ <g transform='translate(240)'>
+ <title>Incorrect Bounding Box</title>
+ <desc>Bounding box includes control points outside shape.</desc>
+ <use xlink:href='#shape'/>
+ <rect x='20' y='10' width='100' height='90'
+ fill='none' stroke='red' stroke-dasharray='2' stroke-linecap='round'/>
+ <text x='70' y='115'>Incorrect</text>
+ </g>
+ </g>
+</svg>
diff --git a/master/intro.html b/master/intro.html
--- a/master/intro.html
+++ b/master/intro.html
@@ -253,20 +253,25 @@ element and attribute categories and the
and WAI-ARIA <a href="http://www.w3.org/TR/wai-aria/states_and_properties">Supported States and Properties</a>.
The aria attributes are <edit:attributecategory name='aria'/>.</dd>
<dt id="TermBasicShapeElement">basic shape</dt>
<dt id="TermShapeElement">shape</dt>
<dd>A graphics element that is defined by some combination of
straight lines and curves. Specifically:
<edit:elementcategory name='shape'/>.</dd>
+
<dt id="TermBoundingBox"><dfn data-dfn-type="dfn" data-export id="bounding-box">bounding box</dfn></dt>
<dd>
- <p>A bounding bounding box is the tightest fitting rectangle aligned with the axes of that element's <a>user coordinate system</a> that entirely encloses it and its descendants.</p>
- <p class="issue">Add detailed defintion of bounding box from SVG 1.2 Tiny.</p>
+ <p>A bounding bounding box is the tightest fitting rectangle aligned with the axes of that element's <a>user coordinate system</a> that entirely encloses it and its descendants.
+ There are three kinds of bounding boxes that can be computed
+ for an element: the <a>object bounding box</a>, the <a>stroke bounding box</a>
+ and the <a>decorated bounding box</a>. See
+ <a href="coords.html#TermBoundingBoxes">Bounding boxes</a> for a more detailed
+ description of these bounding boxes and how they are computed.</p>
</dd>
<dt id="TermCanvas">canvas</dt>
<dd>A surface onto which graphics elements are drawn, which
can be real physical media such as a display or paper or an
abstract surface such as a allocated region of computer
memory. See the discussion of the <a
href="coords.html#SVGCanvas">SVG canvas</a> in the chapter on
@@ -342,22 +347,16 @@ element and attribute categories and the
from one coordinate system into another using a 3x3 matrix
using the equation <span class="code-fragment">[x' y' 1] = [x
y 1] * matrix</span>. The <em>current transformation
matrix</em> (CTM) defines the mapping from the user
coordinate system into the viewport coordinate system. See <a
href="coords.html#EstablishingANewUserSpace">Coordinate
system transformations</a>.</dd>
- <dt id="TermDecoratedBoundingBox">decorated bounding box</dt>
- <dd>
- <p class="issue">Need a definition, which can probably be ported over
- from SVG Tiny 1.2.</p>
- </dd>
-
<dt id="TermDescriptiveElement">descriptive element</dt>
<dd>An element which provides supplementary descriptive information about
its parent. Specifically, the following elements are descriptive elements:
<edit:elementcategory name='descriptive'/>.</dd>
<dt id="TermDocumentEventAttribute">document event attribute</dt>
<dd>A document event attribute is an <a>event attribute</a> that specifies
script to run for a particular document-wide event. See
@@ -564,22 +563,16 @@ element and attribute categories and the
<a>SVG context</a>.
See also <a>SVG document fragment</a>.</dd>
<dt id="TermStroke">stroke</dt>
<dd>The operation of <a>painting</a> the outline
of a <a>shape</a> or the outline of
character glyphs in a text string.</dd>
- <dt id="TermStrokeBoundingBox"><dfn data-dfn-type="dfn" data-export id="stroke-bounding-box">stroke bounding box</dfn></dt>
- <dd>
- <p>A stroke bounding box is the tightest fitting rectangle aligned with the axes of that element's <a>user coordinate system</a> that entirely encloses it and its descendants including eventual stroke styling under the absence of any specified stroke dashing.</p>
- <p>See also <a href="coords.html#EstablishingANewUserSpace">Coordinate system transformations</a>.</p>
- </dd>
-
<dt id="TermStructuralElement">structural element</dt>
<dd>The structural elements are those which define the primary
structure of an SVG document. Specifically, the following
elements are structural elements:
<edit:elementcategory name='structural'/>.</dd>
<dt id="TermStructurallyExternalElement">structurally external element</dt>
<dd>Elements that define its structure by reference to an external resource.
diff --git a/master/painting.html b/master/painting.html
--- a/master/painting.html
+++ b/master/painting.html
@@ -1138,19 +1138,20 @@ description of positions along a path th
</tr>
</table>
</div>
<p class="issue">Something in this section needs to reference
<a>'path/pathLength'</a> so that dash lengths are in the author's
path length space.</p>
-<p>The following algorithm describes what the shape of a
-<a>'path'</a> or <a>basic shape</a>'s stroke is, taking into account the
-stroking properties above:</p>
+<p>The <dfn id="TermStrokeShape">stroke shape</dfn> of an element is the
+shape that is filled by the <a>'stroke'</a> property. The following algorithm
+describes what the stroke shape of a <a>'path'</a> or <a>basic shape</a> is,
+taking into account the stroking properties above:</p>
<p class="issue">This should include text elements too, but should we
keep stroke dashing on text?</p>
<ol class="algorithm">
<li>Let <var>shape</var> be an empty shape.</li>
<li>Let <var>path</var> be the <a>equivalent path</a> of the element.</li>
<li>For each subpath of <var>path</var>:
diff --git a/master/style/default_svg.css b/master/style/default_svg.css
--- a/master/style/default_svg.css
+++ b/master/style/default_svg.css
@@ -453,8 +453,10 @@ table.graph > tbody > tr > td { padding-
margin-left: 2em;
}
.math var, .math sub, .math sup {
font-family: serif;
}
.separated {
word-spacing: 1em;
}
+
+.definitions > dt > dfn { font-style: normal; }
Received on Monday, 10 February 2014 05:24:58 UTC