Adavanced title blocks — part 2

[Cicorione]

Hi @pgundlach,

this is more a kind of general thought about something that I have not could find a satisfactory solution for it yet. It is intrinsically connected with this one: #496

In your suggestion you achieved a good result using Td and the attribute graphic to load a MetaPost graphic as background. Since my brain is not really wired to understand the latter, I tried alternative solutions with alternated results, some good and some bad:

TITLE WITH TABLE

    <PlaceObject column="2" row="2">
      <Table width="5" stretch="no" fontfamily="title" border-collapse="collapse">
        <Columns>
          <Column width="4mm" />
          <Column width="2*" />
          <Column width="4mm" />
          <Column width="1*" />
          <Column width="4mm" />
        </Columns>
        <Tr valign="middle" minheight="8mm">
          <Td>
            <Image file="resources/edge1.pdf" maxheight="8mm" maxwidth="4mm" />
          </Td>
          <Td padding-left="1mm" padding-bottom="-3pt" background-color="aglgray">
            <Paragraph textformat="nohyphen">
              <B>
                <NoBreak reduce="fontfit">
                  <Value>TITLE WITH TABLE</Value>
                </NoBreak>
              </B>
            </Paragraph>
          </Td>
          <Td background-color="red">
            <Image file="resources/edge2.pdf" maxheight="8mm" maxwidth="4mm" />
          </Td>
          <Td align="left" background-color="red" padding-right="3mm" padding-left="2mm" padding-top="1.3mm">
            <Paragraph color="white" fontfamily="new">
              <Value>NEW</Value>
            </Paragraph>
          </Td>
          <Td>
            <Image file="resources/edge3.pdf" maxheight="8mm" maxwidth="4mm" />
          </Td>
        </Tr>
      </Table>
    </PlaceObject>

Unfortunately the rendering has issues: the columns don't merge together, those thin lines are actually printend, I tested it ripping through Cockpit Prenect from Hidelberg and then printed on an Epson plotter that we use to make offset color proof.

TITLE WITH FRAME

    <PlaceObject column="2" row="3.4" valign="middle">
      <Frame background-color="aglgray" border-radius="2mm" rulewidth="0">
        <Textblock minheight="8mm" width="5">
          <Paragraph fontfamily="title" textformat="nohyphen">
            <B>
              <NoBreak reduce="fontfit">
                <Value>TITLE WITH FRAME</Value>
              </NoBreak>
            </B>
          </Paragraph>
        </Textblock>
      </Frame>
    </PlaceObject>

Frames are limited therefore this did not really work out.

TITLE WITH FRAME+BOX

    <PlaceObject column="4.5" row="5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="2.8" background-color="red" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2" row="5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="3.9" background-color="aglgray" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2.3" row="5.25">
      <Textblock width="3.5">
        <Paragraph fontfamily="title" textformat="nohyphen">
          <B>
            <NoBreak reduce="fontfit">
              <Value>TITLE WITH FRAME+BOX</Value>
            </NoBreak>
          </B>
        </Paragraph>
      </Textblock>
    </PlaceObject>
    <PlaceObject column="6.1" row="5.3">
      <Textblock width="2">
        <Paragraph color="white" fontfamily="new">
          <Value>NEW</Value>
        </Paragraph>
      </Textblock>
    </PlaceObject>

With this method the overall result is good but the positioning of each element is tedious.

TITLE WITH FRAME+BOX+TABLE

   <PlaceObject column="5" row="6.5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="3.5" background-color="red" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2" row="6.5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="5" background-color="aglgray" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2" row="6.5">
      <Table width="6" stretch="max" border-collapse="collapse" fontfamily="title">
        <Tr minheight="8mm" align="left" valign="middle">
          <Td padding-left="3.2mm" padding-top="1mm">
            <Paragraph textformat="nohyphen">
              <B>
                <NoBreak reduce="fontfit">
                  <Value>TITLE WITH FRAME+BOX+TABLE</Value>
                </NoBreak>
              </B>
            </Paragraph>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
    <PlaceObject column="6.9" row="6.55">
      <Table width="1.5" stretch="max" border-collapse="collapse" padding="0mm">
        <Tr minheight="8mm" align="center" valign="middle">
          <Td>
            <Paragraph color="white" fontfamily="new">
              <Value>NEW</Value>
            </Paragraph>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>

