Solutions to common HTML problems

From DPWiki
Jump to navigation Jump to search

This page describes general solutions to some common problems that Post Processors have when creating HTML versions of their projects. If you don't find a solution to your problem here, consider searching in these areas as well:

My tables are not centered in all browsers

Use this solution if you are using CSS to format your project, and tables do not center correctly in all browsers, especially in Internet Explorer.

Add the following code to the CSS section:

div.centered {text-align: center;}
div.centered table {margin-left: auto; margin-right: auto; text-align: left;}

Then format the tables like so:

<div class="centered"><table border="0" cellpadding="2" cellspacing="0" summary="Table of Contents">
 Your normal table code goes here

This solution provided by pourlean in this forum thread. Further information may be found the webpage

Reproducing Poetry Ellipsis

Occasionally a poem will have a row of dots indicating omitted lines, as in this example.

Example of poetry ellipsis

The proofers will typically render this as a thought-break, which on HTML conversion will become a horizontal rule. However, a rule is not the same, semantically, as an ellipsis: it indicates a break in logic or subject, while the ellipsis merely indicates some lines were omitted.

The typesetter's row of dots can be reproduced easily in HTML. The middle-dot (·) is a valid Latin-1 character and should be supported by any browser in any normal font. You enter a line of poetry that consists of a string of middle dots—and you use the CSS style letter-spacing:2em; to spread them out. You can either type the dots directly in the document (e.g. using the Guiguts Latin-1 palette) or you can code the HTML entity &middot; as here:

<div class="poem"><div class="stanza">
<span class="i0">"Vides, ut alta stet nive candida<br /></span>
<span class="i0">Soracte, nec iam sustineant onus<br /></span>
<span class="i2">Sylvae laborantes, geluque<br /></span>
<span class="i4">Flumina constiterint acuto?<br /></span>
<span class="i0" style="letter-spacing:2em;">&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;<br /></span>
<span class="i0">Quid sit futurum eras, fuge quaerere;<br /></span>
<span class="i0">Quam sors dierum cunque debit; lucro<br /></span>
<span class="i2">Appone."<br /></span>

It looks something like this:

"Vides, ut alta stet nive candid
Soracte, nec iam sustineant onus
    Sylvae laborantes, geluque
        Flumina constiterint acuto?
Quid sit futurum eras, fuge quaerere;

Big Brackets a.k.a. "Moustaches"

Sometimes an editor will use a large curly bracket to put a comment on some lines of poetry, as in this example.

Example of a big right curly bracket

There are several solutions to reproducing this. The basic method is: put the marginal text in a <div> floated right; and create the big bracket inside that <div> with another <div> floated left.

Using a Scaled-up Bracket Character

Code like the following will reproduce the above example:

<span class="i0">Secure from danger, but the nobler vein<br /></span>
<span class="i0">With loss of blood the bar doth often stain.<br /></span>

<div style='float:right;'>
    <div style='float:left;padding-right:4px;'>
        <p style='font-size:300%;font-weight:lighter;margin:0;line-height:1em;text-indent:0;'> } </p>
   <p style='margin:0.75em 0 0 0;line-height:1em;text-indent:0;'><span class='smcap'>Carmen</span></p>
   <p style='margin:0;line-height:1em;text-indent:0;'><span class='smcap'>Ciceronianum</span></p>

<span class="i0" style='letter-spacing:2em'>&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;<br /></span>
<span class="i0"><i>O fortunatam natam me Consule Romam</i>.<br /></span>
<span class="i0" style='letter-spacing:2em'>&middot;&middot;&middot;&middot;&middot;&middot;&middot;&middot;<br /></span>
<span class="i0">Had all been thus, thou might'st have scorn'd the sword<br /></span>

The annotation in its div precedes the lines it should overlap. That div has float:right so it will appear to the right of the following lines.

Within that div is another styled float:left. This contains a single paragraph containing a single "}" character. The styling of that paragraph includes:

  • font-size:300%; to size the bracket two lines high
  • font-weight:lighter; in a (vain) attempt to make the big bracket less chunky,
  • margin:0;line-height:1em;text-indent:0; all to override the usual attributes of a paragraph and make the big bracket occupy minimal space.

The left-floating div has padding-right:4px to make a little white space between the bracket and the note text. Following that is the note text itself. It could be in one paragraph, Carmen Ciceronianum, but I wanted it on two lines as in the original. Unfortunately within Guiguts-styled poetry, the <br> has no effect, so to get two lines you need two paragraphs. The first has margin:0.75em 0 0 0 to push the two of them down toward the midline of the bracket. The result resembles this:

Secure from danger, but the nobler vein
With loss of blood the bar doth often stain.



O fortunatam natam me Consule Romam.
Had all been thus, thou might'st have scorn'd the sword

A basic problem with a right-float is that it floats as far to the right as it can. If the reader has the browser window quite wide, the note will float far away from the end of the line. It moves in closer as the browser window is narrowed (try it!). I don't know any way to peg a block so it floats, say, "two em to the right of the end of this line." Feel free to alter this section if you know a solution!

ADDING TO SUPPLEMENT THIS IDEA - While doing a project that featured Legal Documents, I stumbled across a solution to the bracket floating away to the right - Here is what I did:

