style/style-image.xml

   1 <?xml version="1.0" encoding="utf-8"?>\r
   2 <chapter xml:id="style-image" xmlns="http://docbook.org/ns/docbook" version="5.0" xml:lang="EN"\r
   3     xmlns:xi="http://www.w3.org/2001/XInclude" xmlns:xlink="http://www.w3.org/1999/xlink">\r
   4 \r
   5     <info>\r
   6         <title>Image Formatting</title>\r
   7     </info>\r
   8 \r
   9     <itemizedlist>\r
  10         <listitem>\r
  11             <para>.png is the preferred image format, though .jpg from legacy conversions are\r
  12                 acceptable</para>\r
  13         </listitem>\r
  14         <listitem>\r
  15             <para>Images are stored in <emphasis>media</emphasis> directories for each <markup\r
  16                     linkend="part">part</markup>.</para>\r
  17         </listitem>\r
  18         <listitem>\r
  19             <para>Images up to 900px wide can be displayed without resizing. Images larger than\r
  20                 900px are scaled down with the <emphasis>scalefit="1"</emphasis> attribute as shown\r
  21                 below.</para>\r
  22         </listitem>\r
  23         <listitem>\r
  24             <para>When scaling DocBook uses both the size (pixels) and resolution (dpi or pixels/in)\r
  25                 of image files. Source images should be at 96dpi, a default chosen to match legacy\r
  26                 images. 96dpi seems to be standard in FullShot; if using Gimp change the default for\r
  27                 new images from 72 pixels/in to 96 pixels/in under <menuchoice>\r
  28                     <guimenu>File</guimenu>\r
  29                     <guisubmenu>Preferences</guisubmenu>\r
  30                     <guimenuitem>Default Image</guimenuitem>\r
  31                 </menuchoice></para>\r
  32         </listitem>\r
  33 <listitem>\r
  34             <para>Add Capture Effects - <emphasis>Drop Shadow</emphasis> (Direction=Lower Right, Distance=5, Size=5)</para>\r
  35         </listitem>\r
  36 <listitem><para>Add Capture Effects - <emphasis>Stroke/Frame</emphasis> (Width=1, Colour=000000)</para>\r
  37         </listitem>\r
  38     </itemizedlist>\r
  39 \r
  40     <simplesect>\r
  41         <title>Images 900px wide or less</title>\r
  42         <para>If the source image is 900px wide or less use the following code</para>\r
  43         <programlisting><![CDATA[ \r
  44     <mediaobject>\r
  45         <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>\r
  46         <imageobject>\r
  47             <imagedata scalefit="0" fileref="media/FILENAME.png"/>\r
  48         </imageobject>\r
  49     </mediaobject>]]>\r
  50     </programlisting>\r
  51 \r
  52         <para>In HTML output, the image will display at actual size; in PDF it will be scaled down\r
  53             to 75% (scale percentage set in\r
  54             <emphasis>~/stylesheets/sitka_fo_graphics.xsl</emphasis>). </para>\r
  55     </simplesect>\r
  56 \r
  57 \r
  58     <simplesect>\r
  59         <title>Images wider than 900px</title>\r
  60         <para>If the source image is wider than 900px use the following code</para>\r
  61         <programlisting><![CDATA[ \r
  62     <mediaobject>\r
  63         <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>\r
  64         <imageobject>\r
  65             <imagedata width="100%" scalefit="1" fileref="media/FILENAME.png"/>\r
  66         </imageobject>\r
  67     </mediaobject>]]>\r
  68         </programlisting>\r
  69 \r
  70         <para>In HTML the image will scale down to 900px width\r
  71                 (<emphasis>default.image.width</emphasis> setting in\r
  72                 <emphasis>~/stylesheets/sitka_xhtml.xsl</emphasis>). In PDF it will scale down to\r
  73             page width. </para>\r
  74 \r
  75         <tip>\r
  76             <para>Wrap the <emphasis>mediaobject</emphasis> tag in a <emphasis>para</emphasis> to\r
  77                 add a small space between the image and preceding content.</para>\r
  78         </tip>\r
  79     </simplesect>\r
  80 \r
  81     <simplesect>\r
  82         <title>Keeping image and text together</title>\r
  83         <para>Content wrapped in any formal or informal object (eg <emphasis>informalfigure,\r
  84                 formalfigure, informalexample, formalexample</emphasis>) is kept together on the\r
  85             same page in pdf output. Use <emphasis>informalfigure</emphasis> to keep an image with\r
  86             associated text, as in this example of a <emphasis>step</emphasis>:.</para>\r
  87         <programlisting><![CDATA[ \r
  88     <step>   \r
  89        <informalfigure>\r
  90           <para>STEP TEXT HERE</para>\r
  91           <para>\r
  92              <mediaobject>\r
  93                 <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>\r
  94                 <imageobject>\r
  95                    <imagedata width="100%" scalefit="1" fileref="media/FILENAME.png"/>\r
  96                 </imageobject>\r
  97              </mediaobject>\r
  98           </para>\r
  99        </informalfigure>\r
 100     </step>]]>\r
 101         </programlisting>\r
 102 \r
 103         \r
 104 \r
 105     </simplesect>\r
 106 \r
 107 \r
 108 \r
 109 </chapter>\r