Re: [xsl] XSLT/CSS border style - setting length of dashes

Subject: Re: [xsl] XSLT/CSS border style - setting length of dashes
From: "Kevin Brown" <kevin@xxxxxxxxxxx>
Date: Mon, 23 Jul 2012 11:34:37 -0700
Here's an example of what I meant (done by hand but could easily be
automated in a program):

Given this simple FO for a table:

<fo:table>
	<fo:table-column column-width="1.25in"/>
	<fo:table-body>
		<fo:table-row>
			<fo:table-cell border="1pt dashed black">
				<fo:block>Custom Dashes</fo:block>
			</fo:table-cell>
		</fo:table-row>
	</fo:table-body>
</fo:table>

This yields this XEPOUT format:

<xep:document xmlns:xep="http://www.renderx.com/XEP/xep"; producer="XEP 4.19
build 20110414" creator="Unknown" author="Unknown" title="Untitled">
<xep:page width="792000" height="612000" page-number="1" page-id="1">
<xep:gray-color gray="0.0"/>
<xep:line style="dashed" thickness="1000" x-from="22677" y-from="561801"
x-till="112677" y-till="561801"/>
<xep:line style="dashed" thickness="1000" x-from="22677" y-from="576000"
x-till="112677" y-till="576000"/>
<xep:line style="dashed" thickness="1000" x-from="22677" y-from="561801"
x-till="22677" y-till="576000"/>
<xep:line style="dashed" thickness="1000" x-from="112677" y-from="561801"
x-till="112677" y-till="576000"/>
<xep:word-spacing value="0"/>
<xep:letter-spacing value="0"/>
<xep:font-stretch value="1.0"/>
<xep:font family="Helvetica" weight="400" style="normal" variant="normal"
size="11000"/>
<xep:text value="Custom Dashes" x="23177" y="566090" width="78243"/>
</xep:page>
</xep:document>

I created an SVG by hand, but you again this would be easy to do
programmatically. I used the same width and height as the original border.
The SVG was:

<svg xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink"; width="1.25in" height="1pt">

	<line x1="0" y1="1" x2="1.25in" y2="1"
	style="stroke-dasharray: 9, 3, 5;
	stroke: black; stroke-width: 1pt;"/>
</svg>

I base-64 encoded this and inserted it back into the document as an
<xep:image/> using the x-from and y-from for the actual line being replaced:

<xep:image
src="data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGL
TgiPz4KCgkJCQkJPHN2
        ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxLjI1
        aW4iIGhlaWdodD0iMXB0Ij4JCQkJCQkKCQkJCQkJCgkJCQkJCTxsaW5lIHgxPSIw
        IiB5MT0iMSIgeDI9IjEuMjVpbiIgeTI9IjEiIHN0eWxlPSJzdHJva2UtZGFzaGFy
        cmF5OiA5LCAzLCA1OyAgICAgICAgc3Ryb2tlOiBibGFjazsgc3Ryb2tlLXdpZHRo
        OiAxcHQ7Ii8+CgkJCQkJPC9zdmc+CgkJCQk="
base="file:/D:/RenderX/Demonstrations/Tricks/Tables/" type="image/svg+xml" 
        x-from="22677" y-from="561801" scale-x="1.0" scale-y="1.0"
width="90000" height="1000" role="none"/>

Works perfect, border replaced by a custom dot-dash border. 

Samples forwarded to the original poster and if anyone would like, just
email me.

Kevin Brown
RenderX
kevin@xxxxxxxxxxx

Current Thread