Skip to topic | Skip to bottom
Home

Tesi
Tesi.TallUseCasesr1.4 - 15 Jun 2007 - 16:07 - LucaFurinitopic end

Start of topic | Skip to actions

Tall use cases

Main use cases

  1. supermarket advertisement
    • paper leaflet
    • for a computer screen
    • for a mobile phone screen
    • big size poster
  2. book
  3. journal

Supermarket advertisement

This could be a significative Tall instance file representing an advertisement, with the supermarket name and logo and several offers, some of which more important than others. There are svg shapes defining the supermarket logo, and bitmap images for the special offers.

The desidered output is, in this case, is an A4 paper sheet, and the resolution (that will come into play for the bitmap images) is not particularly high.

<tall:context xmlns:fo="http://www.w3.org/1999/XSL/Format" 
              xmlns:svg="http://www.w3.org/2000/svg" 
              xmlns:tall="http://www.unibo.it/~fabio/tall" 
              width="297mm" height="210mm" resolution="300dpi" 
              overflow="none"
              layout.alignment="center">
   <tall:group width="100%" height="100%">
      <tall:group importance="high">
         <tall:object>
            <svg xmlns:svg="http://www.w3.org/2000/svg" 
                                     xmlns="http://www.w3.org/2000/svg"
                                     version="1.0" width="114.16474" height="114.16474" id="svg2">
               <defs id="defs4"/>
               <g transform="translate(-302.91766,-363.85128)" id="layer1">
                  <rect width="80" height="80" x="320.00003" y="380.93365" 
                   style="fill:#ff0000;fill-opacity:0.50196078;stroke:#000000;stroke-width:1.02765679;stroke-miterlimit:4;stroke-dasharray:3.08297038, 1.02765679;stroke-dashoffset:0;stroke-opacity:1" id="rect2162"/>
                  <rect width="80" height="80" x="-83.086578" y="512.20349" transform="matrix(0.7071068,-0.7071068,0.7071068,0.7071068,0,0)" 
                   style="fill:#ff0000;fill-opacity:0.50196078;stroke:#000000;stroke-width:1.02765679;stroke-miterlimit:4;stroke-dasharray:3.08297038, 1.02765679;stroke-dashoffset:0;stroke-opacity:1" id="rect3134"/>
                  <rect width="19.014397" height="19.014397" x="350.49283" y="411.42645" 
                   style="fill:#ffffff;fill-opacity:0.50196078;stroke:#000000;stroke-width:1.02765679;stroke-miterlimit:4;stroke-dasharray:3.08297038, 1.02765679;stroke-dashoffset:0;stroke-opacity:1" id="rect4105"/>
               </g>
            </svg>
         </tall:object>
         <tall:object>
            <fo:block font-weight="bold">XYZ Supermarket</fo:block>
         </tall:object>
      </tall:group>
      <tall:group similarity="width height" layout.order="false">
         <tall:object importance="low">
            <fo:block>
               Apples $ 0.99
            </fo:block>
         </tall:object>
         <tall:object importance="low">
            <fo:block>
               Oranges $ 0.89
            </fo:block>
         </tall:object>
         <tall:object importance="low">
            <fo:block>
               Cats $ 2.49
            </fo:block>
         </tall:object>
         <tall:object importance="low">
            <fo:block>
               Dogs $ 2.99
            </fo:block>
         </tall:object>
         <tall:group importance="high">
            <tall:object>
               <fo:block>
                  <fo:external-graphic src="apple.jpg"/>
               </fo:block>
            </tall:object>
            <tall:object importance="high">
               <fo:block>Golden apples $ 24.99</fo:block>
            </tall:object>
         </tall:group>
         <tall:object importance="high">
            <tall:object>
               <fo:block>
                  <fo:external-graphic src="stone.jpg"/>
               </fo:block>
            </tall:object>
            <tall:object importance="high">
               <fo:block>Philosopher's stones $ 29.99</fo:block>
            </tall:object>
         </tall:object>
      </tall:group>
   </tall:group>
</tall:context>

leaflet_original.png

leaflet2.png

If we want a different output, optimized for a computer screen, we can just modify width, height and resolution in the tall:context element:

<tall:context xmlns:fo="http://www.w3.org/1999/XSL/Format" 
              xmlns:svg="http://www.w3.org/2000/svg" 
              xmlns:tall="http://www.unibo.it/~fabio/tall"
              width="1024px" height="768px" resolution="96dpi" 
              overflow="scrollY"
              layout.alignment="center">
   ...
</tall:context>

screen.png

A mobile phone has very different characteristics: smaller display, and a different aspect ratio

<tall:context xmlns:fo="http://www.w3.org/1999/XSL/Format" 
              xmlns:svg="http://www.w3.org/2000/svg" 
              xmlns:tall="http://www.unibo.it/~fabio/tall" 
              width="240px" height="320px" resolution="130dpi"
              overflow="scrollXY"
              layout.alignment="center">
   ...
</tall:context>

leaflet_mobile.png

Finally, a big advertisement banner has a large dimension but a very low resolution:

<tall:context xmlns:fo="http://www.w3.org/1999/XSL/Format" 
              xmlns:svg="http://www.w3.org/2000/svg" 
              xmlns:tall="http://www.unibo.it/~fabio/tall" 
              width="400cm" height="200cm" resolution="12dpi"
              overflow="none"
              layout.alignment="center">
   ...
</tall:context>

leaflet_banner.png

Other use cases

Some other use cases, coming from old slides about Tall:

  • Creating a menu by saying "Insert a group of some (depending on the available space) dishes infos, in a row, with an higher priority for the spicy ones"
  • Creating a cover comprised by book’s title, author’s information and a given logo
  • Creating an image by saying "these sub-areas must be displayed in a circle, and have similar dimensions"

to top

Copyright © 1999-2017 by the contributing authors. All material on this collaboration platform is the property of the contributing authors.
Ideas, requests, problems regarding Fabio's Wiki? Send feedback