List Info

Thread: Shading columns with a background color




Shading columns with a background color
user name
2007-07-20 12:05:27
Hi,

I have an XSL-FO document that uses a multi-column page layout.  I'd like to shade the columns of the page with a background color - only the columns, not the entire page. ; See the attached image for a sketch of what I want the output to look like.

Now, the simplest way to do this is to give the blocks containing the running content a background color:

<fo:block background-color=&quot;gray";>
 &nbsp;Blah blah blah blah...
</fo:block>

However, this only shades the columns to the point where the running content stops.&nbsp; Rather, I want the full length of the columns to be shaded regardless of whether there is any running content.

I eventually came up with the following hokey solution.&nbsp; It is a template that calls itself recursively as many times as the number of columns, and draws a block-container with absolute position for each column:
  ;
<xsl:param name=";column.count" select=&quot;3"/>
<xsl:param name=";column.gap" select=&quot;0.1in&quot;/>
&lt;xsl:param name="; page.width" select=&quot;8.5in&quot;/>

&lt;xsl:variable name=";column.gap.pt"&gt;
  <xsl:call-template name=";length-in-points";>
 ; &nbsp; <xsl:with-param name=";length&quot; select=&quot;$column.gap"/&gt;
 ; </xsl:call-template>
</xsl:variable>
<xsl:variable name=";page.width.pt"&gt;
 ; <xsl:call-template name=";length-in-points";>
&nbsp; &nbsp; <xsl:with-param name=";length&quot; select=&quot;$page.width"/&gt;
 ; </xsl:call-template>
<;/xsl:variable>


<xsl:variable name=";column.width.pt";>

 &nbsp;<xsl:value-of select=&quot;($page.width.pt -
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; (($column.count - 1) *

 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp;  $column.gap.pt))
&nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; div $column.count"/&gt;
</xsl:variable&gt;


<xsl:template name=";column.shading"&gt;
 &nbsp;<xsl:param name=";column.number" select=&quot;1"/>

 &nbsp;<xsl:if test=";$column.number &lt;= $column.count"&gt;
 &nbsp; &nbsp;<fo:block-container absolute-position=&quot;absolute"
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp;background-color=&quot;gray&quot;
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp;height="100%&quot;
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp;width=&quot;{$column.width}pt&quot;>
 &nbsp; &nbsp; &nbsp;<xsl:attribute name=";left">
 &nbsp; &nbsp;   ; <xsl:value-of select=&quot;($column.number - 1) *
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; ($column.width.pt +
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ;  $column.gap.pt)"/>

 &nbsp; &nbsp; &nbsp;  <xsl:text>pt<;/xsl:text&gt;
 &nbsp; &nbsp; &nbsp;</xsl:attribute>
 &nbsp; &nbsp;  <fo:block/>
 &nbsp; &nbsp;</fo:block-container>

 &nbsp; &nbsp;<xsl:call-template name="; speclist.shading&quot;>
 &nbsp; &nbsp; &nbsp;<xsl:with-param name=";column.number" select=&quot;$column.number + 1"/&gt;
 &nbsp; &nbsp;</xsl:call-template>
 &nbsp;</xsl:if>
</xsl:template>

This actually worked if I called this template before other templates that generate running content.&nbsp; This template would draw the colored bars, then the content would be placed on top of them.

However, since I switched from FOP to XEP, this no longer works.&nbsp; The colored bars are drawn as expected, but they are drawn right over the running content, making the content invisible.

Any clue how I could be doing this in a better, saner way?  All I want to do is shade the columns with a background color.&nbsp; If anyone has an idea, please let me know. ; Thanks.
View Original Image
Re: Shading columns with a background color
user name
2007-07-20 12:16:03
My apologies, I had some typos in the code I posted.&nbsp; Here it is again:

<xsl:param name=";column.count " select=&quot;3"/>
<xsl:param name=";column.gap" select=&quot;0.1in&quot;/>
<xsl:param name=";page.width" select=&quot;8.5in&quot;/>

<xsl:variable name=";column.gap.pt"&gt;
  <xsl:call-template name=";length-in-points";>
 &nbsp;  <xsl:with-param name=";length&quot; select=&quot;$column.gap"/&gt;
  </xsl:call-template>
</xsl:variable&gt;
<xsl:variable name=";page.width.pt"&gt;
  <xsl:call-template name=";length-in-points";>
 &nbsp;  <xsl:with-param name=";length&quot; select=&quot;$page.width"/&gt;
  </xsl:call-template>
</xsl:variable&gt;

<xsl:variable name="; column.width.pt&quot;>
  <xsl:value-of select=&quot;($page.width.pt -
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; (($column.count - 1) *
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; $column.gap.pt))
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ;  div $column.count"/&gt;
</xsl:variable&gt;

