2024 Group 6

On 08/02/2024 by: 2024-group6

Margin and Spacing Tool



User’s Goal:

Add and manage spacing between objects


Manipulate spacing of text

Our tool reifies margins and spacing by associating each object with a bounding box, depicting its margins on all sides. The user can directly manipulate and modify this margin, and apply it to other objects of any type. It also depicts distances between objects, allowing the user to manipulate these distances, lock them, link them with other distances, and assign them as margins to other objects, or as distances between two other objects.

  • Lo-Fi
  • Hi-Fi
  • Demos

Instrumental interaction


Our tool turns setting the spacing between two elements into a persistent margin surrounding the target object.


Margins can be applied to all types of objects, including text.


The user can pick up the margins of an object by holding down left click, drag it, and release it onto the target object to apply the margins to the latter.

The relationship between two objects with (or without) margins is reified. The user can lock the distance between two objects to ensure the persistence of the relationship.

Spacing relationships can also be applied in different contexts, such as between words in a line of text.

The user can grab a relationship between two objects and apply it to two others.

  • Lo-Fi
  • Hi-Fi
  • Demos

Human-Computer Partnership


When an object is selected, a small indicator appears in its top-left corner. Hovering over it shows a ghost of the margin. Clicking on it shows the margins of the object and allows the user to manipulate them.


The user can manually draw the desired margin, which is turned into a bezier curved path.


The user can use margins and spacing for different purposes, such as remapping the bounding box of the object to access its center and snap other objects to it.

After manipulating a margin or a distance, and after a few instants of no activity, the system would show a small feedforward for a possible next action (if any).

The user can directly tweak a bezier curved margin (or any margin), and appropriately affect the surrounding objects.

The user can save custom margins or formulas for later use, and directly apply them to objects.