This last method produces good result as much as the previous one, it is lesser tedious regarding the positioning of the text, but it is more verbose.

Personal considerations...

Including your examples my personal opinion is that all of this is extremely complicated. It would be much easier if Publisher would have a component that already offer all of the above, a kind of special-box with the steroids that allows other special-boxes as children elements.

Alternatively you may allow to load PDF, PNG and SVG into the Td attribute graphic even though I am not sure how you could achieve something like your example:

<Layout xmlns="urn:speedata.de:2009/publisher/en"
    xmlns:sd="urn:speedata:2009/publisher/functions/en">

    <DefineGraphic name="bluerounded">
        filldraw box withcolor blue ;
        clip currentpicture to roundedsquare(box.width + 7mm, box.height, 3mm);
    </DefineGraphic>
    <DefineGraphic name="newrounded">
        filldraw  (0,0) -- (box.width,0) -- (box.width, box.height) --
        (box.width, box.height) -- (-0.5cm, box.height ) -- cycle  withcolor 0.7red ;
        clip currentpicture to roundedsquare(box.width + 1cm, box.height, 3mm) shifted (-1cm,0mm);
    </DefineGraphic>

        <!-- with rounded corners - same table, just different graphics-->
        <PlaceObject>
            <Table padding="6pt" width="20cm" >
                <Tr>
                    <Td graphic="bluerounded" padding-right="1cm"><Paragraph color="white"><Value>EXTENSION CABLE LED WIRING</Value></Paragraph></Td>
                    <Td graphic="newrounded"><Paragraph color="white"><Value>NEW</Value></Paragraph></Td>
                </Tr>
            </Table>
        </PlaceObject>
    </Record>
</Layout>

Thank you!

[Cicorione]

CODE UPDATED

Runs with: sp --dummy

Full code:

<?xml version="1.0" encoding="UTF-8"?>
<?xml-model href="/usr/share/speedata-publisher/schema/layoutschema-en.rng" type="application/xml" schematypens="http://relaxng.org/ns/structure/1.0"?>
<?xml-model href="/usr/share/speedata-publisher/schema/layoutschema-en.xsd" type="application/xml" schematypens="http://http://www.w3.org/2001/XMLSchema"?>

