<html><body style="word-wrap: break-word; -webkit-nbsp-mode: space; -webkit-line-break: after-white-space; "><br><div><div>On Apr 26, 2008, at 1:13 AM, Greg Hellings wrote:</div><br class="Apple-interchange-newline"><blockquote type="cite">On Fri, Apr 25, 2008 at 10:38 PM, DM Smith <<a href="mailto:dmsmith555@yahoo.com">dmsmith555@yahoo.com</a>> wrote:<br><blockquote type="cite"><br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">On Apr 25, 2008, at 9:28 PM, Greg Hellings wrote:<br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">I've been trying to figure this out... when I'm pulling up the text,<br></blockquote><blockquote type="cite">in the ESV module, in, say, Genesis 1, if I do it one verse at-a-time,<br></blockquote><blockquote type="cite">verses without footnotes (4 and 5 being the first examples) appear in<br></blockquote><blockquote type="cite">grayish text, while those with footnotes (1-3, etc) appear in black<br></blockquote><blockquote type="cite">text. However, when I select the whole chapter at one go, all the<br></blockquote><blockquote type="cite">verse text appears in standard black. I'm not going to pretend to<br></blockquote><blockquote type="cite">know how to change things to get it back to normal, but I'm guessing<br></blockquote><blockquote type="cite">it has to do with the XSL. The same thing happens with the KJV -<br></blockquote><blockquote type="cite">(except that now the sample four verses, Gen 1:1-4, are reversed).<br></blockquote><blockquote type="cite">Verses 1-3 appear as gray when selected individually while 4, with its<br></blockquote><blockquote type="cite">footnotes, appears in black. Selecting the whole chapter gives all<br></blockquote><blockquote type="cite">black text.<br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">Is this a feature or a bug (and if the latter is it in BD/JSword,<br></blockquote><blockquote type="cite">simple.xsl or in my web browser?).<br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">--Greg<br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">_______________________________________________<br></blockquote><blockquote type="cite">jsword-devel mailing list<br></blockquote><blockquote type="cite"><a href="mailto:jsword-devel@crosswire.org">jsword-devel@crosswire.org</a><br></blockquote><blockquote type="cite"><a href="http://www.crosswire.org/mailman/listinfo/jsword-devel">http://www..crosswire.org/mailman/listinfo/jsword-devel</a><br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">Greg,<br></blockquote><blockquote type="cite">Below are the generated HTML for Gen 1:3 and Gen 1:4. I got this by doing<br></blockquote><blockquote type="cite">CTRL-A in Firefox and then viewing selected source. Merely viewing the page<br></blockquote><blockquote type="cite">didn't show anything.<br></blockquote><br>Heh, I hadn't even thought of that trick. Safari wouldn't show me<br>anything other than the base HTML page to load the JS. Thanks for the<br>reminder (I've been spoiled with no right-click on the Mac, I forget<br>there are context menus sometimes).</blockquote><div><br></div>I do HTML development for work and the plugins for FireFox are a tremendous help. I find that targeting xhtml is easier to get to right.</div><div><br></div><div>(Interestingly, our target platform is IE only. But I find these tools too valuable to develop in anything but FireFox.)</div><div><br></div><div>(I'm seeing a movement to use non-standard attributes in new toolkits. I avoid them for that reason.)</div><div><br></div><div>I use the following plugins daily:</div><div>HTML Validator to validate generated content. (Use a vm, like Parallels or Fusion, to run it under Linux or Windows, as it is not available on the Mac) (I haven't tried Total Validator, but that is a Mac option)</div><div>Web Developer (Can do HTML validation, too, but I don't know if it will validate generated content.)</div><div>FireBug</div><div><br><blockquote type="cite"><br><br><blockquote type="cite"><br></blockquote><blockquote type="cite">I've formatted them so that they look good. I often do this kind of<br></blockquote><blockquote type="cite">formatting so that I can debug the webpage. It's a manual process but I find<br></blockquote><blockquote type="cite">it worth the effort.<br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">(Hopefully the formatting will survive our email agents. :)<br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">I think the problem is that it is not valid HTML. Here are some of the<br></blockquote><blockquote type="cite">problems/issues that I see:<br></blockquote><blockquote type="cite">1) The xslt should not output the CSS. It should be removed from simple.xsl<br></blockquote><blockquote type="cite">and put into an external css file that's linked in. This will improve<br></blockquote><blockquote type="cite">performance by keeping the page smaller.<br></blockquote><br>I had expurgated that from an earlier version of simple.xsl and hadn't<br>remembered to pull the extra html/head/style parts out. I've done<br>that now - good point.<br><br><blockquote type="cite">2) The location of the <base> element is wrong. This element is only needed<br></blockquote><blockquote type="cite">for modules containing images. For now, just remove it from simple.xsl<br></blockquote><br>I can't find any mention of <base> in simple.xsl - the only base<br>anything I find is the baseURL parameters, and I don't create any base<br>tags with the javascript that I can see. It doesn't seem to be<br>causing any damage, though, so I'll put that at a second-priority<br>elimination task.</blockquote><div><br></div>In simple.xsl it is found at the beginning of the template match="/":</div><div><br></div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "> <xsl:template match="/"></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "> <html dir="{$direction}"></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "> <head></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "> <base href="{$baseURL}"/></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "> <style type="text/css"></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><br></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><span class="Apple-style-span" style="font-family: Helvetica; font-size: 12px; ">Also note that you will need to detect whether the language is right-to-left and set dir appropriately, otherwise Hebrew, Farsi, Arabic and a few other of our modules won't render correctly.</span></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 11px/normal Monaco; "><font class="Apple-style-span" face="Helvetica" size="3"><span class="Apple-style-span" style="font-size: 12px;"><br></span></font></div><div><font class="Apple-style-span" face="Monaco" size="3"><span class="Apple-style-span" style="font-size: 11px;"><br></span></font></div><blockquote type="cite"><br><br><blockquote type="cite">3) There is a <link rel="stylesheet" type="text/css" href=""<br></blockquote><blockquote type="cite">title="styling"> after the embedded CSS. This was to allow the provided CSS<br></blockquote><blockquote type="cite">to be overridden. It too should be removed.<br></blockquote><br>I pulled that out too, after you mentioned number 1.<br><br><blockquote type="cite">4) The <table class="verse-text"> ....</table> is not actually a table. It<br></blockquote><blockquote type="cite">does not contain <tr> elements with <td> elements. I think you should<br></blockquote><blockquote type="cite">replace it with <div class="verse-text">...</div><br></blockquote><br>I initially tried to modify simple.xsl (my previous attempt, mentioned<br>above) to just spit out the <tr> and <td> elements, but I had erratic<br>success with the placement of the text on the page. Most of the GWT's<br>layout is done with tables, and I have found that div tags are<br>notoriously difficult to place correctly using CSS across multiple<br>browser support, while tables are much simpler.</blockquote><div><br></div>For IE to do CSS positioning correctly, it is important to have a DOCTYPE as the very first line of the generated output. Otherwise it goes into "quirks" mode and uses a different box model.</div><div>I find the following websites invaluable for understanding CSS Positioning:</div><div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; "><a href="http://www.csszengarden.com/">http://www.csszengarden.com/</a></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; "><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; "><a href="http://www.brainjar.com/css/positioning/">http://www.brainjar.com/css/positioning/</a></div><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; "><div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; font: normal normal normal 12px/normal Helvetica; "><a href="http://www.alistapart.com">http://www.alistapart.com</a></div></div></div></div><div><br></div><div><br><blockquote type="cite"> I'm using a GWT<br>widget that is supposed to model a vertical flow GUI panel onto which<br>widgets are being placed. I then create, inside of that, a basic HTML<br>table element and place into the table element, using innerHTML, the<br>output of simple.xsl.</blockquote><div><br></div>The problem I have with tables is that their generation fixes the layout. I am a proponent of separating styling and content, using the class attribute to indicate content and not styling. IMHO, CSS should be the place to define layout.</div><div><br></div><div><br><blockquote type="cite"><br><br>It seems like an error in simple.xsl that it fails to place any sort<br>of <table> <tr> wrapper around the verse if there is only text in it -<br>or is that my misunderstanding of what simple.xsl is trying to<br>accomplish? To wrap one set of output in a table and another set in<br>nothing seems a bit strange to me. However, I suppose if you're<br>planning to put the results into a div tag, it makes more sense.</blockquote><div><br></div>It is not an error in simple.xsl. Simple.xsl has BibleDesktop as it's only target. When used for another target it will need to be adapted. Here are some adaptations I think are good:</div><div>Change the output declaration to "xml"</div><div><br></div><div>Put the output of the template match="/" in a div and put an appropriate class on it. This merely replaces the <body> container that simple.xsl uses. Everything from <head> to </head> ought to be removed. And obviously the <html> and </html> are not needed.</div><div><br></div><div>Where <a href="..."> is output, change it to work with your system.</div><div><br></div><div>Don't use <font>, but rather <span>. Change the CSS to reflect that. Where <font> is used without an attribute, just eliminate it. Java doesn't support <span> so I merely used <font> for the same purpose.</div><div><br></div><div>For the abbr template, use <abbr>, which Java cannot handle.</div><div><br></div><div>Some of the styling is hard-coded in simple.xsl, such as transChange, these should be changed to indicate content with <span class="transChange"> if one doesn't care what kind of transChange or <span class="tcAdded">, if one does care.</div><div><br></div><div>If you are doing client side transformation, you'll need to eliminate the JSword extensions as the jar won't be available. This will make some of the output ugly. (e.g. Farsi/Arabic numbers won't be shaped properly, verse references titles in notes will show up as OSIS references.) But if you are doing server side, then leave it in and figure out how to make it work.</div><div><br></div><div>Finally, I'm frequently improving simple.xsl. For example, I'll be checking in some changes soon that will make it work well with TEI. To simplify your development, use a program that can do a three-way diff/merge. Emacs has a decent one. On Windows, I like Tortoise's merge tool. To make it work you'll need the most recent common ancestor of your work and mine. So keep a copy of the version of simple.xsl that you used as the basis of your changes. After each merge, mine will be the most recent ancestor.</div><div><br></div><div><br></div><div><blockquote type="cite"><br><br><blockquote type="cite"><br></blockquote><blockquote type="cite">As to the reason that the styling of Gen 1:3 and 4 are different, notice<br></blockquote><blockquote type="cite">that Gen 1:3 puts the content into a well-formed, valid table and the CSS<br></blockquote><blockquote type="cite">has styling for TD.text and TD.notes, which are used.<br></blockquote><blockquote type="cite"><br></blockquote><blockquote type="cite">Gen 1:4 on the other hand has the text in an invalid table. The<br></blockquote><blockquote type="cite">class="verse-text" is what governs the styling, but because the construction<br></blockquote><blockquote type="cite">is invalid, the browser is free to make it's best guess as to how it should<br></blockquote><blockquote type="cite">be rendered. I've found that FireFox will put everything that is in a table,<br></blockquote><blockquote type="cite">but not in <td> or <th> containers, and put it above the table and not apply<br></blockquote><blockquote type="cite">the styling of the table to the elements. I'm not sure what Safari does, but<br></blockquote><blockquote type="cite">it looks nearly identical.<br></blockquote><br>Very true, that's the root cause of the problem. It also answers a<br>pressing question I had been trying to figure out as to why my tables<br>were not positioning the text properly in some cases. I had the text<br>just jammed up at the top of the page underneath of the buttons.<br>However, I stripped off the extra <table ...> tag that you had wrapped<br>around the text/notes portions of the template and added an extra <tr><br><td> ... </td> </tr> around the last <xsl:apply-templates /> in the /<br>template. That has solved the text display problem. Why the text<br>still insists on displaying itself underneath of the buttons along the<br>top, without an absolute positioning in the CSS, I have no idea.</blockquote><div><br></div>I'm not sure exactly what you are referring to. So the best I can do is review your layout and make comment on that.</div><div><br></div><div>The page you create has a table of two rows. Each row has one cell.</div><div><br></div><div>The content of the first row is a table with the two buttons.</div><div><br></div><div>The content of the second row is the output of simple.xsl.</div><div><br></div><div>Therefore, the placement of the second row is relative to the first and the styling of the two rows and their cells is what governs how they are padded, spaced, aligned and so forth.</div><div><br></div><div>On the table that contains these two rows you have class="text". I didn't look in the CSS to see what this is defined as, but it probably is not appropriate for the first row. I think that it may be more appropriate to put the attribute on the second row. Maybe an attribute class="navbuttons" on the first.</div><div><br></div><div>Also, you have vertical-align="top" for the first row's cell and vertical-align="bottom" for the second row's cell. Since each row merely consists of a single cell, these are meaningless unless you style the cell to be taller than their content, using the height attribute. If they are of value, I find that it is a bit more compact to set the attribute on the row rather than the cells.</div><div><br></div><div><br><blockquote type="cite"><br>However, it appears to me that it's now well-formed and valid HTML<br>(with the possible exception of table-in-table... I haven't read the<br>HTML spec closely enough to know if I can put a table inside of a<br><td>, but I believe I can).</blockquote><br></div><div>Yes, it is allowed. Pretty much anything can be in a <td> or a <tr>.</div><div><br></div><div><br></div><div>Hope this helps.</div><div><br></div><div>Keep up the great work!</div><div><br></div><div>In Him,</div><div><span class="Apple-tab-span" style="white-space:pre"> </span>DM<br></div></body></html>