Here is my best attempt so far to produce rounded-corner boxes with
variable block-progression dimensions (for fixed-size boxes you can just
use a background graphic that provides the appropriate corners and fill).
The main issue I'm facing is getting the corner graphics to completely
obscure the background of the cells that contain them. I feel like I'm
missing some subtle aspect of positioning, but so far it's escaped me.
In this sample I use negative margins to pull the graphics out beyond
the edges of the table, which mostly works, but should, I think, be
unnecessary, at least for the top corners (the bottom corners have to
account for the descender space in the line areas that contain the
graphics, so negative bottom margins may be unavoidable for the bottom
corners).
<?xml version="1.0" encoding="utf-8"?>
<fo:root xmlns:fo="http://www.w3.org/1999/XSL/Format"
xmlns:axf="http://www.antennahouse.com/names/XSL/Extensions"
xmlns:rx="http://www.renderx.com/XSL/Extensions"
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:imsqti="http://www.imsproject.org/qti/" hyphenate="true"
language="en"
font-family="Times New Roman, serif" font-size="12pt" line-height="120%">
<fo:layout-master-set>
<fo:simple-page-master master-name="body-page-odd"
page-height="11in" page-width="8.5in">
<fo:region-body margin-left="1in" margin-right="1in"
margin-top="4.5pc"
margin-bottom="3.5pc"/>
<fo:region-before extent="4pc"/>
<fo:region-after region-name="region-after-odd" extent="3.5pc"
precedence="false"/>
<fo:region-start extent="1in"/>
<fo:region-end extent="1in"/>
</fo:simple-page-master>
<fo:simple-page-master master-name="body-page-even"
page-height="11in" page-width="8.5in">
<fo:region-body margin-left="1in" margin-right="1in"
margin-top="4.5pc"
margin-bottom="3.5pc"/>
<fo:region-before region-name="region-before-even" extent="4pc"/>
<fo:region-after region-name="region-after-even" extent="3.5pc"
precedence="true"/>
<fo:region-start extent="1in"/>
<fo:region-end extent="1in"/>
</fo:simple-page-master>
<fo:page-sequence-master master-name="body-pages">
<fo:repeatable-page-master-alternatives>
<fo:conditional-page-master-reference
master-reference="body-page-odd" odd-or-even="odd"/>
<fo:conditional-page-master-reference
master-reference="body-page-even" odd-or-even="even"/>
</fo:repeatable-page-master-alternatives>
</fo:page-sequence-master>
</fo:layout-master-set>
<fo:page-sequence master-reference="body-pages"
initial-page-number="auto-odd">
<fo:flow flow-name="xsl-region-body">
<fo:block font-weight="bold">Test of creating dynamically-sized
boxes with
curved corners</fo:block>
<fo:block space-before="1em">
<fo:float float="end">
<fo:block-container
space-before="1pc"
space-after="1pc"
inline-progression-dimension="2in"
font-family="sans-serif"
margin-left="1pc"
>
<fo:table table-layout="fixed" width="100%"
border-collapse="collapse"
start-indent="0pt"
>
<fo:table-column column-width="1.5pc"/>
<fo:table-column column-width="proportional-column-width(1)"/>
<fo:table-column column-width="1.5pc"/>
<fo:table-body>
<fo:table-row
background-color="cyan">
<fo:table-cell
relative-align="before"
font-size="12pt"
line-height="12pt"
background-color="cyan"
>
<fo:block
margin-top="-0.5pt"
margin-left="-0.1pt"
>
<fo:instream-foreign-object>
<svg width="19pt" height="19pt" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1">
<path d="M 0 0
L 100 0
L 0 100
z"
fill="white"
/>
<g >
<path d="M 0 100
A 100,100 0 0,1 100, 0
L 100 100
L 0 100
z
"
fill="cyan"
/>
</g>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:table-cell>
<fo:table-cell
background-color="cyan"
>
<fo:block>Top line of text in box</fo:block>
</fo:table-cell>
<fo:table-cell
font-size="12pt"
line-height="12pt"
text-align="end"
>
<fo:block
margin-top="-0.5pt"
margin-right="-0.2pt"
>
<fo:instream-foreign-object>
<svg width="1.5pc" height="1.5pc" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1"
>
<g transform="rotate(90 50 50)"
>
<path d="M 0 0
L 100 0
L 0 100
z"
fill="white"
/>
<path d="M 0 100
A 100,100 0 0,1 100,0
L 100 100
L 0 100
z
"
fill="cyan"
/>
</g>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:table-cell>
</fo:table-row>
<fo:table-row>
<fo:table-cell number-columns-spanned="3"
background-color="cyan"
>
<fo:block
start-indent="1pc"
end-indent="1pc"
>
This is the body of the table, which spans
all three columns.
</fo:block>
</fo:table-cell>
</fo:table-row>
<!-- last row -->
<fo:table-row>
<fo:table-cell
display-align="after"
font-size="12pt"
line-height="12pt"
background-color="cyan"
>
<!-- NOTE: the -3pt value was arrived at by trial and
error. This
value works with XEP. XSL Formatter wants 2.5pt
-->
<fo:block
margin-bottom="-3pt"
>
<fo:instream-foreign-object>
<svg width="1.5pc" height="1.5pc" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1"
>
<g transform="rotate(-90 50 50)"
>
<path d="M 0 0
L 100 0
L 0 100
z"
fill="white"
/>
<path d="M 0 100
A 100,100 0 0,1 100,0
L 100 100
L 0 100
z
"
fill="cyan"
/>
</g>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:table-cell>
<fo:table-cell
background-color="cyan"
>
<fo:block>Last line of text</fo:block>
</fo:table-cell>
<fo:table-cell
font-size="12pt"
line-height="12pt"
display-align="after"
background-color="cyan"
>
<fo:block
margin-bottom="-3pt"
>
<fo:instream-foreign-object content-width="1.5pc"
content-height="1.5pc">
<svg width="1.5pc" height="1.5pc" viewBox="0 0 100 100"
xmlns="http://www.w3.org/2000/svg" version="1.1"
>
<g transform="rotate(180 50 50)"
>
<path d="M 0 0
L 100 0
L 0 100
z"
fill="white"
/>
<path d="M 0 100
A 100,100 0 0,1 100,0
L 100 100
L 0 100
z
"
fill="cyan"
/>
</g>
</svg>
</fo:instream-foreign-object>
</fo:block>
</fo:table-cell>
</fo:table-row>
</fo:table-body>
</fo:table>
</fo:block-container>
</fo:float>
The basic approach is to use a table in which
the corners are cells containing SVG graphics that draw the
curved corners.
For this exercise, the table is put inside a block-container
with an
inline-progression-dimension of 2 inches, such as you might
use in a
sidebar float. The radius of the corner curves is 1.5pc.
</fo:block>
<fo:block space-before="1em">There seem to be some issues with
getting the outsides
of the corners to overlay the background color of the
containing cells. In the PDF
rendering this is more or less cyan showing through, even
though I don't think there should
be, because the size of the graphic is the same as the size of
the cell and there is
no cell padding and rules are collapsed.</fo:block>
<fo:block space-before="1em">For XEP I've used negative margins
to pull the graphics toward the
outside edges slightly. This appears to work. However one
remaining problem is that in the
PDF rendering, at smaller zoom factors (say less than 200%) the
bleed-through artifacts
are quite pronounced.</fo:block>
</fo:flow>
</fo:page-sequence>
</fo:root>
-- W. Eliot Kimber Professional Services Innodata Isogen 9390 Research Blvd, #410 Austin, TX 78759 (512) 372-8122 ekimber@innodata-isogen.com www.innodata-isogen.com ------------------- (*) To unsubscribe, send a message with words 'unsubscribe xep-support' in the body of the message to majordomo@renderx.com from the address you are subscribed from. (*) By using the Service, you expressly agree to these Terms of Service http://www.renderx.com/tos.htmlReceived on Mon Jan 31 17:39:14 2005
This archive was generated by hypermail 2.1.8 : Mon Jan 31 2005 - 17:39:18 PST