<Layout xmlns="urn:speedata.de:2009/publisher/en" xmlns:sd="urn:speedata:2009/publisher/functions/en" xmlns:xi="http://www.w3.org/2001/XInclude">
  
  <!-- PAGE SETTINGS -->
  
  <Trace grid="no" textformat="no" objects="yes" />
  <Pageformat width="120mm" height="120mm" />
  
  <LoadFontfile name="Amaranth-BoldItalic" filename="Amaranth-BoldItalic.ttf" mode="harfbuzz" />
  <LoadFontfile name="Oswald-Light" filename="Oswald-Light.ttf" mode="harfbuzz" features="+frac" />
  <LoadFontfile name="Oswald-Bold" filename="Oswald-Bold.ttf" mode="harfbuzz" features="+frac" />
  
  <DefineFontfamily fontsize="10" leading="12" name="title">
    <Regular fontface="Oswald-Light" />
    <Bold fontface="Oswald-Bold" />
  </DefineFontfamily>
 
  <DefineFontfamily fontsize="12" leading="10" name="new">
    <Regular fontface="Amaranth-BoldItalic" />
  </DefineFontfamily>
  
  <DefineColor name="aglgray" model="RGB" r="153" g="153" b="153" />
  
  <DefineGraphic name="title5">
    filldraw box withcolor aglgray ;
    clip currentpicture to roundedsquare(box.width + 7mm, box.height, 3mm);
  </DefineGraphic>
  
  <DefineGraphic name="new5">
    filldraw  (0,0) -- (box.width,0) -- (box.width, box.height) --
    (box.width, box.height) -- (-0.5cm, box.height ) -- cycle  withcolor 0.7red ;
    clip currentpicture to roundedsquare(box.width + 1cm, box.height, 3mm) shifted (-1cm,0mm);
  </DefineGraphic>
  
  <Record element="data">
    
    <!-- BAR TITLE 1 -->
    
    <PlaceObject column="2" row="2">
      <Table width="5" stretch="no" fontfamily="title" border-collapse="collapse">
        <Columns>
          <Column width="4mm" />
          <Column width="2*" />
          <Column width="4mm" />
          <Column width="1*" />
          <Column width="4mm" />
        </Columns>
        <Tr valign="middle" minheight="8mm">
          <Td>
            <Image file="resources/edge1.pdf" maxheight="8mm" maxwidth="4mm" />
          </Td>
          <Td padding-left="1mm" padding-bottom="-3pt" background-color="aglgray">
            <Paragraph>
              <B>
                <NoBreak reduce="fontfit">
                  <Value>TITLE WITH TABLE</Value>
                </NoBreak>
              </B>
            </Paragraph>
          </Td>
          <Td background-color="red">
            <Image file="resources/edge2.pdf" maxheight="8mm" maxwidth="4mm" />
          </Td>
          <Td align="left" background-color="red" padding-right="3mm" padding-left="2mm" padding-top="1.3mm">
            <Paragraph color="white" fontfamily="new">
              <Value>NEW</Value>
            </Paragraph>
          </Td>
          <Td>
            <Image file="resources/edge3.pdf" maxheight="8mm" maxwidth="4mm" />
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
    
    <!-- BAR TITLE 2 -->
    
    <PlaceObject column="2" row="3.4" valign="middle">
      <Frame background-color="aglgray" border-radius="2mm" rulewidth="0">
        <Textblock minheight="8mm" width="5">
          <Paragraph fontfamily="title">
            <B>
              <NoBreak reduce="fontfit">
                <Value>TITLE WITH FRAME</Value>
              </NoBreak>
            </B>
          </Paragraph>
        </Textblock>
      </Frame>
    </PlaceObject>
    
    <!-- BAR TITLE 3 -->
    
    <PlaceObject column="4.5" row="5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="2.8" background-color="red" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2" row="5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="3.9" background-color="aglgray" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2.3" row="5.25">
      <Textblock width="3.5">
        <Paragraph fontfamily="title">
          <B>
            <NoBreak reduce="fontfit">
              <Value>TITLE WITH FRAME+BOX</Value>
            </NoBreak>
          </B>
        </Paragraph>
      </Textblock>
    </PlaceObject>
    <PlaceObject column="6.1" row="5.3">
      <Textblock width="2">
        <Paragraph color="white" fontfamily="new">
          <Value>NEW</Value>
        </Paragraph>
      </Textblock>
    </PlaceObject>
    
    <!-- BAR TITLE 4 -->
    
    <PlaceObject column="5" row="6.5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="3.5" background-color="red" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2" row="6.5">
      <Frame border-radius="2.5mm" rulewidth="0">
        <Box height="8mm" width="5" background-color="aglgray" />
      </Frame>
    </PlaceObject>
    <PlaceObject column="2" row="6.5">
      <Table width="6" stretch="max" border-collapse="collapse" fontfamily="title">
        <Tr minheight="8mm" align="left" valign="middle">
          <Td padding-left="3.2mm" padding-top="1mm">
            <Paragraph>
              <B>
                <NoBreak reduce="fontfit">
                  <Value>TITLE WITH FRAME+BOX+TABLE</Value>
                </NoBreak>
              </B>
            </Paragraph>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
    <PlaceObject column="6.9" row="6.55">
      <Table width="1.5" stretch="max" border-collapse="collapse" padding="0mm">
        <Tr minheight="8mm" align="center" valign="middle">
          <Td>
            <Paragraph color="white" fontfamily="new">
              <Value>NEW</Value>
            </Paragraph>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
    
    <!-- BAR TITLE 5 -->
    
    <PlaceObject column="2" row="8">
      <Table width="7" stretch="no" fontfamily="title" border-collapse="collapse">
        <Columns>
          <Column width="4.5" />
          <Column width="20mm" />
        </Columns>
        <Tr minheight="8mm">
          <Td background-color="aglgray">
            <Overlay>
              <Image width="20mm" height="8mm" file="resources/ovr-left.pdf" />
              <Position x="-5" y="70">
                <Textblock>
                  <Paragraph fontfamily="title">
                    <B>
                      <NoBreak reduce="fontfit">
                        <Value>TITLE WITH TABLE+OVERLAY</Value>
                      </NoBreak>
                    </B>
                  </Paragraph>
                </Textblock>
              </Position>
            </Overlay>
          </Td>
          <Td align="left" background-color="red">
            <Overlay>
              <Image width="20mm" height="8mm" file="resources/ovr-right.pdf" />
              <Position x="-8.5" y="60.5">
                <Textblock>
                  <Paragraph color="white" fontfamily="new">
                    <Value>NEW</Value>
                  </Paragraph>
                </Textblock>
              </Position>
            </Overlay>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>
    
  </Record>
