Basic bxr

bxr is a Box Layout Engine with Back-propagation.

https://github.com/drom/bxr

It takes JsonML formated Array and returns SVG string.

Box packing

bxr has 6 main functions for box packing:

left, center, right - will pack elements vertically, aligning them accordingly. top, middle, bottom - will pack horizontally.

wd({bxr: ['left', 'Star', 'Lennon', 'McCartney', 'George'], config: {padding: 4, opacity: .1}})
wd({bxr: ['center', 'Star', 'Lennon', 'McCartney', 'George'], config: {padding: 4, opacity: .1}})

you can use unicode characters in the text.

wd({bxr: ['right', 'Star 🥁', 'Lennon ☮', 'McCartney 🎹', 'George 🎸'], config: {padding: 8, opacity:.1}})

top, middle, bottom - will pack horizontally.

text can be rotated by prefixing it with (rot<angle>), where <angle> is the angle in degrees.

wd({bxr: ['top', 'Star', '(rot-90)Lennon', 'McCartney', '(rot-90)George'], config: {padding: 8, opacity: .1}})

Outer box will be created automatically to fit all the inner boxes or text.

wd({bxr: ['middle',
  ['top', 'Star'],
  ['top', `(rot${angle})Paul McCartney 🎹`],
  ['top', 'Lennon'],
  ['top', 'Harrison']
], config: {padding: 8, opacity: .1}})

You can use box element to create a box with custom width and height. All standard SVG elements are supported: rect, circle, line, path, etc…

Two additional attributes need to be specified: w and h - width and height of desired space.

wd({bxr: ['middle',
  ['box', {w: 60, h: 60}], ['box', {w: 20, h: 20}],
  ['center',
    ['box', {w: 20, h: 20}],
    'Hello',
    ['circle', {
      w: 32, h: 32, // additional attributes
      r: 16, cx: 16, cy: 16, fill: '#0a0'
    }],
    ['top', {fill: '#000', multiple: [3, 10, -10]}, 'Alice Copper'],
    ...Array.from({length: 3}, () => ['rect', {
      w: 40, h: 20, // additional attributes
      width: 40, height: 20,
      fill: '#fff',
      stroke: '#000',
      'stroke-width': 3
    }])
  ],
  ['right',
    ['box', {w: 32, h: 32}], 'John', ['box', {w: 8, h: 64}], 'Lennon', ['box', {w: 64, h: 8}]
  ]
], config: {padding: 5, opacity: .1}})