[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]
Subject: Re: Equation number on same line as equation contents
Stephen Langer <stephen.langer@nist.gov> writes:
> Yes, it works, more or less... (The "or less" part may be due to my
> not understanding css, but I hope it's not too far off-topic.) The
> space allocated for the equation title is too large, so it's not
> drawn in-line in many cases.
It'd help to have an example of one of the cases where it is not
drawn in-line. When I test with Firefox and Opera with the exact
HTML document and stylesheet fragment you posted, the equation
number/title is drawn in-line as expected, as far as I can see.
> Here's a distilled example...
>
> html file:
>
> <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
> <html>
> <head>
> <meta http-equiv="Content-Type" content="text/html;
> charset=utf-8" />
> <link rel="stylesheet" href="junk.css" type="text/css" />
> </head>
> <body>
> <div id="main">
> <p>
> <div class="equation">
> <p class="title"><b>(1.1)</b>
> <div class="equation-contents">
> <span class="mathphrase">
> x<sup>2</sup> + y<sup>2</sup> = z<sup>2</sup>
> </span>
> </div>
> </div>
> </p>
> <br class="equation-break"/>
> <p>
> This is a paragraph after an equation.
> </p>
> </div>
> </body>
> </html>
One thing I notice is that in your output, the
<div classe="equation-contents"> div is a child of the
<p class="title"> paragraph. Why is that? Have you made some
customization that is causing that to happen? Because with the
stock stylesheets, the you should instead be getting
<p class="title"><b>(1.1)</b></p> -- that is, with a closing </p>
tag on the same line as the title.
Another thing I wanted to note is that to get the equation title
rendered to the right of the equation, you are probably better off
using the using the formal.title.placement param to cause the title
div to be placed in your output after the equation-contents div.
http://docbook.sourceforge.net/snapshots/xsl/doc/html/formal.title.placement.html
So you should add the following to your customization layer:
<xsl:param name="formal.title.placement">
equation after
</xsl:param>
If you do that, then you can use "float: left" in both the
"equation .title" and ".equation-contents" CSS rules.
> I added colors to the .equation-contents and title so that I could
> see their actual sizes. What I see is that the equation number
> (title) takes up most of the width of the browser window, even if I
> add "width: 20%;" to its style.
When I test with the exact HTML document and stylesheet fragment
you posted, I see the same thing as you see (I think). But I don't
have a test case for causing the "not drawn in-line" problem you
describe.
Anyway, I think it may be a moot point if you use the
formal.title.placement param and use "float: left" on both the
equation title and the equeation contents.
> On the other hand, if I remove the "div#main p" style, the
> number's width goes back down to its natural width. I see the
> same behavior on Safari and Firefox.
Another thing I don't understand is where that "<div id=main>"
wrapper is coming from. What does it correspond to in your source
document? Or is the HTML file you posted just a hand-crafter test
document that's meant to emulate the output from the stylesheets?
Anyway, I think you document should work as expected with the
following CSS fragment.
.equation-contents {
float: left;
background-color: lightgray;
padding-right: 20px;
}
.equation .title {
margin-top: 0;
float: left;
background-color: pink
}
.equation-break {
clear: both;
}
div#main p {
width: 80%;
}
Given the following minimal DocBook instance:
<section id="main">
<title>Equation test</title>
<equation id="equation_example">
<title>Pythagorean Theorem</title>
<mathphrase>x<superscript>2</superscript> + y<superscript>2</superscript> = z<superscript>2</superscript></mathphrase>
</equation>
<para>This is a paragraph after an equation.</para>
</section>
If I take that and run it through the current snapshot (and then
through HTML Tidy to pretty-print it, I get the following output:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<meta name="generator" content=
"HTML Tidy for Linux/x86 (vers 12 April 2005), see www.w3.org">
<meta http-equiv="Content-Type" content=
"text/html; charset=us-ascii">
<title>Equation test</title>
<link rel="stylesheet" href="style.css" type="text/css">
<meta name="generator" content=
"DocBook XSL Stylesheets V1.70.0+pre">
</head>
<body bgcolor="white" text="black" link="#0000FF" vlink="#840084"
alink="#0000FF">
<div class="section" lang="en">
<div class="titlepage">
<div>
<div>
<h2 class="title" style="clear: both"><a name="main" id=
"main"></a>Equation test</h2>
</div>
</div>
<hr>
</div>
<div class="equation">
<a name="equation_example" id="equation_example"></a>
<div class="equation-contents">
<span class="mathphrase">x<sup>2</sup> + y<sup>2</sup> =
z<sup>2</sup></span>
</div>
<p class="title"><b>(1)</b></p>
</div><br class="equation-break">
<p>This is a paragraph after an equation.</p>
</div>
</body>
</html>
And as far as how it renders, see the attached image for a
screenshot I took using Firefox running on Linux. I tested it in
Opera also, and I get the same rendering.
--Mike
[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]
