Contents | Start | End | Previous: Appendix B: Configuring Jutoh | Next: Appendix D: The Bibliographic Formatting Language


Appendix C: The Jutoh Box Model

To understand the way margins, padding and borders work when showing a text box, table, table cell or image, consider this simplified illustration of the box model used by Jutoh, as well as by CSS and to some extent other formats.

The box model

At the centre, you have the content area containing the paragraphs in your box. Separating the content and the border is padding, which gives breathing space around your content. The optional border is itself surrounded by the margin, and outside the margin you may have an outline, which is a secondary border drawn around the overall box. It’s very rare to use the outline, though, and only HTML-based formats support it.

So, when considering the space taken up by a box, you need to include the content, margin, padding and any border and outline.

The box model applies to cells within tables, and tables themselves. In the case of tables, the cells are the table content, and so the padding represents the gap between the outer table border and the cells, and the padding is also used for the inter-cell gaps.

When you specify width and height in Jutoh, the dimensions refer to the overall box size. In HTML, they refer to the content part only, so when generating HTML, Jutoh calculates the content size by subtracting other dimensions, if an explicit size has been provided.

When ebook software calculates the size of an object, the object maximum width and/or height will be taken into account, if set. Similarly, the minimum width/and or height may be taken into account, although minimum size is not currently used for layout within the Jutoh editor. The ebook layout algorithm may choose to ignore or adjust sizes where necessary, so you may see slightly different results on different devices.

Note that Kindle KF8 currently ignores maximum size.


Contents | Start | End | Previous: Appendix B: Configuring Jutoh | Next: Appendix D: The Bibliographic Formatting Language