============================== Positioning your content - PD ============================== Scryber has an intelligent layout engine. By default eveything will be laid out as per the flowing layout of the document body, sections and columns. Each component, be it block level or inline will have a position next to its siblings and move along in the document. If the content comes to the end of the page and cannot be fitted then, if allowed, it will be moved to the next page. Inline Positioning ------------------ Inline components such as text and spans will continue on the current line, and if they do not fit all the contnet, then they will flow onto the next line (or column or page). If the content moves, so the inline content will move with the container. Carriage returns within the content of the file are ignored by default, as per html (see :doc:`document_textlayout` if you don't want them to be.). Examples of inline components are spans, labels, text literals, page numbers, .. code-block:: html This is the content of the page, and this will continue on the current line until it reaches the end and then flow onto the next line. This with then flow after the line.
A line break forces a new line in the content but flow in the page (#) will continue. It also supports the use of multiple font sizes in multiple lines, adjusting the line height as needed. .. image:: images/documentpositioninginline.png For more information on laying out textual content see :doc:`document_textlayout` Block Positioning ------------------ A block starts on a new line in the content of the page. Children will be laid out within the block (unless absolutely positioned), and content after the block will also begin a new line. Examples of blocks are Div's, Paragraphs, Tables, BlockQuotes, Headings, Images, and Shapes. .. code-block:: html This is the content of the page,

This will always be on a new on the line, and it's content will then continue inline until it reaches the end and then flow onto the next line.

After a block, this with then continue with the previous flow on the next line.
A line break forces a new line in the content but flow in the page (#) will continue.

Blocks also support the use of inline and block content within them in multiple lines, adjusting the line height as needed.

As a separate block within the container

.. image:: images/documentpositioningblocks.png Blocks also support the use of backgrounds, borders, margins and padding. They also support :doc:`document_columns` .. code-block:: html This is the content of the page,

This will always be on a new on the line, and it's content will then continue inline until it reaches the end and then flow onto the next line.

After a block, this with then continue with the previous flow on the next line.
A line break forces a new line in the content but flow in the page (#) will continue.

Blocks also supports the use of inline and block content within them in multiple lines, adjusting the line height as needed.

As a separate block within the container

And coming after the child block.

.. image:: images/documentpositioningblocks2.png Changing the display mode --------------------------- Scryber (currently) supports the following values for the display style mode: * block * inline * none It is posible to change the default display mode for many components on the page. A span can be a block and a div can be inline. Images and shapes (see :doc:`document_images` and :doc:`drawing_paths`) also support the use of the the display mode. .. code-block:: html

The content of this div is all as a block (by default)

This div is positioned as a block.

After the content.

The content of this div is all as a block (by default)

This div is positioned as a block.

After the content.

.. image:: images/documentpositioningblocks3.png Relative Positioning ----------------------- When you set the position-mode to Relative, it declares the position of that component relative to the block parent. The component will no longer be in the flow of any inline content, nor alter the layout of the following components. .. warning:: In HTML relative has a different meaning, scryber uses the container block offsets for relative positions and the page for absolute. .. code-block:: html This is the content of the page,

This is the content above the block.

This is the flowing content within the block that will span over multiple lines This is relative with the content within it.

After a block, this will then continue with the previous flow of content.

.. image:: images/documentpositioningrelative.png By default the position will be 0,0, but using the top and left values it can be altered. As soon as a left or top value are specified, the position:relative becomes inferred and is not needed. Any parent blocks will grow to accomodate the content including any of it's relatively positioned content. And push any content after the block down. .. code-block:: xml This is the content of the page,

This is the content above the block.

This is the flowing content within the block that will span over multiple lines This is relative with the content within it.

After a block, this will then continue with the previous flow of content.

.. image:: images/documentpositioningrelative2.png .. note:: By applying a position of relative the span (which is normally inline has automatically become a block and supports the background colours etc. Absolute Positioning --------------------- Changing the positioning mode to Absolute makes the positioning relative to the current page being rendered. The component will no longer be in the flow of any content, nor alter the layout of following components. The parent block will NOT grow to accomodate the content. The content within the absolutely positioned component will be flowed within the available width and height of the page, but if a size is specified, then this will be honoured over and above the page size. .. code-block:: html This is the content of the page,

This is the content above the block.

This is the flowing content within the block that will span over multiple lines This is absolute with the content within it.

After a block, this will then continue with the previous flow of content.

.. image:: images/documentpositioningabsolute.png Numeric Positioning -------------------- All content positioning is from the top left corner of the page or parent. This is a natural positioning mechanism for most cultures and developers. (unlike PDF, which is bottom left to top right). Units of position can either be specified in * points (1/72 of an inch) e.g `36pt`, * inches e.g. `0.5in` or * millimeters e.g. `12.7mm` * pixels (1/96 of an inch) e.g. `48px` If no units are specified then the default is points. See :doc:`drawing_units` for more information. .. note:: 100% is also supported for widths to allow for the full-width capability. More support for percentage widths may be added in future. Rendering Order ---------------- All relative or absolutely positioned content will be rendered to the output in the order it appears in the document. If a block is relatively positioned, it will overlay any content that preceded it, but anything coming after will be over the top. .. code-block:: xml This is the content of the page,

This is the content above the block.

This is the flowing content within the block that will span over multiple lines This is relatively positioned with the content within it.

This is the content that will flow over the top with the 60 point left padding and the image set at -40, -10 relative to the container with a width of 100pt and a 50% opacity.

By using this rule interesting effects can be designed. .. image:: images/documentpositioningover.png Position z-index ----------------- It's not currently supported, within scryber to specify a z-index on components. It may be supported in future. Drawing Canvas ---------------------- For complete control of drawing content, scryber supports svg. This can be used as drawing support for shapes and paths etc. See :doc:`drawing_paths` for more details.