</Layout>

[Cicorione]

I tried with Table and Overlay, which can be used to faking effects, but I can still see these thin lines between columns and elements and I am pretty sure this will be rendered on press:

TITLE TABLE+OVERLAY

    <!-- BAR TITLE 5 -->
    
    <PlaceObject column="2" row="8">
      <Table width="7" stretch="no" fontfamily="title" border-collapse="collapse">
        <Columns>
          <Column width="4.5" />
          <Column width="20mm" />
        </Columns>
        <Tr minheight="8mm">
          <Td background-color="aglgray">
            <Overlay>
              <Image width="20mm" height="8mm" file="resources/ovr-left.pdf" />
              <Position x="-5" y="70">
                <Textblock>
                  <Paragraph fontfamily="title">
                    <B>
                      <NoBreak reduce="fontfit">
                        <Value>TITLE WITH TABLE+OVERLAY</Value>
                      </NoBreak>
                    </B>
                  </Paragraph>
                </Textblock>
              </Position>
            </Overlay>
          </Td>
          <Td align="left" background-color="red">
            <Overlay>
              <Image width="20mm" height="8mm" file="resources/ovr-right.pdf" />
              <Position x="-8.5" y="60.5">
                <Textblock>
                  <Paragraph color="white" fontfamily="new">
                    <Value>NEW</Value>
                  </Paragraph>
                </Textblock>
              </Position>
            </Overlay>
          </Td>
        </Tr>
      </Table>
    </PlaceObject>

Overlays can be used to create fake fancy effects however the positioning is even worse than TABLE FRAME+BOX because the textblock frame is not rendered in "debug mode":

This issue with the thin lines I do believe that should be addressed, assuming these "lines" eventually aren't printed it is always a problem when customers can see these rendering defects in a preview; this can mine customer trust, especially when you want sell a product/service that hasn't have the label "Adobe" on it...

I hope this make sense for you! 🙏

[pgundlach]

The thin lines bother me as well. One day I need to optimise this, but this is not trivial. This is why I always try the metapost approach.

Have you tried background images? Not sure if they help in this case, but this is another possible way.

[Cicorione]

Hi Patrick,

I made a test and the thin lines are still there.
I'd like to learn Metapost but it is really hard for me to understand, for instance I was trying to understand how to draw something like this, but I couldn't figure out how:

There aren't tools to draw and the export the output in Metapost, the closer I found is TizKit which is not Metapost at all. There aren't utilities to convert from SVG to Metapost only the opposite, not even from PS to Metapost.

Eventually I had better to learn it, but as designer the learning curve is really steep! 😖

[Cicorione]

The thin lines bother me as well. One day I need to optimise this, but this is not trivial. This is why I always try the metapost approach.

