Text Positioning

Overview

Precise positioning of text labels is essential for producing clear, readable diagrams. Neural Sketch provides intuitive positioning keys allowing exact placement of text around blocks and containers. Whether you're labeling network nodes, algorithm steps, or diagram annotations, these controls offer effortless fine-tuning.

Positioning Syntax

Neural Sketch uses an intuitive, compass-direction-based syntax to precisely control text positioning and styling around diagram components.

Basic Text Positioning

Use the text-<compass-direction> key to place text labels at specified compass directions relative to a shape. By default, the text is centered along the chosen compass direction.

text-<compass-direction>=<value>

Example:

text-north=Hello

This places the text "Hello" directly above the shape, centered horizontally.

Adjusting Text Alignment

To adjust horizontal or vertical alignment relative to the compass direction, append the -loc suffix:

text-<compass-direction>-loc=<alignment>

Valid alignments depend on the direction:

• For north/south positions, valid alignments are west, center, and east.
• For east/west positions, valid alignments are north, center, and south.

Example:

text-north-loc=west

This aligns north-positioned text to the left (west).

Styling Text Labels

You can also inject custom styles into your text labels using the -style suffix:

text-<compass-direction>-style={<styles>}

Example:

text-north-style={red, font=\bfseries}

This example styles the north-positioned text label in bold and red.

Examples

Default Text Placement

By default, text labels are aligned at their respective compass directions (north, south, east, west) or centered within the block:

\nskContainer[
	id=ab,
	text-north=Default,
	border-type=dashed,
	fill=nskMainAccent!20,
	border-color=nskMainAccent,
]{
  \nskBlock[
    width=2cm, height=2cm,
    text-north=-north,
    text-south=-south,
    text-center=-center,
    text-east=-east,
    text-west=-west,
  ]
}

Adjusting Horizontal Alignment

Labels placed north or south can be adjusted horizontally (west, east, or center). This is particularly useful when labels risk overlapping or you require a consistent horizontal alignment:

\nskContainer[
	id=ab,
	text-north=Horizontal,
	border-type=dashed,
	fill=nskSecondaryAccent!20,
	border-color=nskSecondaryAccent,
  pos={right=.5cm of ab}
]{
  \nskBlock[
    width=2cm, height=2cm,
    text-north=-north,
    text-north-loc=west,
    text-south=-south,
    text-south-loc=west,
  ]
}

Adjusting Vertical Alignment

Similarly, labels placed east or west can be vertically aligned (north, south, or center) to ensure readability and alignment precision:

\nskContainer[
	id=ab,
	text-north=Vertical,
	border-type=dashed,
	fill=nskSecondaryAccent!20,
	border-color=nskSecondaryAccent,
  pos={right=.5cm of ab},
]{
  \nskBlock[
    width=2cm, height=2cm,
    text-east=-east,
    text-east-loc=south,
    text-west=-west,
    text-west-loc=south,
  ]
}

Styled Text Labels

You can style text labels individually using the {direction}-style key. This lets you highlight important labels or visually differentiate annotations:

\nskContainer[
	id=ab,
	text-north=Styled Labels,
	border-type=dashed,
	fill=nskMainAccent!20,
	border-color=nskMainAccent,
]{
  \nskBlock[
    width=2cm, height=2cm,
    text-north=-north,
    text-south=-south,
    text-center=-center,
    text-center-style={fill=nskMainAccent},
    text-east=-east,
    text-west=-west,
  ]
}

Best Practices

• Use consistent alignment: Align related labels similarly for visual clarity.
• Avoid overlaps: Leverage positional adjustments to prevent labels from intersecting other diagram elements.
• Highlight with care: Sparingly use distinct styles for emphasis to maintain readability.

Reference