Идеальный, на мой взгляд, вариант (живой реализации не видел):
1. Каждый объект вписан в прямоугольник известного (вычислимого размера)
2. Объекты объединяются в группы, внутри которых происходит их распределение в соответствии с выбранным алгоритмом (layout).
3. На границе описанного прямоугольника для каждого объекта определены якорные точки: по умолчанию они являются вычислимыми, но могут быть переопределены. Якорные точки обладают семантикой — их назначение задавать точку привязки данного элемента интерфейса в выбранном алгоритме расположения объектов в группе.
4. Группы являются объектами и имеют собственный описанный прямоугольник с якорными точками. Якорные точки группы могут вычисляться на основе якорных точек элементов группы.
Пример:
Объект 1 — фраза на английском языке с неразрывными пробелами "Hello, world" с внутренним отступом 0.1 em.
Якорные точки/семантика
1. середины сторон описывающего прямоугольника — алгоритм "выравнивание по центру"
2. базовая линия текста — алгоритм "выравнивание по базовой линии"
3. углы прямоугольника — алгоритм "выравнивание по границе" (top/bottom/left/right)
<text style="padding: 0.1em">Hello, world</text>
Объект 2 — изображение высотой 0.5 em, со смещенной на 0.5em вверх базовой линией
Якорные точки/семантика
1. середины сторон описывающего прямоугольника — алгоритм "выравнивание по центру"
2. точка, соответствующая базовой линии текста со шрифтом размера 0.5em, смещенной на 0.5em вверх — алгоритм "выравнивание по базовой линии"
3. углы прямоугольника — алгоритм "выравнивание по границе" (top/bottom/left/right)
<img src="my.svg" style="height:0.5em; anchor-baseline: -0.5em" />
Объект 3 — группа объектов 1 и 2 с алгоритмом "построчное размещение; выравнивание по левому краю; выравнивание по базовой линии", и точками вертикального выравнивания по центру, расположенными с отступом 0.3em от верхней границы объекта.
Объекты расположены относительно друг друга так, что правая точка базовой линии текста совпадает с левой точкой базовой линии изображения, если ширина позволяет разместить их на одной строке,
или так, что левый верхний угол изображения совпадает с левым нижним текста, если необходимо выполнить перенос.
1. Середины сторон описывающего прямоугольника — алгоритм "выравнивание по центру"
2. левая точка базовой линии текста и правая точка базовой линии изображения — точки базовой линии группы
3. углы прямоугольника — алгоритм "выравнивание по границе" (top/bottom/left/right)
<group style="layout: flow left baseline; anchor-center-vertical: absolute 0.3em">
<text style="padding: 0.1em">Hello, world</text>
<img src="my.svg" style="height:0.5em; baseline-offset-y: -0.5em" />
</group>