<div style="float: left;">
<p><span class="smcap">People of the State of California</span><br />
<span style="padding-left: 6.5em;"><i>vs.</i></span><br />
<span style="padding-left: 2.5em;"><span class="smcap">Bartholomew Graham.</span></span></p>
<p style="font-size: 400%; margin-bottom: 0;">}</p>

<p class="allcaps"><i>Statement and Dying Confession of Charles P. Gillson, taken in articulo
mortis by George Simpson, Notary Public.</i></p>

and what renders is something like this, EXCEPT that in my project it is correctly LINED UP; with the bracket nicely tucked up against the intended paragraph, and it is unaffected by either screen width or zoom. By floating the paragraph and then setting the bracket underneath in it's own paragraph it works much like a floating image.

People of the State of California
Bartholomew Graham.


Statement and Dying Confession of Charles P. Gillson, taken in articulo mortis by George Simpson, Notary Public.

Using Unicode Bracket-Parts

Sometimes the big curly bracket gets very tall and slender, as here:

A very tall and slender right curly bracket annotation

The same basic technique as above works here but if you make a default curly-bracket font-size 500%, as you would have to do to get the height, it becomes huge and fat, not slender as in the example. The Unicode set contains "bracket parts" that can be assembled to make curly bracket as tall you like:

  • &#9127; left curly bracket upper hook (⎧)
  • &#9128; left curly bracket middle (⎨)
  • &#9129; left curly bracket lower hook (⎩)
  • &#9130; curly bracket extension (⎪)
  • &#9131; right curly bracket upper hook (⎫)
  • &#9132; right curly bracket middle (⎬)
  • &#9133; right curly bracket lower hook (⎭)

Using these you can construct a left- or right-bracket as tall as needed. To reproduce the preceding example,

<span class="i0">Expect them grateful with the day.<br /></span>

<div style='float:right;width:9em;margin-top:0.5em;'>
    <div style='float:left;font-size:200%;padding-right:4px;'>
        <p style='margin:0;line-height:1em;text-indent:0;text-align:left;'>&#9131;</p>
        <p style='margin:0;line-height:1em;text-indent:0;text-align:left;'>&#9132;</p>
        <p style='margin:0;line-height:1em;text-indent:0;text-align:left;'>&#9133;</p>
   <p style='margin:2.5em 0 0 0;line-height:1em;text-indent:0;text-align:left;'>
       Job, c.38 v. 7

<span class="i0">So for that first draught of His hand,<br /></span>
<span class="i0">Which finish'd heav'n, and sea, and land,</span>
<span class="i0">The sons of God their thanks did bring,<br /></span>
<span class="i0">And all the morning stars did sing.<br /></span>
<span class="i0">Besides, as His part heretofore<br /></span>

Coming out something like this:

Expect them grateful with the day.

Job, c.38 v. 7

So for that first draught of His hand,

Which finish'd heav'n, and sea, and land,
The sons of God their thanks did bring,
And all the morning stars did sing.
Besides, as His part heretofore

However, not all fonts contain all Unicode glyphs, so that solution may not be acceptable.

Using an Image of a Bracket

Next solution: make an image of a bracket and use that. Open the page image containing the tall thin bracket in an image editor (Photoshop, The Gimp, almost anything). Crop down to just the bracket and save as images/big_left_ (or _right_) bracket.png. Invoke it in the floated div as an image.

Page-image files are often pretty crude, and a bracket made this way will likely be pixilated and blocky. A prettier bracket can be made in Photoshop. Use the Photoshop text palette to size and scale the bracket precisely, then use File > Save for Web to save it as a 4-bit png. Here are two such brackets:Big right bracket.png and Big left bracket.png

Here is an example where the annotation and bracket are on the left:

Annotation with big bracket on the left

Here we can contain all three parts in one div:

<p>"Received, April 1st, 1812, of Mr. John Murray, the sum
of one hundred pounds 15/8, being my entire half-share of
the profits of the 1st Edition of <i>Childe Harold's Pilgrimage</i> 4to.</p>

<div style="position:relative;width:25em;">
  <p style='text-align:right;text-indent:0;margin:0;'>R. C. DALLAS.</p>
  <p style="float:left;text-indent:0;margin-top:2em;">£101:15:8.</p>
  <img src="images/big_left_bracket.png" alt="big left bracket"
      style="float:left;height:75px;padding:0 1em 0 1em;" />
  <p style="text-align:left;text-indent:0;margin-top:0;">
    Mem.: This receipt is for the above sum,<br />
    in part of five hundred guineas agreed to<br />
    be paid by Mr. Murray for the Copyright<br />
    of <i>Childe Harold's Pilgrimage</i>."

The div contains two floated elements. First is the annotation "£101:15:8" as a paragraph styled with float:left.

Second is the img calling big_left_bracket.png from the images folder. This, too is styled float:left; it will pile up beside the annotation paragraph. Note the style height:75px in the img You can tell the browser to scale an image to any height. Tweak this number to make the bracket the height needed for the text.

Here is how it comes out, more or less:

"Received, April 1st, 1812, of Mr. John Murray, the sum of one hundred pounds 15/8, being my entire half-share of the profits of the 1st Edition of Childe Harold's Pilgrimage 4to.



Big left bracket.png

Mem.: This receipt is for the above sum,
in part of five hundred guineas agreed to
be paid by Mr. Murray for the Copyright
of Childe Harold's Pilgrimage."