[jsword-devel] Display formatting question
DM Smith
dmsmith555 at yahoo.com
Fri Apr 25 20:38:00 MST 2008
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.
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.
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
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.
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>
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.
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>
-------------- next part --------------
An HTML attachment was scrubbed...
URL: http://www.crosswire.org/pipermail/jsword-devel/attachments/20080425/5d0d91d5/attachment-0001.html
More information about the jsword-devel
mailing list