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

Re: [XSL-FO] center image and caption

Expand Messages
  • 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 1 of 5 , Aug 17, 2007
    • 0 Attachment
      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 2 of 5 , Aug 17, 2007
      • 0 Attachment
        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 3 of 5 , Aug 17, 2007
        • 0 Attachment
          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 4 of 5 , Aug 17, 2007
          • 0 Attachment
            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.