I hope you can prioritize this issue... 🙏

[pgundlach]

The thin lines bother me as well. One day I need to optimise this, but this is not trivial. This is why I always try the metapost approach.

I hope you can prioritize this issue... 🙏

This is really hard to do. And since these backgrounds can be drawn with metapost, this is unfortunately not the highest priority.

[Cicorione]

It looks like I found an ancient Java GUI tool to draw in Metapost...

http://w3.mecanica.upm.es/metapost/metagraf.php

I'll let you know if I am going to be able to run it...

[Cicorione]

SVG ASSETS

table edges for TITLE TABLE

<svg height="8.000029mm" viewBox="0 0 3.9997559 8.0000286" width="3.999756mm" xmlns="http://www.w3.org/2000/svg"><g stroke-width=".391319"><path d="m2.9543416 0c-1.6367564 0-2.9543416 1.3175852-2.9543416 2.9543416v2.0913452c0 1.6367565 1.3175852 2.9543417 2.9543416 2.9543417h1.0454143v-8.0000285z" fill="#999"/><path d="m7.5211464 0c1.6367564 0 2.9543416 1.3175852 2.9543416 2.9543416v2.0913452c0 1.6367565-1.3175852 2.9543417-2.9543416 2.9543417h-1.0454147v-8.0000285z" fill="#999"/><path d="m14.306486 0c1.636757 0 2.954342 1.3175852 2.954342 2.9543416v2.0913452c0 1.6367565-1.317585 2.9543417-2.954342 2.9543417h-1.045414v-8.0000285z" fill="#f00"/></g></svg>

overlay assets

<svg height="8mm" viewBox="0 0 20 8" width="20mm" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink"><linearGradient id="a" gradientUnits="userSpaceOnUse" x1="5.934448" x2="20" y1="3.910725" y2="4"><stop offset="0" stop-color="#7b7b7b"/><stop offset="1" stop-color="#535353" stop-opacity="0"/></linearGradient><linearGradient id="b" gradientUnits="userSpaceOnUse" x1="0" x2="19.999999" y1="15.670635" y2="15.670635"><stop offset="0" stop-color="#cd0000"/><stop offset="1" stop-color="#cd0000" stop-opacity="0"/></linearGradient><path d="m0 0h20v8h-20z" fill="#fff" stroke-width=".263"/><path d="m0 11.670794h17.685772v8h-17.685772z" fill="#999" stroke-width=".247316"/><g stroke-width=".263"><path d="m2.0313742 0h17.9686258v8h-17.9686258c-1.1253813 0-2.0313742-.9059929-2.0313742-2.0313742v-3.9372516c0-1.1253813.9059929-2.0313742 2.0313742-2.0313742z" fill="#999"/><path d="m.0945679 11.670605c-.0317054 0-.0632261.0012-.0945679.0026 1.0762792.05421 1.9264974.938605 1.9264974 2.028817v3.937227c0 1.090212-.8502182 1.974612-1.9264974 2.028817.0313418.0014.0628625.0026.0945679.0026h17.8740301c1.12538 0 2.031401-.90602 2.031401-2.031401v-3.937227c0-1.12538-.906021-2.031399-2.031401-2.031401z" fill="#f00"/><path d="m2.0313742 0h17.9686258v8h-17.9686258c-1.1253813 0-2.0313742-.9059929-2.0313742-2.0313742v-3.9372516c0-1.1253813.9059929-2.0313742 2.0313742-2.0313742z" fill="url(#a)"/><path d="m.0945679 11.670605c-.0317054 0-.0632261.0012-.0945679.0026 1.0762792.05421 1.9264974.938605 1.9264974 2.028817v3.937227c0 1.090212-.8502182 1.974612-1.9264974 2.028817.0313418.0014.0628625.0026.0945679.0026h17.8740301c1.12538 0 2.031401-.90602 2.031401-2.031401v-3.937227c0-1.12538-.906021-2.031399-2.031401-2.031401z" fill="url(#b)"/></g></svg>