By default, all blocks present in the content are laid out using the normal flow layout (with the exception of table cells). In this layout, each block is positioned vertically after the previous block in the content tree. In many cases when you want to produce truly dynamic layouts this type of layout is not sufficient to address all the possible positions of the block. The HorizontalAnchor and VerticalAnchor properties of the block allow you to specify how the block is positioned horizontally and vertically.

Horizontal Anchor

The horizontal anchor controls how the block is positioned horizontally by defining a range of x coordinates which the block uses to position itself. The horizontal anchor is controlled from the HorizontalAnchor property which accepts values from the ENHorizontalAnchor enum. The following table lists the available options:

Vertical Anchor

Similarly, the vertical anchor defines a range of y values relative to which the block is positioned. It is controlled from the VerticalAnchor property accepting values from the ENVerticalAnchor enum:

The following code snippet shows how to place a block at the left top of the block containing the page in print layout:

someBlock.HorizontalAnchor = ENHorizontalAnchor.Page;
someBlock.VerticalAnchor = ENVerticalAnchor.Page;

When you define the reference x and y ranges against which the block is positioned you can further specify how the block is aligned relative to those ranges. This is achieved from the HorizontalBlockAlignment and VerticalBlockAlignment properties.

Horizontal Alignment

The horizontal alignment is controlled from the HorizontalBlockAlignment property - it accepts values from the ENHorizontalBlockAlignment enum:

Vertical Alignment

The vertical alignment is controlled from the VerticalBlockAlignment property - it accepts values from the ENVerticalBlockAlignment enumeration:

The following code snippet shows how to center a block relative to the block's containing page in print layout:

someBlock.HorizontalAnchor = ENHorizontalAnchor.Page;
someBlock.VerticalAnchor = ENVerticalAnchor.Page;
someBlock.HorizontalBlockAlignment = ENHorizontalBlockAlignment.Center;
someBlock.VerticalBlockAlignment = ENVerticalBlockAlignment.Center;

After the block position is determined from the Anchor/Alignment properties you can further apply an additional offset in the horizontal and vertical direction using the XOffset and YOffset properties.

someBlock.XOffset = 10;
someBlock.YOffset = 15;

The WrapMode property of the block allows you to specify whether the block will be removed from the flow and whether it will present an obstacle for inline content for other blocks that have inline content, which resides in the area occupied by the block. The following table lists the available options:

How to Implement Normal Left and Right Floating Blocks just like in HTML

HTML allows blocks to float to the left or right side of their container block. This is achieved with the following property configuration:

// Normal
someBlock.HorizontalAnchor = ENHorizontalAnchor.Flow;
someBlock.HorizontalBlockAlignment = ENHorizontalBlockAlignment.Left;
someBlock.VerticalAnchor = ENVerticalAnchor.Flow;
someBlock.VerticalBlockAlignment = ENVerticalBlockAlignment.Top;
someBlock.WrapMode = ENWrapMode.None;

// Left
someBlock.HorizontalAnchor = ENHorizontalAnchor.Flow;
someBlock.HorizontalBlockAlignment = ENHorizontalBlockAlignment.Left;
someBlock.VerticalAnchor = ENVerticalAnchor.Flow;
someBlock.VerticalBlockAlignment = ENVerticalBlockAlignment.Top;
someBlock.WrapMode = ENWrapMode.After;

// Right
someBlock.HorizontalAnchor = ENHorizontalAnchor.Flow;
someBlock.HorizontalBlockAlignment = ENHorizontalBlockAlignment.Right;
someBlock.VerticalAnchor = ENVerticalAnchor.Flow;
someBlock.VerticalBlockAlignment = ENVerticalBlockAlignment.Top;
someBlock.WrapMode = ENWrapMode.Before;

How to Implement Relative Positioned Blocks like in HTML

Relatively positioned blocks serve two purposes - the first one is to act as anchors (or coordinate system parents) for absolutely positioned blocks and the second one is to be able to move a block relatively to its original flow position. In NOV RichText Editor these two tasks are achieved by setting the AllowAnchoredDescendantBlocks property to true and by modifying the XOffset and YOffset properties respectively.

someBlock.AllowAnchoredDescendantBlocks = true;
someBlock.XOffset = 10;
someBlock.YOffset = -10;

How to Implement Absolute Positioned Blocks like in HTML

Absolutely positioned blocks in HTML can be aligned relative to the first parent block which uses either relative or absolute position. In NOV RichText absolutely positioned blocks are achieved by setting the AllowAnchoredDescendantBlocks property to true of the ancestor block relative to which you want to position the block and then modify the horizontal and vertical block anchors. The following code snippet shows how to implement an absolutely positioned paragraph contained in a group block:

// create a section
NSection section = new NSection();

NGroupBlock groupBlock = new NGroupBlock();
groupBlock.PreferredHeight = new NMultiLength(ENMultiLengthUnit.Dip, 200);
groupBlock.Border = NBorder.CreateFilledBorder(NColor.Black);
groupBlock.BorderThickness = new NMargins(2);
groupBlock.AllowAnchoredDescendantBlocks = true;

// create an absolutely positioned paragraph
NParagraph absolutePositionedParagraph = new NParagraph("Absolutely Positioned Paragraph");
absolutePositionedParagraph.BackgroundFill = new NColorFill(ENNamedColor.Red);

absolutePositionedParagraph.HorizontalAnchor = ENHorizontalAnchor.Ancestor;
absolutePositionedParagraph.VerticalAnchor = ENVerticalAnchor.Ancestor;
absolutePositionedParagraph.XOffset = 100;
absolutePositionedParagraph.YOffset = 100;

// create normal positioned paragraphs
NParagraph normalPositionedParagraph1 = new NParagraph("Normal Positioned Paragraph 1");
normalPositionedParagraph1.BackgroundFill = new NColorFill(ENNamedColor.Green);
NParagraph normalPositionedParagraph2 = new NParagraph("Normal Positioned Paragraph 2");
normalPositionedParagraph2.BackgroundFill = new NColorFill(ENNamedColor.Green);

// add them to the group block
groupBlock.Blocks.Add(normalPositionedParagraph1);
groupBlock.Blocks.Add(absolutePositionedParagraph);
groupBlock.Blocks.Add(normalPositionedParagraph2);

section.Blocks.Add(groupBlock);

m_RichText.Content.Sections.Clear();
m_RichText.Content.Sections.Add(section);

This code produces the following image:

Notice how the absolutely positioned paragraph is taken out of the flow. This causes to the second normal flow paragraph (normalPositionedParagraph2) in the block to be adjacent to the first one (normalPositionedParagraph1). Also when using a horizontal anchor different from ENHorizontalAnchor.Flow, the block width will be computed based on the desired width instead of the parent content width, similar to HTML.