<xsl:template name=";column.shading"&gt;
  <xsl:param name=";column.number" select=&quot;1"/>

  <xsl:if test=";$column.number &lt;= $column.count"&gt;
 &nbsp;  <fo:block-container absolute-position=&quot;absolute;
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp;  background-color=&quot;gray";
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ;  height=&quot;100%&quot;
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ;  width=&quot;{$column.width}pt&quot;>
 &nbsp; &nbsp;  <xsl:attribute name=";left">
 &nbsp; &nbsp; &nbsp;  <xsl:value-of select=&quot;($column.number - 1) *
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; ($column.width.pt +
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp; $column.gap.pt)"/>
 &nbsp; &nbsp; &nbsp;  <xsl:text>pt<;/xsl:text&gt;
 &nbsp; &nbsp;  </xsl:attribute>;
 &nbsp; &nbsp;  <fo:block/>
 &nbsp;  </fo:block-container>

 &nbsp;  <xsl:call-template name="; column.shading";>
 &nbsp; &nbsp;  <xsl:with-param name=";column.number" select=&quot;$column.number + 1"/&gt;
 &nbsp;  </xsl:call-template>
  </xsl:if>
</xsl:template>
Re: Shading columns with a background color
user name
2007-07-20 16:08:49
I decided to take a different approach with this problem.

I created an SVG image containing three vertical bars, and applied it as a page background image.&nbsp; Since my column count may vary, I also created additional SVGs with different numbers of vertical bars, depending on the column count.&nbsp; My stylesheet then uses the column count to select the image, i.e.

<xsl:attribute name=";background-image";>
  <xsl:text>url(../images/column_shading_</xsl:text>
  <xsl:value-of select=&quot;$column.count"/>
  <xsl:text>.svg)</xsl:text>
</xsl:attribute&gt;
 
Kind of another hokey solution, but I can't figure out any better way to do this.

Colin

On 7/20/07, Colin Shapiro < cmshapirogmail.com">cmshapirogmail.com> wrote:
Hi,

I have an XSL-FO document that uses a multi-column page layout.&nbsp; I&#39;d like to shade the columns of the page with a background color - only the columns, not the entire page. ; See the attached image for a sketch of what I want the output to look like.

Now, the simplest way to do this is to give the blocks containing the running content a background color:

<fo:block background-color=&quot;gray";>
 &nbsp;Blah blah blah blah...
</fo:block>

However, this only shades the columns to the point where the running content stops.&nbsp; Rather, I want the full length of the columns to be shaded regardless of whether there is any running content.

I eventually came up with the following hokey solution.&nbsp; It is a template that calls itself recursively as many times as the number of columns, and draws a block-container with absolute position for each column:
 &nbsp;
<xsl:param name=";column.count" select=&quot;3"/>
<xsl:param name=";column.gap" select=&quot;0.1in&quot;/>
&lt;xsl:param name="; page.width" select=&quot;8.5in&quot;/>

&lt;xsl:variable name=";column.gap.pt"&gt;
  <xsl:call-template name=";length-in-points";>
&nbsp; &nbsp; <xsl:with-param name=";length&quot; select=&quot;$column.gap"/&gt;
 ; </xsl:call-template>
</xsl:variable>
<xsl:variable name=";page.width.pt"&gt;
&nbsp; <xsl:call-template name=";length-in-points";>
&nbsp; &nbsp; <xsl:with-param name=";length&quot; select=&quot;$page.width"/&gt;
 ; </xsl:call-template>
<;/xsl:variable>


<xsl:variable name="; column.width.pt&quot;>

 &nbsp;<xsl:value-of select=&quot;($page.width.pt -
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; (($column.count - 1) *

 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp;  $column.gap.pt))
&nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; div $column.count"/&gt;
</xsl:variable&gt;


<xsl:template name=";column.shading"&gt;
  <xsl:param name=";column.number" select=&quot;1"/>

  <xsl:if test=";$column.number &lt;= $column.count"&gt;
 &nbsp; &nbsp;<fo:block-container absolute-position=&quot;absolute"
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp;background-color=&quot;gray&quot;
   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;  height="100%"
 &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp;width=&quot;{$column.width}pt&quot;>
 &nbsp; &nbsp; &nbsp;<xsl:attribute name=";left">
   ; &nbsp; &nbsp; &lt;xsl:value-of select=&quot;($column.number - 1) *
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; ($column.width.pt +
 &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ; &nbsp; &nbsp; &nbsp; &nbsp;   ;  $column.gap.pt)"/>

 &nbsp; &nbsp; &nbsp;  <xsl:text>pt<;/xsl:text&gt;
 &nbsp; &nbsp; &nbsp;</xsl:attribute>
 &nbsp; &nbsp;  <fo:block/>
   ; </fo:block-container>;

 &nbsp; &nbsp;<xsl:call-template name="; speclist.shading&quot;>
 &nbsp; &nbsp; &nbsp;<xsl:with-param name=";column.number" select=&quot;$column.number + 1"/&gt;
 &nbsp; &nbsp;</xsl:call-template>
  </xsl:if>
</xsl:template>

This actually worked if I called this template before other templates that generate running content.&nbsp; This template would draw the colored bars, then the content would be placed on top of them.

However, since I switched from FOP to XEP, this no longer works.&nbsp; The colored bars are drawn as expected, but they are drawn right over the running content, making the content invisible.

Any clue how I could be doing this in a better, saner way?  All I want to do is shade the columns with a background color.&nbsp; If anyone has an idea, please let me know. ; Thanks.


[1-3]

about | contact  Other archives ( Real Estate discussion Medical topics )