I'm using XSL-FO with Antennahouse FO formatter.
How do I make the fo:caption in a fo:table-and-caption element run only as wide as the fo:table does?
Essentially, I am looking for the FO equivalent of this HTML:
<?xml version="1.0"?>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Image with Caption – CENTERED</title>
</head>
<body>
<div style="border:2px solid blue;">
<table style="border:1px solid green; margin-left:auto; margin-right:auto;">
<caption style="caption-side:bottom; text-align:left; border:1px solid red;"><p style="font-size:9pt;">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</p></caption>
<tr>
<td><p><- The table runs only this wide. -></p></td>
</tr>
</table>
</div>
<p>BLUE = wrapper-DIV</p>
<p>GREEN = table</p>
<p>RED = caption</p>
</body>
</html>
which looks like this:
The XSL-FO code I have is this:
<?xml version="1.0" encoding="UTF-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format">
<fo:layout-master-set>
<fo:simple-page-master margin-bottom="58px" margin-left="120px" margin-right="120px" margin-top="50px" master-name="content-page" page-height="11in" page-width="8.5in">
<fo:region-body margin-bottom="44px" margin-top="50px" region-name="xsl-region-body" />
</fo:simple-page-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="content-page">
<fo:flow flow-name="xsl-region-body">
<fo:block>
<fo:table-and-caption border="2px solid blue" text-align="center">
<fo:table-caption border="1px solid red" caption-side="bottom">
<fo:block font-size="8pt" text-align="left">Sourceline (left edge should match up with table's left edge, and line breaking should occur at right edge of table)</fo:block>
</fo:table-caption>
<fo:table border="1px solid green">
<fo:table-column/>
<fo:table-body>
<fo:table-row>
<fo:table-cell>
<fo:block><- The table runs only this wide. -></fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:table-and-caption>
</fo:block>
<fo:block>BLUE = fo:table-and-caption</fo:block>
<fo:block>GREEN = fo:table</fo:block>
<fo:block>RED = fo:caption</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
which renders like this:
How do I force (in XSL-FO) the table caption to only run as wide as the table (which might be arbitrarily complex, including e.g. fo:table-footer and table borders on table or cells), and start at the left edge of its associated table (like in the HTML rendering)?
Related
I have been trying to make an org chart using the code from this example http://www.getorgchart.com/Demos/Initialize-From-HTML-Table
I am making my table dynamically from xml data (planning to do this for many different xml files so thats why I haven't hardcoded the table). The result does not look right and I'm not sure whats going wrong. I suspect that maybe its trying to make the org chart before my table is made. I have no console errors and I get a plain blue screen with the search bar and arrows when I try to run everything.
Here is my html code:
https://pastebin.com/6b1d0gEC
<body onload="getXML()">
<div id = "conditions"></div>
<div style="float: right; width: 10%; height:100%; text-align:center; display: none;" ></div>
<table id="orgChartData" >
<tr>
<th>title</th>
</tr>
<tr>
Here is my JS code
https://pastebin.com/c7fFerqH
Here is the XML im using to generate the table
https://pastebin.com/0k3xQ5Th
I have a small DropDownList with 3 options .
Problem is when I select , let's say , 2nd option .
No probs , a new page is opened .
If I click on option 1 or 3 , no probs .
However , if I click on 2nd option again , instead of clicking on 1 or 2 , no new page is opened .
Is there a way to correct this , so that clicking on whatever always opens a new window .
Thanks...Vern
SORRY I COULDN'T GET THE "CODE" OR "HTML" TO WORK .
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>myFavs-HtmlProbs.html</title>
<meta name="Generator" content="PureBasic">
<meta name="Description" content="Your description here...">
<meta name="Description" content="...Created by myFavs % PureBasic...">
<style type="text/css">
</style>
</head>
<body text="#000000" style="background-color:#A69E80; text-align:center;">
<br> <br> <br>
<!--dd <div style=-->
<table width="100%" border="0" style="text-align:center" cellspacing="0" cellpadding="0">
<tr style="text-align:center">
<!-- EXAMPLE: <MenuName="aaMost-Used"> --> <!-- rgb(250,240,255) -->
<select style="width:200px; font:14px Arial Black; color:rgb(0,0,0); background-color:rgb(231,169,126);" name="menu" onchange="window.open(this.value)">
<option selected="0" value="">aaMost-Used</option>
<option value="http://alternativeto.net/">AlternativeToSoftwares</option>
<option value="https://www.biblegateway.com/reading-plans/chronological/today?version=NLT">One Year Chronological Bible NLT</option>
<option value="http://www.portablefreeware.com/">portablefreeware.com/</option>
</select></td></tr></table><br></body></html>
Just add this attribute to your select tag
onfocus="this.selectedIndex=0;"
It will change the option to the default option each time after you select one, in your case
aaMost-Used and hence you can then select your required next option again.
When you click on an option more than once, it does not open the page because the option is already selected, and no change occurs. Therefore, onchange isn't fired.
You can actually open a link twice by opening that link, opening another (deselects first) and then clicking on the first link again.
But here's the fix.
Change onchange="window.open(this.value)" to onclick="window.open(this.value)" (onchange to onclick).
That way, the link will be opened whenever an option is clicked, rather than when it changes.
JSFiddle: https://jsfiddle.net/SanPilot/mqqh5u73/1/
I haven't used DW for a while, excuse my beginners question.
I have created a table with 2 rows & 1 column within HTML. I have inserted an image in to the top row and one image in to the bottom row.
With border, cell padding and cell spacing set to 0, I cannot figure out why I see pixel padding/spacing at the bottom of each cell. I have changed the background colour of the cells in the table to red so that its easy to show the padding.
Changing the vertical alignment for the cells does not change the issue.
I haven't created CSS page for this.
From what I recall in my previous experience with DW padding and spacing was quite simple when creating a basic table in HTML, so not sure where I am going wrong.
Any help would be much appreciated on where I am going wrong here.
Link to the resulting output when i preview the code in safari and/or chrome
https://dl.dropboxusercontent.com/u/13258883/DW.png
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<title>Untitled Document</title>
</head>
<body>
<table width="512" border="0" cellpadding="0" cellspacing="0" >
<tbody>
<tr>
<td colspan="2" bgcolor="#F50408"><img src="images/Untitled-10_01.gif" width="512" height="107" alt=""/></td>
</tr>
<tr>
<td colspan="2" bgcolor="#F50408"><img src="images/Untitled-10_02.gif" width="512" height="93" alt=""/></td>
</tr>
</tbody>
</table>
</body>
</html>
found the answer i add the following code in to the head
<style>
img {
display:block;
}
</style>
I have -
<p>some text as 'intro'</p>
<h1>Big Text</h1>
<p>some text as 'outro'</p>
I have this set out on a background image, I have styled margins and fitted the text inside properly, but I want to bunch up ALL text so there is little gap - line-height would ruin it and I have tried seperate div tags but no luck - what is the best chosen css method for this?
Thanks!
If you require the use of those elements you could use negative margins:
<p>some text as 'intro'</p>
<h1 style="margin: -15px 0 -15px">Big Text</h1>
<p>some text as 'outro'</p>
A better way is probably to separate the different lines by line breaks and to style the 'header' line, like so:
<p>some text as 'intro'<br />
<span style="font-size: 200%; font-weight: bold;">Big Text</span><br />
some text as 'outro'</p>
I would like to render two numbers on a web page like this:
123
+ 456
______
I've found this example:
<mstack>
<mn>496</mn>
<msrow> <mo>+</mo> <none/> <mn>28</mn> </msrow>
<msline/>
</mstack>
but MathJax doesn't support mstack, msrow and msline elements.I've attempted to use a mtable
<body>
<math xmlns="http://www.w3.org/1998/Math/MathML">
<mtable id="test" columnalign="right">
<mtr><mtd></mtd><mtd><mn>12321</mn></mtd></mtr>
<mtr><mtd><mo>+</mo></mtd><mtd><mn>45665445</mn></mtd></mtr>
</mtable>
</math>
</body>
with this CSS:
<style type="text/css">
#test
{
border-bottom:1px solid black;
}
</style>
but the bottom border is overlapping the lower number. Is there a way to achieve this layout with MathJax/MathML?
You can see examples of this kind of layout in the MathML spec at
http://www.w3.org/Math/draft-spec/mathml.html#chapter3_presm.elemmath.examples
If, once the document has loaded, you select the button "convert and display with MathJax" then the MathML3 mstack markup will be transformed to some MathML2 that MathJax understands. The relevant javascript is all available linked from that page.
Also relevant is the discussion between myself and the MathJax developer at
https://groups.google.com/forum/#!msg/mathjax-users/wa85p5TAIe4/hgUoLEXrweoJ