Contents | Start | End | Previous: KB0180: How can I create large print books? | Next: KB0182: Why are blank paragraphs and non-breaking spaces not showing in Adobe Digital Editions?
Sometimes you might wish to include an image containing text, when there's an effect that's not supported by Jutoh such as inverted text or a font you can't or don't want to embed. The image should then be sized relative to the text, whose absolute size is not known in advance and which can be changed by the user.
Epub and Kindle use HTML/CSS, and CSS can use the 'em' unit to make images and other elements size themselves relative to the current text size. Although Jutoh doesn't support the em unit directly, you can work around it by creating a box style and adding custom CSS. Here's how to do it:
In the Styles tab in the Formatting Palette, switch the view to Box styles using the selector at the bottom.
Right-click (or control-click on Mac) and click on New | Box Style.
Give it a name, such as Text Image Style.
Press OK.
Click on Advanced/Custom CSS and check Use Custom CSS.
Inside the curly brackets, insert some CSS, such as:
vertical-align: middle; height: 1em;
Press OK.
Click on your image and in Box style, choose your new box style.
In the generated book, your image should now resize itself when the text size changes.
Alternatively, instead of adding a box style, you can use custom properties for the image itself. Click on the image, make sure no size properties are checked, and in Advanced/Custom properties, type your CSS, e.g. vertical-align: middle; height: 1em;. Also make sure that in your configuration(s), Limit images to viewer size is not checked, since that can add its own width property.
Contents | Start | End | Previous: KB0180: How can I create large print books? | Next: KB0182: Why are blank paragraphs and non-breaking spaces not showing in Adobe Digital Editions?