{"id":746,"date":"2026-08-17T04:32:55","date_gmt":"2026-08-17T04:32:55","guid":{"rendered":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/?post_type=knowledgebase&p=746"},"modified":"2026-08-17T06:07:12","modified_gmt":"2026-08-17T06:07:12","slug":"paragraph-formatting-text-flow","status":"publish","type":"knowledgebase","link":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/db\/typography\/paragraph-formatting-text-flow\/","title":{"rendered":"Paragraphs & Text Flow"},"content":{"rendered":"
\n

Paragraph Formatting & Text Flow\"Paragraph<\/span><\/h2>\n

Beyond basic font styling, Open Publisher offers advanced typographic controls for managing paragraph structure, alignment, and multi-page text flow.<\/p>\n

Open Publisher provides an Exact Line Spacing tool that overrides dynamic CSS line-height calculations and locks your text to absolute point measurements.<\/p>\n

To set exact line spacing<\/span>:<\/strong><\/p>\n

\"To<\/h3>\n
    \n
  1. \n

    Select a text box.<\/span><\/p>\n<\/li>\n

  2. \n

    Click the Line Spacing<\/strong> button (the vertical double-arrow icon) in the Paragraph group on the Home ribbon, or from the floating Text Box Tools panel.<\/span><\/p>\n<\/li>\n

  3. \n

    In the modal that opens, type an exact point value (e.g., 14, 30).<\/span><\/p>\n<\/li>\n

  4. \n

    Click OK. The text box instantly updates to that exact line height.<\/span><\/p>\n<\/li>\n<\/ol>\n

     <\/p>\n

    Leaving the field blank and clicking OK reverts the text box to standard normal CSS line-height inheritance.<\/p>\n

    Paragraph Indents (Ruler Drag Markers)<\/span><\/h3>\n

    When a text box is selected and you are editing text inside it, three interactive indent markers appear on the left edge of the horizontal ruler:<\/p>\n\n\n\n\n\n\n
    Marker<\/b><\/span><\/span><\/td>\nDescription<\/b><\/span><\/span><\/td>\n<\/tr>\n
    Top Triangle
    \n(First Line Indent)<\/span><\/td>\n    		Drag independently to adjust the starting position of the first line of the paragraph only.<\/span><\/td>\n<\/tr>\n
    Bottom Triangle
    \n(Hanging Indent)<\/span><\/td>\n    		Drag to push the left edge of all subsequent lines, keeping the first line anchored – perfect for bullet lists and numbered paragraphs.<\/span><\/td>\n<\/tr>\n
    Bottom Rectangle
    \n(Left Indent)<\/span><\/td>\n    		The master handle. Drag it to shift the entire paragraph block left or right while preserving the relative indent spacing between the two triangles.<\/span><\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n

    \"Paragraph
    \nThe markers are context-aware: clicking between different paragraphs in the same text box causes them to jump instantly to reflect that paragraph’s unique indentation. The coordinate engine compensates for zoom level and scroll position, so precision drag behaviour is maintained regardless of how far in or out you are zoomed.<\/p>\n

    Tab Stops & Tab Leaders<\/span><\/h3>\n

    Open Publisher supports fully customisable tab stops with tab leaders – the connecting dotted, dashed, or solid lines used in menus, price lists, and tables of contents.<\/p>\n

    To configure tab stops:\"Tab<\/em><\/strong><\/p>\n

      \n
    1. \n

      Select a text box and click inside it so the cursor is active.<\/span><\/p>\n<\/li>\n

    2. \n

      Double-click anywhere on the top horizontal ruler to open the Tabs dialog.<\/span><\/p>\n<\/li>\n

    3. \n

      In the dialog, enter a position value (in pixels or mm).<\/span><\/p>\n<\/li>\n

    4. \n

      Choose a Tab<\/b>Alignment<\/b>:
      \n<\/span>Left<\/b> – text flows rightward from the tab stop (standard).
      \n<\/span>Center<\/b> – text centres itself over the tab stop position.
      \n<\/span>Right<\/b> – text pushes leftward and aligns flush to the right of the stop. Ideal for prices.
      \n<\/span>Decimal<\/b> – similar to Right, for numerical column alignment.<\/span><\/p>\n<\/li>\n

    5. \n

      Choose a Tab<\/b>Leader<\/b>:
      \n<\/span>None<\/b> – a plain blank space.
      \n<\/span>Dotted<\/b>(<\/b>)<\/b> – classic TOC dot leaders.
      \n<\/span>Dashed<\/b>(<\/b>)<\/b> – a dashed connecting line.
      \n<\/span>Solid<\/b>(<\/b>)<\/b> – a solid underline leader.<\/span><\/p>\n<\/li>\n

    6. \n

      Click Set, then OK.
      \n<\/span><\/p>\n

      Example:<\/b> Type “Menu Item 1”, press Tab<\/b>, then type “$15.00”. With a right-aligned dotted tab stop at position 300, the price right-aligns at 300px while a dotted leader line fills the gap automatically.<\/p>\n

      Tab leader lines are fully PDF and print safe – the print engine automatically converts CSS gradient leaders into real characters just before capture, ensuring they appear correctly in exported documents.<\/p>\n

      Note:<\/strong> If you press Tab in a text box that has no explicit tab stops configured, Open Publisher inserts a standard 4-space indentation (like a word processor), so normal text flow is preserved. Tab leader lines are fully PDF and print safe.<\/span><\/div>\n<\/li>\n<\/ol>\n<\/div>\n
      \n

      Vertical Text Alignment<\/span><\/h3>\n

      You can control how text is positioned vertically within its container – pinning it to the top, centring it in the middle, or anchoring it to the bottom. This is ideal for title cards, pull quotes, sidebars, and grid layouts.\"Vertical<\/p>\n

        \n
      1. \n

        Select a text box.<\/span><\/p>\n<\/li>\n

      2. \n

        In the Text Box Tools contextual ribbon, locate the Alignment group.<\/span><\/p>\n<\/li>\n

      3. \n

        Click Top, Middle, or Bottom.<\/span><\/p>\n<\/li>\n<\/ol>\n

        The change takes effect immediately. Under the hood, Open Publisher uses a CSS Table-Cell architecture (rather than Flexbox) to implement vertical alignment. This was a deliberate engineering choice to bypass a known WebKit\/Chrome rendering bug where Flexbox text nodes can collapse their line-heights to zero in PDF and print output. The table-cell implementation guarantees perfect 1:1 pixel rendering on both screen and paper.<\/p>\n

        Text Flow Controls<\/span><\/h3>\n

        Shrink Text on Overflow:<\/strong><\/p>\n

        The Shrink<\/b> Text<\/b> on<\/b> Overflow<\/b> toggle, found in the Text<\/b> Flow<\/b> group of the Text Box Tools ribbon, automatically reduces the font size of your text if you type more content than the box can hold.\"Shrink<\/p>\n

          \n
        1. \n
            \n
          • \n

            The size reduction happens live as you type and also reacts when you resize the box.<\/span><\/p>\n<\/li>\n

          • \n

            The original font size is remembered internally. Disabling the toggle restores the text to its original size.<\/span><\/p>\n<\/li>\n

          • \n

            This mode is mutually exclusive with Grow<\/b> Box<\/b> to<\/b> Fit<\/b> \u2014 enabling one automatically disables the other.<\/span><\/p>\n<\/li>\n<\/ul>\n<\/li>\n<\/ol>\n

             <\/p>\n

            Grow Box to Fit:<\/strong><\/p>\n

            The Grow<\/b> Box<\/b> to<\/b> Fit<\/b> toggle (also in the Text<\/b> Flow<\/b> group) makes the text box automatically expand downward as you type, ensuring all content remains visible without changing the font size.\"Grow<\/p>\n

              \n
            • \n

              The box continuously monitors its content via a ResizeObserver<\/span><\/span> and<\/span> input<\/span><\/span> event<\/span> listener.<\/span><\/span><\/p>\n<\/li>\n

            • \n

              A minimum height of 20 pixels is enforced so small or empty boxes remain easy to interact with.<\/span><\/p>\n<\/li>\n

            • \n

              \u00a0<\/span>Grow Box to Fit and Shrink Text on Overflow are mutually exclusive. If Shrink is active when you enable Grow, Shrink is automatically disabled and the text is restored to its original font size.<\/span><\/p>\n<\/li>\n

            • \n

              Both states persist across save\/load and undo\/redo.<\/span><\/p>\n<\/li>\n<\/ul>\n

              These two modes are mutually exclusive – enabling one automatically disables the other.<\/em><\/p>\n

              Linked Text Boxes (Story Editor)<\/span><\/h3>\n

              For long-form content that flows across multiple pages – such as articles, stories, or reports – Open Publisher supports linked text boxes. When a text box overflows, you can link it to a second box on another page, and the content will flow continuously from one into the other.\"Linked<\/p>\n

                \n
              1. \n

                Insert two or more text boxes.<\/span><\/p>\n<\/li>\n

              2. \n

                Select the first (source) text box.<\/span><\/p>\n<\/li>\n

              3. \n

                In the Text Box Tools ribbon, click the Link<\/strong> button. Your cursor changes to a chain link icon.<\/span><\/p>\n<\/li>\n

              4. \n

                Click the second text box to complete the link.<\/span><\/p>\n<\/li>\n<\/ol>\n

                Text now flows between them automatically. Adding, editing, or deleting content in the first box causes the overflow to reflow into the linked box in real time. Links can be chained across as many text boxes as needed for multi-page articles.<\/p>\n

                \"\"<\/p>\n<\/div>\n","protected":false},"excerpt":{"rendered":"

                Paragraph Formatting & Text Flow Beyond basic font styling, Open Publisher offers advanced typographic controls for managing paragraph structure, alignment, and multi-page text flow. Open Publisher provides an Exact Line Spacing tool that overrides dynamic CSS line-height calculations and locks your text to absolute point measurements. To set exact line spacing: Select a text box. […]<\/p>\n","protected":false},"author":1,"featured_media":749,"comment_status":"open","ping_status":"open","template":"","knowledgebase_cat":[11],"class_list":["post-746","knowledgebase","type-knowledgebase","status-publish","has-post-thumbnail","hentry","knowledgebase_cat-typography"],"_links":{"self":[{"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/knowledgebase\/746","targetHints":{"allow":["GET"]}}],"collection":[{"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/knowledgebase"}],"about":[{"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/types\/knowledgebase"}],"author":[{"embeddable":true,"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/comments?post=746"}],"version-history":[{"count":34,"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/knowledgebase\/746\/revisions"}],"predecessor-version":[{"id":794,"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/knowledgebase\/746\/revisions\/794"}],"wp:featuredmedia":[{"embeddable":true,"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/media\/749"}],"wp:attachment":[{"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/media?parent=746"}],"wp:term":[{"taxonomy":"knowledgebase_cat","embeddable":true,"href":"http:\/\/acr.floydcraft.co.uk\/openpublisher\/wp-json\/wp\/v2\/knowledgebase_cat?post=746"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}