Place_Text Node

john's Avatar

john

20 Jun, 2025 05:07 AM

Place_text is a companion to my new place_node. It is specifically designed to place blocks of text Into typographic grids. This is a whole new way of thinking about object placement in Nodebox.

Place_text takes seven parameters:

  • Grid Cell. A rectangular grid cell sliced from a layout of such cells. Text will be anchored to this cell (and will move or resize with it).
  • Text. The text to be placed. Multiple spaces between words will be reduced to single spaces.
  • Font Name. The font used to render the text.
  • Font Size. The font size used to render the text.
  • Alignment. One of nine possible alignments: Upper Left, Upper Mid, etc.
  • Offset. Additional space from the edge of the cell in pixels.
  • Width. The text width to determine line breaks. If set to -1, line breaks will be determined by the cell boundaries.

Place_Text is similar to Place, but has several differences:

  • Text is always placed inside the cell; there is no option to place it outside. However, you can use negative offsets to achieve similar effects if need be.
  • Text placed at the bottom of the cell (Lower Left, Mid, or Right) will align based on the baseline of the final line of text in a text block. As a result, characters with descenders may protrude slightly below the cell when offset is 0. If this is not desired, it can be corrected by increasing the offset.
  • Text placed at the right edge of the cell (Upper Right, Mid Right or Lower Right) will be completely right justified. Unlike normal right alignment using textpath, every line of a multi-line text block will be adjusted so that all lines extend to the right edge of the cell.

DEMO

For the demo I recreated a typography lesson page I found on the web. The layout consists of 20 major cells with margins, plus 5 minor cells tied to the top row of major cells needed to form a menu bar. Some of the text is confined within cells (width = -1); some text spills beyond its parent cell. There are also several graphic elements (an arrow, menu icon, and magnifying glass) created and/or placed using the place node.

I found that this somewhat complex layout was quite easy to make. Once it was done, I was able to adjust the cell sizes and margins to perfectly size the overall layout; as I did so the text and other elements automatically followed along and stayed nicely lined up. The guidelines also made it easy to determine the correct font sizes for the various elements. Placing these 15 elements using the normal Nodebox methodology would have been trickier and more frustrating to set up, and would then be painful to adjust holistically.

Try adjusting the layout by changing the width and height in the grid_plus node, or by altering the dimensions of the rect2 node. I think you'll find it's both fun and powerful. This node has already changed the way I approach layout in NodeBox.

Reply to this discussion

Internal reply

Formatting help / Preview (switch to plain text) No formatting (switch to Markdown)

Attaching KB article:

»

Already uploaded files

  • place_text_screenshot.png 662 KB
  • place_text.ndbx.zip 156 KB

Attached Files

You can attach files up to 10MB

If you don't have an account yet, we need to confirm you're human and not a machine trying to post spam.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac

Recent Discussions

14 Jul, 2025 10:54 PM
06 Jul, 2025 10:35 PM
01 Jul, 2025 01:01 AM
29 Jun, 2025 04:39 AM
27 Jun, 2025 06:35 PM

 

25 Jun, 2025 08:54 AM
23 Jun, 2025 04:02 AM
21 Jun, 2025 08:45 AM
20 Jun, 2025 05:07 AM
19 Jun, 2025 10:26 PM
17 Jun, 2025 06:15 AM