Loading ...
Sorry, an error occurred while loading the content.
 

center image and caption

Expand Messages
  • slwm98
    Hi, I ve been away from XSL-FO for so long I can t find this in my manuals or online. I need to center an image and its caption on a page. There are paragraphs
    Message 1 of 5 , Aug 17, 2007
      Hi,

      I've been away from XSL-FO for so long I can't find this in my manuals
      or online.

      I need to center an image and its caption on a page. There are
      paragraphs before and after the image, but I do not want to wrap text
      around the image. Text of the caption should be aligned left, and
      caption should be same width as image. The image width is 12.68cm.
      Instead of padding it, I made its containing block 13.68cm and used
      text-align="center", which works. But I cannot get the entire block
      that contains both the image and its caption to center horizontally on
      the page. I've tried text-align and display-align on
      anything/everything, but I can't get it right. Do I have to use a
      table construct to do this?

      My code that doesn't work is below for reference.

      Thanks,
      Susan



      <xsl:template match="figure[@id='dnx.jpg']">
      <fo:block text-align="center" space-after="3em" space-before="3em">

      <fo:block-container width="13.68cm" text-align="center"
      border-style="solid" border-width=".5mm">
      <fo:block>
      <fo:external-graphic src="url('images/dnx.jpg')"
      width="12.68cm" content-width="scale-to-fit" height="100%"
      content-height="scale-to-fit" display-align="center"/>
      </fo:block>
      <fo:block text-align="left" space-before="0em"
      border-style="solid" border-width=".4mm">
      <fo:block padding="1em" start-indent="1em" end-indent="1em">
      <xsl:apply-templates select="caption"/>
      </fo:block>
      </fo:block>
      </fo:block-container>
      </fo:block>
      </xsl:template>
    • G. Ken Holman
      ... Yes you do ... and a table-and-caption at that because to centre a table you use text-align= center on the table-and-caption surrounding it. The table
      Message 2 of 5 , Aug 17, 2007
        At 2007-08-17 14:44 +0000, slwm98 wrote:
        >I need to center an image and its caption on a page. There are
        >paragraphs before and after the image, but I do not want to wrap text
        >around the image. Text of the caption should be aligned left, and
        >caption should be same width as image. The image width is 12.68cm.
        >Instead of padding it, I made its containing block 13.68cm and used
        >text-align="center", which works. But I cannot get the entire block
        >that contains both the image and its caption to center horizontally on
        >the page. I've tried text-align and display-align on
        >anything/everything, but I can't get it right. Do I have to use a
        >table construct to do this?

        Yes you do ... and a table-and-caption at that because to centre a
        table you use text-align="center" on the table-and-caption
        surrounding it. The table can be a simple one-cell table using the
        cell-based row-grouping strategy rather than the row-based
        row-grouping strategy. An example is below.

        Note that you still need the surrounding block-container to constrain
        the width of the cell because the block in the cell is not a
        reference area and is as wide as the page.

        I note that you have:

        > <fo:external-graphic src="url('images/dnx.jpg')"

        ... which is fine since you know the name of the file, but remember
        that the single quote is a valid URI character ... I tell my students
        the best practice is to use:

        src='url("{image-name}")'

        ... because a double quote is not allowed in a URI string.

        I hope this helps.

        . . . . . . . . . . . . Ken

        <fo:table-and-caption text-align="center" space-after="3em"
        space-before="3em">
        <fo:table>
        <fo:table-body>
        <fo:table-cell border="solid .5mm">
        <fo:block-container width="13.68cm">
        <fo:block>
        <fo:external-graphic src='url("harbour.jpg")'
        width="12.68cm" content-width="scale-to-fit"
        content-height="scale-to-fit" display-align="center"/>
        </fo:block>
        <fo:block padding="1em" start-indent="1em" end-indent="1em"
        border="solid .4mm" text-align="start">
        This is a long caption here that should wrap in the
        block container
        This is a long caption here that should wrap in the
        block container
        This is a long caption here that should wrap in the
        block container
        </fo:block>
        </fo:block-container>
        </fo:table-cell>
        </fo:table-body>
        </fo:table>
        </fo:table-and-caption>


        --
        Upcoming public training: XSLT/XSL-FO Sep 10, UBL/code lists Oct 1
        World-wide corporate, govt. & user group XML, XSL and UBL training
        RSS feeds: publicly-available developer resources and training
        G. Ken Holman mailto:gkholman@...
        Crane Softwrights Ltd. http://www.CraneSoftwrights.com/f/
        Box 266, Kars, Ontario CANADA K0A-2E0 +1(613)489-0999 (F:-0995)
        Male Cancer Awareness Jul'07 http://www.CraneSoftwrights.com/f/bc
        Legal business disclaimers: http://www.CraneSoftwrights.com/legal
      • slwm98
        Ack! I *just* read about the single quote in *your* manual but was on another track and forgot it. I fixed that now, thank you very much. But back to the
        Message 3 of 5 , Aug 17, 2007
          Ack! I *just* read about the single quote in *your* manual but was on
          another track and forgot it. I fixed that now, thank you very much.

          But back to the original problem, I'm still not getting it. My
          processor is XEP 4.6. I cut and pasted your code, but XEP won't run it
          unless I wrap the table-cell in a table-row. I added that, and my
          table is still aligned on the left.

          Here is my exact code:

          <xsl:template match="figure[@id='dnx010312d2361b.jpg']">
          <fo:table-and-caption text-align="center" space-after="3em"
          space-before="3em">
          <fo:table>
          <fo:table-body>
          <fo:table-row>
          <fo:table-cell border="solid .5mm">
          <fo:block-container width="13.68cm">
          <fo:block>
          <fo:external-graphic
          src='url("images/dnx010312d2361b.jpg")'
          width="12.68cm" content-width="scale-to-fit"
          content-height="scale-to-fit" display-align="center"/>

          </fo:block>
          <fo:block padding="1em" start-indent="1em"
          end-indent="1em" border="solid .4mm" text-align="start">
          <xsl:apply-templates select="caption"/>
          </fo:block>
          </fo:block-container>
          </fo:table-cell>
          </fo:table-row>
          </fo:table-body>
          </fo:table>
          </fo:table-and-caption>
          </xsl:template>

          What am I messing up here?

          Thanks for your help,
          Susan


          --- In XSL-FO@yahoogroups.com, "G. Ken Holman" <gkholman@...> wrote:
          >
          > At 2007-08-17 14:44 +0000, slwm98 wrote:
          > >I need to center an image and its caption on a page. There are
          > >paragraphs before and after the image, but I do not want to wrap text
          > >around the image. Text of the caption should be aligned left, and
          > >caption should be same width as image. The image width is 12.68cm.
          > >Instead of padding it, I made its containing block 13.68cm and used
          > >text-align="center", which works. But I cannot get the entire block
          > >that contains both the image and its caption to center horizontally on
          > >the page. I've tried text-align and display-align on
          > >anything/everything, but I can't get it right. Do I have to use a
          > >table construct to do this?
          >
          > Yes you do ... and a table-and-caption at that because to centre a
          > table you use text-align="center" on the table-and-caption
          > surrounding it. The table can be a simple one-cell table using the
          > cell-based row-grouping strategy rather than the row-based
          > row-grouping strategy. An example is below.
          >
          > Note that you still need the surrounding block-container to constrain
          > the width of the cell because the block in the cell is not a
          > reference area and is as wide as the page.
          >
          > I note that you have:
          >
          > > <fo:external-graphic src="url('images/dnx.jpg')"
          >
          > ... which is fine since you know the name of the file, but remember
          > that the single quote is a valid URI character ... I tell my students
          > the best practice is to use:
          >
          > src='url("{image-name}")'
          >
          > ... because a double quote is not allowed in a URI string.
          >
          > I hope this helps.
          >
          > . . . . . . . . . . . . Ken
          >
          > <fo:table-and-caption text-align="center" space-after="3em"
          > space-before="3em">
          > <fo:table>
          > <fo:table-body>
          > <fo:table-cell border="solid .5mm">
          > <fo:block-container width="13.68cm">
          > <fo:block>
          > <fo:external-graphic src='url("harbour.jpg")'
          > width="12.68cm" content-width="scale-to-fit"
          > content-height="scale-to-fit" display-align="center"/>
          > </fo:block>
          > <fo:block padding="1em" start-indent="1em" end-indent="1em"
          > border="solid .4mm" text-align="start">
          > This is a long caption here that should wrap in the
          > block container
          > This is a long caption here that should wrap in the
          > block container
          > This is a long caption here that should wrap in the
          > block container
          > </fo:block>
          > </fo:block-container>
          > </fo:table-cell>
          > </fo:table-body>
          > </fo:table>
          > </fo:table-and-caption>
          >
          >
          > --
          > Upcoming public training: XSLT/XSL-FO Sep 10, UBL/code lists Oct 1
          > World-wide corporate, govt. & user group XML, XSL and UBL training
          > RSS feeds: publicly-available developer resources and training
          > G. Ken Holman mailto:gkholman@...
          > Crane Softwrights Ltd. http://www.CraneSoftwrights.com/f/
          > Box 266, Kars, Ontario CANADA K0A-2E0 +1(613)489-0999 (F:-0995)
          > Male Cancer Awareness Jul'07 http://www.CraneSoftwrights.com/f/bc
          > Legal business disclaimers: http://www.CraneSoftwrights.com/legal
          >
        • G. Ken Holman
          ... This is a known issue in XEP ... I tested the example I gave you in Antenna House. ... That XEP doesn t (yet) centre a table based on text-align= in
          Message 4 of 5 , Aug 17, 2007
            At 2007-08-17 17:26 +0000, slwm98 wrote:
            >Ack! I *just* read about the single quote in *your* manual but was on
            >another track and forgot it. I fixed that now, thank you very much.

            :{)}

            >But back to the original problem, I'm still not getting it. My
            >processor is XEP 4.6.

            This is a known issue in XEP ... I tested the example I gave you in
            Antenna House.

            >I cut and pasted your code, but XEP won't run it
            >unless I wrap the table-cell in a table-row. I added that, and my
            >table is still aligned on the left.
            >...
            >What am I messing up here?

            That XEP doesn't (yet) centre a table based on text-align= in
            table-and-caption.

            The XEP workaround is to use a proportional-table-width() trick ...
            though with the code below I'm not quite getting the expected image
            size and I'm not sure why with the limited time I have to look at it.

            I hope this helps.

            . . . . . . . . . . Ken

            <fo:table width="100%">
            <fo:table-column column-width="proportional-column-width(1)"/>
            <fo:table-column column-width="13.68cm"/>
            <fo:table-column column-width="proportional-column-width(1)"/>
            <fo:table-body>
            <fo:table-row>
            <fo:table-cell><fo:block/></fo:table-cell>
            <fo:table-cell border="solid .5mm">
            <fo:block text-align="center">
            <fo:external-graphic src='url("harbour.jpg")'
            width="12.68cm" content-width="scale-to-fit"
            content-height="scale-to-fit" display-align="center"/>
            </fo:block>
            <fo:block padding="1em" start-indent="1em" end-indent="1em"
            border="solid .4mm" text-align="start">
            This is a long caption here that should wrap in the block container
            This is a long caption here that should wrap in the block container
            This is a long caption here that should wrap in the block container
            </fo:block>
            </fo:table-cell>
            <fo:table-cell><fo:block/></fo:table-cell>
            </fo:table-row>
            </fo:table-body>
            </fo:table>


            --
            Upcoming public training: XSLT/XSL-FO Sep 10, UBL/code lists Oct 1
            World-wide corporate, govt. & user group XML, XSL and UBL training
            RSS feeds: publicly-available developer resources and training
            G. Ken Holman mailto:gkholman@...
            Crane Softwrights Ltd. http://www.CraneSoftwrights.com/f/
            Box 266, Kars, Ontario CANADA K0A-2E0 +1(613)489-0999 (F:-0995)
            Male Cancer Awareness Jul'07 http://www.CraneSoftwrights.com/f/bc
            Legal business disclaimers: http://www.CraneSoftwrights.com/legal
          • slwm98
            I m sorry. I swear I searched the XEP stuff (I thought!) but I didn t find this. Yes, it helps immensely. And never mind the image size -- you gave me the
            Message 5 of 5 , Aug 17, 2007
              I'm sorry. I swear I searched the XEP stuff (I thought!) but I didn't
              find this.

              Yes, it helps immensely. And never mind the image size -- you gave me
              the method, I'll work out the details.

              Thank you very much!
              Susan


              --- In XSL-FO@yahoogroups.com, "G. Ken Holman" <gkholman@...> wrote:
              >
              > At 2007-08-17 17:26 +0000, slwm98 wrote:
              > >Ack! I *just* read about the single quote in *your* manual but was on
              > >another track and forgot it. I fixed that now, thank you very much.
              >
              > :{)}
              >
              > >But back to the original problem, I'm still not getting it. My
              > >processor is XEP 4.6.
              >
              > This is a known issue in XEP ... I tested the example I gave you in
              > Antenna House.
              >
              > >I cut and pasted your code, but XEP won't run it
              > >unless I wrap the table-cell in a table-row. I added that, and my
              > >table is still aligned on the left.
              > >...
              > >What am I messing up here?
              >
              > That XEP doesn't (yet) centre a table based on text-align= in
              > table-and-caption.
              >
              > The XEP workaround is to use a proportional-table-width() trick ...
              > though with the code below I'm not quite getting the expected image
              > size and I'm not sure why with the limited time I have to look at it.
              >
              > I hope this helps.
              >
              > . . . . . . . . . . Ken
              >
              > <fo:table width="100%">
              > <fo:table-column column-width="proportional-column-width(1)"/>
              > <fo:table-column column-width="13.68cm"/>
              > <fo:table-column column-width="proportional-column-width(1)"/>
              > <fo:table-body>
              > <fo:table-row>
              > <fo:table-cell><fo:block/></fo:table-cell>
              > <fo:table-cell border="solid .5mm">
              > <fo:block text-align="center">
              > <fo:external-graphic src='url("harbour.jpg")'
              > width="12.68cm" content-width="scale-to-fit"
              > content-height="scale-to-fit" display-align="center"/>
              > </fo:block>
              > <fo:block padding="1em" start-indent="1em" end-indent="1em"
              > border="solid .4mm" text-align="start">
              > This is a long caption here that should wrap in the block
              container
              > This is a long caption here that should wrap in the block
              container
              > This is a long caption here that should wrap in the block
              container
              > </fo:block>
              > </fo:table-cell>
              > <fo:table-cell><fo:block/></fo:table-cell>
              > </fo:table-row>
              > </fo:table-body>
              > </fo:table>
              >
              >
              > --
              > Upcoming public training: XSLT/XSL-FO Sep 10, UBL/code lists Oct 1
              > World-wide corporate, govt. & user group XML, XSL and UBL training
              > RSS feeds: publicly-available developer resources and training
              > G. Ken Holman mailto:gkholman@...
              > Crane Softwrights Ltd. http://www.CraneSoftwrights.com/f/
              > Box 266, Kars, Ontario CANADA K0A-2E0 +1(613)489-0999 (F:-0995)
              > Male Cancer Awareness Jul'07 http://www.CraneSoftwrights.com/f/bc
              > Legal business disclaimers: http://www.CraneSoftwrights.com/legal
              >
            Your message has been successfully submitted and would be delivered to recipients shortly.