[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]
Subject: Re: [docbook] Callout, footnotes, & annotations.
This might be a little late, but it was an interesting problem that
I had to delay until I could get around to looking at it again.
Taking a little bit of time to learn SVG helped, too. :)
This example definitely needs some work to get your text exactly
right, and it's very crude in the placement of items in the SVG, but
it will actually display something reasonably close to what you want.
(fop complains about the overflow area, but it seems to be fine in the
PDF output) It would be nicer if I could figure out how to do
looping in SVG (I can't find a reference to how to do it), so if
someone knows I'd appreciate a simple example that illustrates it. :)
Example:
xsltproc --nonet --xinclude --output test.fo app.xsl test_seq.xml
c:\docbook\fop.bat test.fo test.pdf
Files used in the example at the end of the message.
Enjoy!
kells
On 3/19/07, cga2000 <cga2000@optonline.net> wrote:
> On Mon, Mar 19, 2007 at 07:49:44AM EST, Jirka Kosek wrote:
> > cga2000 wrote:
> >
> > >> I
> > >> can imagine creating alternative output of callouts using SVG to draw
> > >> connecting arrows instead bulleted numbers.
> > >
> > > That's (vaguely) what I had in mind .. clean arrows, rather than these
> > > ugly hyphens .. etc. But I didn't find any sample or doc that would
> > > show you how to do that so I figured it wasn't possible.
> >
> > The stylesheets doesn't support it, but it is doable. Though it would be
> > very hard customization.
>
> So it looks like it's going to be callouts for now.
>
> I'm quite amazed at how easy it was to get DocBook to work for me and I
> really don't want to spend too much time experimenting.
>
> But I won't forget.. I will keep an eye open for this type of solution.
> If it's doable someone with the right motivation is bound to come up
> with an elegant solution at some point or other.
>
> Thank,
> cga
>
test_seq.xml
===========
<?xml version="1.0" encoding="UTF-8"?>
<book version="5.0"
xmlns="http://docbook.org/ns/docbook";
xmlns:xlink="http://www.w3.org/1999/xlink";
xmlns:xi="http://www.w3.org/2001/XInclude";
xmlns:svg="http://www.w3.org/2000/svg";
xmlns:mml="http://www.w3.org/1998/Math/MathML";
xmlns:html="http://www.w3.org/1999/xhtml";
>
<chapter>
<title>Hello world!</title>
<para>Sample explanatory text here</para>
<para>
<command> bleh </command>=<replaceable>green</replaceable>
</para>
<mediaobject>
<imageobject>
<imagedata format="SVG" fileref="code_explanation.svg"/>
</imageobject>
</mediaobject>
</chapter>
</book>
apps.xsl
======
<?xml version="1.0" encoding="UTF-8"?>
<xsl:stylesheet version="1.0"
xmlns="http://docbook.org/ns/docbook";
xmlns:db="http://docbook.org/ns/docbook";
xmlns:xsl="http://www.w3.org/1999/XSL/Transform";
xmlns:fo="http://www.w3.org/1999/XSL/Format";
>
<xsl:import href="file:///c:/docbook/lib/docbook5-xsl-1.72.0/fo/docbook.xsl"/>
<!-- Pretty print the FO output tree (please! :) -->
<xsl:output encoding="UTF-8" indent="yes" />
</xsl:stylesheet>
code_explanation.svg
================
<?xml version="1.0" encoding="ISO-8859-1" standalone="no" ?>
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN"
"http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"; [
<!ENTITY code_height "30">
<!ENTITY code_arrow_height "40">
<!ENTITY code_size "18px">
<!ENTITY explanation_text_start "160">
<!ENTITY explanation_start "150">
<!ENTITY explanation_size "10pt">
<!ENTITY seq1_xpos "20">
<!ENTITY seq1_ypos "130">
<!ENTITY seq2_xpos "60">
<!ENTITY seq2_ypos "110">
<!ENTITY seq3_xpos "90">
<!ENTITY seq3_ypos "90">
<!ENTITY seq4_xpos "110">
<!ENTITY seq4_ypos "70">
<!ENTITY seq5_xpos "130">
<!ENTITY seq5_ypos "50">
]>
<!-- Need to specify the width and height to get FOP to display SVG
properly for PDF output -->
<svg width="800" height="400" xmlns="http://www.w3.org/2000/svg";
xmlns:xlink="http://www.w3.org/1999/xlink";>
<defs>
<marker id="Triangle"
viewBox="0 0 10 10" refX="0" refY="5"
markerUnits="strokeWidth"
markerWidth="4" markerHeight="3"
orient="auto">
<path d="M 0 0 L 10 5 L 0 10 z" />
</marker>
</defs>
<title>Escape sequence explanation</title>
<desc>Escape sequences unleashed!</desc>
<!--
\033[ 35 ; 1 m
^ ^ ^ ^ ^
| | | | |
| | | | .- - - - - - - - - - - signal end of escape sequence
| | | |
| | | .- - - - - - - - - - - - - command #2 - set bold attribute
| | |
| | .- - - - - - - - - - - - - - - command separator
| |
| .- - - - - - - - - - - - - - - - - - command #1 - set
foreground color to magenta
|
.- - - - - - - - - - - - - - - - - - - - - - - - start escape sequence
-->
<!-- For our code sequence, each character gets its own box -->
<text x="&seq1_xpos;" y="&code_height;" style="font-size:
&code_size;" text-anchor="middle">033</text>
<text x="&seq2_xpos;" y="&code_height;" style="font-size:
&code_size;" text-anchor="middle">35</text>
<text x="&seq3_xpos;" y="&code_height;" style="font-size:
&code_size;" text-anchor="middle">;</text>
<text x="&seq4_xpos;" y="&code_height;" style="font-size:
&code_size;" text-anchor="middle">1</text>
<text x="&seq5_xpos;" y="&code_height;" style="font-size:
&code_size;" text-anchor="middle">m</text>
<!-- Okay, now place the text boxes with the explanations -->
<text x="&explanation_text_start;" y="&seq5_ypos;"
style="font-size: &explanation_size;">signal end of escape
sequence</text>
<text x="&explanation_text_start;" y="&seq4_ypos;"
style="font-size: &explanation_size;">command #2 - set bold
attribute</text>
<text x="&explanation_text_start;" y="&seq3_ypos;"
style="font-size: &explanation_size;">command separator</text>
<text x="&explanation_text_start;" y="&seq2_ypos;"
style="font-size: &explanation_size;">command #1 - set foreground
color to magenta</text>
<text x="&explanation_text_start;" y="&seq1_ypos;"
style="font-size: &explanation_size;">start escape sequence</text>
<!--
Now draw the lines from the explanations to the codes
Draw the horizontal line from the explanation to underneath the code, then
draw the veritical line up to the code location.
-->
<line x1="&explanation_start;" y1="&seq5_ypos;" x2="&seq5_xpos;"
y2="&seq5_ypos;" style="stroke: #000; stroke-width: 2px" />
<line x1="&seq5_xpos;" y1="&seq5_ypos;" x2="&seq5_xpos;"
y2="&code_arrow_height;" style="stroke: #000; stroke-width: 2px"
marker-end="url(#Triangle)" />
<line x1="&explanation_start;" y1="&seq4_ypos;" x2="&seq4_xpos;"
y2="&seq4_ypos;" style="stroke: #000; stroke-width: 2px" />
<line x1="&seq4_xpos;" y1="&seq4_ypos;" x2="&seq4_xpos;"
y2="&code_arrow_height;" style="stroke: #000; stroke-width: 2px"
marker-end="url(#Triangle)" />
<line x1="&explanation_start;" y1="&seq3_ypos;" x2="&seq3_xpos;"
y2="&seq3_ypos;" style="stroke: #000; stroke-width: 2px" />
<line x1="&seq3_xpos;" y1="&seq3_ypos;" x2="&seq3_xpos;"
y2="&code_arrow_height;" style="stroke: #000; stroke-width: 2px"
marker-end="url(#Triangle)" />
<line x1="&explanation_start;" y1="&seq2_ypos;" x2="&seq2_xpos;"
y2="&seq2_ypos;" style="stroke: #000; stroke-width: 2px" />
<line x1="&seq2_xpos;" y1="&seq2_ypos;" x2="&seq2_xpos;"
y2="&code_arrow_height;" style="stroke: #000; stroke-width: 2px"
marker-end="url(#Triangle)" />
<line x1="&explanation_start;" y1="&seq1_ypos;" x2="&seq1_xpos;"
y2="&seq1_ypos;" style="stroke: #000; stroke-width: 2px" />
<line x1="&seq1_xpos;" y1="&seq1_ypos;" x2="&seq1_xpos;"
y2="&code_arrow_height;" style="stroke: #000; stroke-width: 2px"
marker-end="url(#Triangle)" />
</svg>
[Date Prev] | [Thread Prev] | [Thread Next] | [Date Next] -- [Date Index] | [Thread Index] | [List Home]