[jsword-devel] Display formatting question
Greg Hellings
greg.hellings at gmail.com
Fri Apr 25 22:13:55 MST 2008
On Fri, Apr 25, 2008 at 10:38 PM, DM Smith <dmsmith555 at yahoo.com> wrote:
>
>
>
> On Apr 25, 2008, at 9:28 PM, Greg Hellings wrote:
>
>
> I've been trying to figure this out... when I'm pulling up the text,
> in the ESV module, in, say, Genesis 1, if I do it one verse at-a-time,
> verses without footnotes (4 and 5 being the first examples) appear in
> grayish text, while those with footnotes (1-3, etc) appear in black
> text. However, when I select the whole chapter at one go, all the
> verse text appears in standard black. I'm not going to pretend to
> know how to change things to get it back to normal, but I'm guessing
> it has to do with the XSL. The same thing happens with the KJV -
> (except that now the sample four verses, Gen 1:1-4, are reversed).
> Verses 1-3 appear as gray when selected individually while 4, with its
> footnotes, appears in black. Selecting the whole chapter gives all
> black text.
>
> Is this a feature or a bug (and if the latter is it in BD/JSword,
> simple.xsl or in my web browser?).
>
> --Greg
>
> _______________________________________________
> jsword-devel mailing list
> jsword-devel at crosswire.org
> http://www.crosswire.org/mailman/listinfo/jsword-devel
>
> Greg,
> Below are the generated HTML for Gen 1:3 and Gen 1:4. I got this by doing
> CTRL-A in Firefox and then viewing selected source. Merely viewing the page
> didn't show anything.
Heh, I hadn't even thought of that trick. Safari wouldn't show me
anything other than the base HTML page to load the JS. Thanks for the
reminder (I've been spoiled with no right-click on the Mac, I forget
there are context menus sometimes).
>
> I've formatted them so that they look good. I often do this kind of
> formatting so that I can debug the webpage. It's a manual process but I find
> it worth the effort.
>
> (Hopefully the formatting will survive our email agents. :)
>
> I think the problem is that it is not valid HTML. Here are some of the
> problems/issues that I see:
> 1) The xslt should not output the CSS. It should be removed from simple.xsl
> and put into an external css file that's linked in. This will improve
> performance by keeping the page smaller.
I had expurgated that from an earlier version of simple.xsl and hadn't
remembered to pull the extra html/head/style parts out. I've done
that now - good point.
> 2) The location of the <base> element is wrong. This element is only needed
> for modules containing images. For now, just remove it from simple.xsl
I can't find any mention of <base> in simple.xsl - the only base
anything I find is the baseURL parameters, and I don't create any base
tags with the javascript that I can see. It doesn't seem to be
causing any damage, though, so I'll put that at a second-priority
elimination task.
> 3) There is a <link rel="stylesheet" type="text/css" href=""
> title="styling"> after the embedded CSS. This was to allow the provided CSS
> to be overridden. It too should be removed.
I pulled that out too, after you mentioned number 1.
> 4) The <table class="verse-text"> ....</table> is not actually a table. It
> does not contain <tr> elements with <td> elements. I think you should
> replace it with <div class="verse-text">...</div>
I initially tried to modify simple.xsl (my previous attempt, mentioned
above) to just spit out the <tr> and <td> elements, but I had erratic
success with the placement of the text on the page. Most of the GWT's
layout is done with tables, and I have found that div tags are
notoriously difficult to place correctly using CSS across multiple
browser support, while tables are much simpler. I'm using a GWT
widget that is supposed to model a vertical flow GUI panel onto which
widgets are being placed. I then create, inside of that, a basic HTML
table element and place into the table element, using innerHTML, the
output of simple.xsl.
It seems like an error in simple.xsl that it fails to place any sort
of <table> <tr> wrapper around the verse if there is only text in it -
or is that my misunderstanding of what simple.xsl is trying to
accomplish? To wrap one set of output in a table and another set in
nothing seems a bit strange to me. However, I suppose if you're
planning to put the results into a div tag, it makes more sense.
>
> As to the reason that the styling of Gen 1:3 and 4 are different, notice
> that Gen 1:3 puts the content into a well-formed, valid table and the CSS
> has styling for TD.text and TD.notes, which are used.
>
> Gen 1:4 on the other hand has the text in an invalid table. The
> class="verse-text" is what governs the styling, but because the construction
> is invalid, the browser is free to make it's best guess as to how it should
> be rendered. I've found that FireFox will put everything that is in a table,
> but not in <td> or <th> containers, and put it above the table and not apply
> the styling of the table to the elements. I'm not sure what Safari does, but
> it looks nearly identical.
Very true, that's the root cause of the problem. It also answers a
pressing question I had been trying to figure out as to why my tables
were not positioning the text properly in some cases. I had the text
just jammed up at the top of the page underneath of the buttons.
However, I stripped off the extra <table ...> tag that you had wrapped
around the text/notes portions of the template and added an extra <tr>
<td> ... </td> </tr> around the last <xsl:apply-templates /> in the /
template. That has solved the text display problem. Why the text
still insists on displaying itself underneath of the buttons along the
top, without an absolute positioning in the CSS, I have no idea.
However, it appears to me that it's now well-formed and valid HTML
(with the possible exception of table-in-table... I haven't read the
HTML spec closely enough to know if I can put a table inside of a
<td>, but I believe I can).
Thanks for the help!
--Greg
>
> Since you are going to stack the text and the notes, I'd recommend not using
> tables at all, but use <div> instead. I'd have used them for BibleDesktop,
> even for side-by-side, but Java's HtmlEditorKit barely does CSS 1 and
> definitely does not do CSS positioning.
>
> Hope that helps.
>
> In Him,
> DM Smith
>
>
> Here is Gen 1:3
>
> <html>
> <head>
> <title>Wrapper HTML for WebInterface</title>
> <style>
> body,td,a,div,.p{font-family:arial,sans-serif}
> div,td{color:#000000}
> a:link,.w,.w a:link{color:#0000cc}
> a:visited{color:#551a8b}
> a:active{color:#ff0000}
> </style>
> <meta name="viewport" content="width=320; initial-scale=1.0;
> maximum-scale=1.0; user-scalable=0;">
> <script language="javascript"
> src="org.crosswire.jsword.gwtweb.WebInterface.nocache.js"></script>
> <link rel="stylesheet"
> href="http://hellings.is-a-geek.com:8080/jsword-gwtweb/WebInterface.css">
> <script>org_crosswire_jsword_gwtweb_WebInterface.onInjectionDone('org.crosswire.jsword.gwtweb.WebInterface')</script>
> </head>
> <body>
> <iframe src="javascript:''" id="__gwt_historyFrame" style="border: 0pt none
> ; width: 0pt; height: 0pt;"></iframe>
> <iframe style="border: medium none ; position: absolute; width: 0pt; height:
> 0pt;"
> id="org.crosswire.jsword.gwtweb.WebInterface"
>
> src="http://hellings.is-a-geek.com:8080/jsword-gwtweb/3041DEE507FEE2B01A81345A9F25F57B.cache.html"></iframe>
> <table class="text" cellpadding="0" cellspacing="0">
> <tbody>
> <tr>
> <td style="vertical-align: top;" align="left">
> <table cellpadding="0" cellspacing="0">
> <tbody>
> <tr>
> <td style="vertical-align: top;" align="left">
> <button class="leftButton" type="button">Verses</button>
> </td>
> <td style="vertical-align: top;" align="left">
> <button class="centerButton" type="button">Enter
> reference</button>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
> </tr>
> <tr>
> <td style="vertical-align: bottom;" align="left">
> <table class="verse-text">
> <base href="">
> <style type="text/css">
> BODY { font-family: ''; font-size: 16pt; }
> A { text-decoration: none; }
> A.strongs { color: black; text-decoration: none; }
> SUB.strongs { font-size: 75%; color: red; }
> SUB.morph { font-size: 75%; color: blue; }
> SUB.lemma { font-size: 75%; color: red; }
> SUP.verse { font-size: 75%; color: gray; }
> SUP.note { font-size: 75%; color: green; }
> FONT.jesus { color: red; }
> FONT.speech { color: blue; }
> FONT.strike { text-decoration: line-through; }
> FONT.small-caps { font-variant: small-caps; }
> FONT.inscription { font-weight: bold; font-variant: small-caps;
> }
> FONT.divineName { font-variant: small-caps; }
> FONT.normal { font-variant: normal; }
> FONT.caps { text-transform: uppercase; }
> H1.level { text-align: center; font-size: 115%; color: #000000;
> }
> H2.level { text-align: center; font-size: 110%; color: #000000;
> }
> H3.level { text-align: center; font-size: 100%; }
> H4.level { text-align: center; font-size: 90%; }
> H5.level { text-align: center; font-size: 85%; }
> H6.level { text-align: center; font-size: 80%; }
> H3.heading { font-size: 110%; color: #666699; font-weight: bold;
> }
> H2.heading { font-size: 115%; color: #669966; font-weight: bold;
> }
> div.margin { font-size:90%; }
> TD.notes { width:20%; background:#f4f4e8; }
> TD.text { width:80%; }
> </style>
> <link rel="stylesheet" type="text/css" href="" title="styling">
> <table cellpadding="5" cellspacing="5" cols="2">
> <tbody>
> <tr>
> <td class="text" valign="top">
> <h3 class="heading">The Six Days of Creation</h3>
> <a name="Gen.1.3">
> <sup class="verse">3</sup>
> </a>
> And God said,
> <sup class="note">
> <a href="#note-N65547">c</a>
> </sup>
> "Let there be light," and there was light.
> </td>
> </tr>
> <tr>
> <td class="notes" valign="top">
> <p> </p>
> <a href="#Gen.1.3">Genesis 1:3</a>
> <div class="margin">
> <strong>c</strong>
> <a name="note-N65547"> </a>
> <a href="bible://2Cor.4.6">2 Cor. 4:6</a>
> </div>
> <div> </div>
> </td>
> </tr>
> </tbody>
> </table>
> </table>
> </td>
> </tr>
> </tbody>
> </table>
> </body>
> </html>
>
> Here is Gen 1:4
>
> <html>
> <head>
> <title>Wrapper HTML for WebInterface</title>
> <style>
> body,td,a,div,.p{font-family:arial,sans-serif}
> div,td{color:#000000}
> a:link,.w,.w a:link{color:#0000cc}
> a:visited{color:#551a8b}
> a:active{color:#ff0000}
> </style>
>
> <meta name="viewport" content="width=320; initial-scale=1.0;
> maximum-scale=1.0; user-scalable=0;">
>
> <script language="javascript"
> src="org.crosswire.jsword.gwtweb.WebInterface.nocache.js"></script>
>
> <link rel="stylesheet"
> href="http://hellings.is-a-geek.com:8080/jsword-gwtweb/WebInterface.css">
>
> <script>org_crosswire_jsword_gwtweb_WebInterface.onInjectionDone('org.crosswire.jsword.gwtweb.WebInterface')</script>
>
> </head>
>
> <body>
> <iframe src="javascript:''" id="__gwt_historyFrame" style="border: 0pt none
> ; width: 0pt; height: 0pt;"></iframe>
> <iframe style="border: medium none ; position: absolute; width: 0pt; height:
> 0pt;"
> id="org.crosswire.jsword.gwtweb.WebInterface"
>
> src="http://hellings.is-a-geek.com:8080/jsword-gwtweb/3041DEE507FEE2B01A81345A9F25F57B.cache.html"></iframe>
> <table class="text" cellpadding="0" cellspacing="0">
> <tbody>
> <tr>
> <td style="vertical-align: top;" align="left">
> <table cellpadding="0" cellspacing="0">
> <tbody>
> <tr>
> <td style="vertical-align: top;" align="left">
> <button class="leftButton" type="button">Verses</button>
> </td>
> <td style="vertical-align: top;" align="left">
> <button class="centerButton" type="button">Enter
> reference</button>
> </td>
> </tr>
> </tbody>
> </table>
> </td>
> </tr>
> <tr>
> <td style="vertical-align: bottom;" align="left">
> <table class="verse-text">
> <base href="">
> <style type="text/css">
> BODY { font-family: ''; font-size: 16pt; }
> A { text-decoration: none; }
> A.strongs { color: black; text-decoration: none; }
> SUB.strongs { font-size: 75%; color: red; }
> SUB.morph { font-size: 75%; color: blue; }
> SUB.lemma { font-size: 75%; color: red; }
> SUP.verse { font-size: 75%; color: gray; }
> SUP.note { font-size: 75%; color: green; }
> FONT.jesus { color: red; }
> FONT.speech { color: blue; }
> FONT.strike { text-decoration: line-through; }
> FONT.small-caps { font-variant: small-caps; }
> FONT.inscription { font-weight: bold; font-variant: small-caps;
> }
> FONT.divineName { font-variant: small-caps; }
> FONT.normal { font-variant: normal; }
> FONT.caps { text-transform: uppercase; }
> H1.level { text-align: center; font-size: 115%; color: #000000;
> }
> H2.level { text-align: center; font-size: 110%; color: #000000;
> }
> H3.level { text-align: center; font-size: 100%; }
> H4.level { text-align: center; font-size: 90%; }
> H5.level { text-align: center; font-size: 85%; }
> H6.level { text-align: center; font-size: 80%; }
> H3.heading { font-size: 110%; color: #666699; font-weight: bold;
> }
> H2.heading { font-size: 115%; color: #669966; font-weight: bold;
> }
> div.margin { font-size:90%; }
> TD.notes { width:20%; background:#f4f4e8; }
> TD.text { width:80%; }
> </style>
> <link rel="stylesheet" type="text/css" href="" title="styling">
> <a name="Gen.1.4">
> <sup class="verse">4</sup>
> </a>
> And God saw that the light was good. And God separated the light
> from the darkness.
> </table>
> </td>
> </tr>
> </tbody>
> </table>
> </body>
> </html>
> _______________________________________________
> jsword-devel mailing list
> jsword-devel at crosswire.org
> http://www.crosswire.org/mailman/listinfo/jsword-devel
>
>
More information about the jsword-devel
mailing list