Nevron Open Vision Documentation
Rich Text Editor / Document Model / Blocks / Block Layout
In This Topic
    Block Layout
    In This Topic

    Nevron Text closely follows the HTML box model, which is briefly explained in this topic.

     Block Dimensions

    Each block has a content area and optional surrounding padding, border, and margin areas. The size of each area is specified by the Margins, Padding and BorderThickess properties. This is illustrated by the following picture:

    Those three properties specify left, top, right, and bottom offset for each area (margin, border and padding). The block background fill if specified, fills the padding and content areas.

    The width and height of the block are computed based on a combination of the block PreferredWidth, PreferredHeight, MinWidth, MinHeight, MaxWidth, MaxHeight, and parent block content area width and height.

    The following code snippet creates a paragraph with preferred width of 100dips and modifies its margins, border thickness and padding:

    Changing Block Dimensions
    Copy Code
    NParagraph paragraph = new NParagraph("The box model is simple.");
    
    paragraph.PreferredWidth = new NMultiLength(ENMultiWidthUnit.Dip, 100);
    paragraph.Margins = new NMargins(10);
    paragraph.BorderThickness = new NMargins(10);
    paragraph.Padding = new NMargins(5, 5, 10, 10);
    paragraph.Border = NBorder.CreateFilledBorder(NColor.Red);
    paragraph.BackgroundFill = new NStockGradientFill(NColor.White, NColor.LightYellow);
    

    This produces the following paragraph:

     Floating Blocks

    A floating block is a block which is positioned to the left or right of its containing block. When a block is floating it prohibits other blocks inline content from entering the block area. This is illustrated by the following picture:

    The following code snippet shows how to create a floating paragraph:

    Setting the Float Mode
    Copy Code
    floatingParagraph.FloatMode = ENFloatMode.Left;
    

    Sometimes the floating block may affect more than one normal flow block. For example consider the following picture where a floating block enters the content area of two consecutive normal flow paragraphs:

    If this is not the desired behavior you may consider setting the second paragraph clear mode – which will offset the position of the second paragraph to the first y coordinate not affected by floating blocks. The following table lists the possible options:

    ENClearMode Description
    None Allows left and right floating elements to enter the area of this block
    Left Allows only right and center floating elements to enter the area of this block
    Right Allows only left and center floating elements to enter the area of this block
    Center Allows only left and right floating elements to enter the area of this block
    All Does not allow floating elements to enter the area of this block

    Considering the previous example if you set the second paragraph clear mode to left:

    Setting the Clear Mode
    Copy Code
    paragraph.ClearMode = ENClearMode.Left;
    

    This will result in the following layout:

    Notice how the second paragraph position is shifted so that it avoids the left floating block.

     Paging Control

    When the control layouts the blocks in the document block tree in paged mode (this happens when you switch the View to Print, perform printing, or export to PDF) you also can control how blocks are positioned relative to the current page being layout. This is achieved with the help of the PageBreakBefore, PageBreakAfter, and AvoidPageBreakInside properties.

    PageBreakBefore

    This property instructs the layout to insert a page break before the block so that it always starts on a new page:

    Page Break Before
    Copy Code
    NSection section = new NSection();
    
    NParagraph paragraph1= new NParagraph("First Page");
    NParagraph paragraph2 = new NParagraph("Second Page");
    paragraph2.PageBreakBefore = true;
    
    section.Blocks.Add(paragraph1);
    section.Blocks.Add(paragraph2);
    
    m_RichText.Content.Sections.Add(section);
    

    PageBreakAfter

    This property instructs the layout to insert a page break after the block:

    Page Break Before
    Copy Code
    NSection section = new NSection();
    
    NParagraph paragraph1= new NParagraph("First Page");
    NParagraph paragraph2 = new NParagraph("Second Page");
    paragraph1.PageBreakAfter = true;
    
    section.Blocks.Add(paragraph1);
    section.Blocks.Add(paragraph2);
    
    m_RichText.Content.Sections.Add(section);
    

    AvoidPageBreaksInside

    This property instructs the layout to try to position the block on a new page if its original position will result in the block being split by a page break. The layout will position the block on the next page only if the block will fit there.

    The following example shows how to create a group block with two child blocks that are always on the same page:

    Page Break Before
    Copy Code
    NSection section = new NSection();
    
    NGroupBlock groupBlock = new NGroupBlock();
    groupBlock.Border = NBorder.CreateFilledBorder(NColor.Black);
    groupBlock.BorderThickness = new NMargins(1);
    groupBlock.Blocks.Add(new NParagraph("First Paragraph"));
    groupBlock.Blocks.Add(new NParagraph("Second Paragraph"));
    
    groupBlock.AvoidPageBreaksInside = true;
    
    section.Blocks.Add(groupBlock);
    
    m_RichText.Content.Sections.Add(section);
    
    See Also