Align_labels and Align_numbers

john's Avatar

john

08 Apr, 2023 09:59 PM

TWO new nodes, designed to work together: align_labels and align_numbers.

Arranging labels and numbers in neat columns is a bit of pain in Nodebox - if you're fussy. The stack node is great for quick and dirty columns, but the labels don't line up into neat rows because of variations in labels with and without descenders (g, j, etc) and other variations in overall height. The distribute node has top, middle, and bottom, but no baseline mode to set text precisely on baselines. You can use grid and translate nodes, but these requires a bunch of math and fiddling to get both the spacing and the top of the column lined up.

The align_labels node takes a list of strings and four parameters:

  • Font name
  • Font size
  • Alignment (Left, Right, or Center)
  • Leading

It returns text paths that start on the origin baseline and proceed downward (so adding rows makes the column longer while leaving the top label fixed). The labels are evenly spaced baselines regardless of capitals, descenders, and other height variations. They are arranged to the left, right, or center of the Y axis; you can then use a translate node to shift them left or right as needed to form tables.

The align_numbers node also starts at the origin and proceeds evenly downward, precisely matching labels if given the same font size and leading. But instead of aligning left, right, or center of the Y axis, they align precisely down the center of the decimal points, even with fonts that are slanted or lavishly kerned. If the numbers are all integers with no decimal points, they are right-aligned. If you need a column of integers left or center aligned, you can use align_labels or add an align node after align_numbers with Vertical Align set to "No Change".

In addition to providing decimal alignment, align_number offers several other settings:

  • Precision (how many numerals after the decimal point)
  • Trailing zeros checkbox (add extra zeros to the precision so all decimals line up on the right)
  • Format options:
    • Parens: show parentheses instead of minus signs for negative numbers
    • Separators: include locale-specific grouping separators for big numbers (commas or periods every three digits)
    • Both
    • Neither

With these two nodes you can make precise tables, cleanly-labeled charts, etc. The attached demo shows both in action to make a simple table. I also show how to add a little extra space and an underline for a Total row.

Please give these two nodes a workout and let me know if there are other adjustments or formatting features you would like to see. Both of these node will appear shortly in version 3.2 of my Cartan Node Library.

John

Reply to this discussion

Internal reply

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

Attaching KB article:

»

Already uploaded files

  • labels_and_numbers_screenshot.png 427 KB
  • labels_and_numbers_demo.ndbx.zip 5.92 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

01 Oct, 2024 07:59 AM
30 Sep, 2024 11:37 PM
30 Sep, 2024 11:11 AM
30 Sep, 2024 02:37 AM
28 Sep, 2024 10:33 AM

 

26 Sep, 2024 06:41 AM
24 Sep, 2024 12:32 AM
24 Sep, 2024 12:27 AM
13 Sep, 2024 12:07 AM
12 Sep, 2024 11:54 PM
07 Sep, 2024 05:16 AM