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
6 <title>Image Formatting</title>
\r
11 <para>.png is the preferred image format, though .jpg from legacy conversions are
\r
15 <para>Images are stored in <emphasis>media</emphasis> directories for each <markup
\r
16 linkend="part">part</markup>.</para>
\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
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
36 <title>Images 900px wide or less</title>
\r
37 <para>If the source image is 900px wide or less use the following code</para>
\r
38 <programlisting><![CDATA[
\r
40 <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>
\r
42 <imagedata scalefit="0" fileref="media/FILENAME.png"/>
\r
47 <para>In HTML output, the image will display at actual size; in PDF it will be scaled down
\r
48 to 75% (scale percentage set in
\r
49 <emphasis>~/stylesheets/sitka_fo_graphics.xsl</emphasis>). </para>
\r
54 <title>Images wider than 900px</title>
\r
55 <para>If the source image is wider than 900px use the following code</para>
\r
56 <programlisting><![CDATA[
\r
58 <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>
\r
60 <imagedata width="100%" scalefit="1" fileref="media/FILENAME.png"/>
\r
65 <para>In HTML the image will scale down to 900px width
\r
66 (<emphasis>default.image.width</emphasis> setting in
\r
67 <emphasis>~/stylesheets/sitka_xhtml.xsl</emphasis>). In PDF it will scale down to
\r
71 <para>Wrap the <emphasis>mediaobject</emphasis> tag in a <emphasis>para</emphasis> to
\r
72 add a small space between the image and preceding content.</para>
\r
77 <title>Keeping image and text together</title>
\r
78 <para>Content wrapped in any formal or informal object (eg <emphasis>informalfigure,
\r
79 formalfigure, informalexample, formalexample</emphasis>) is kept together on the
\r
80 same page in pdf output. Use <emphasis>informalfigure</emphasis> to keep an image with
\r
81 associated text, as in this example of a <emphasis>step</emphasis>:.</para>
\r
82 <programlisting><![CDATA[
\r
85 <para>STEP TEXT HERE</para>
\r
88 <alt>OPTIONAL DESCRIPTION OF IMAGE</alt>
\r
90 <imagedata width="100%" scalefit="1" fileref="media/FILENAME.png"/>
\r