У меня есть некоторые критические номенклатурные метки для некоторых продуктов, и я хотел бы объяснить их, используя диаграмму с ярлыками прорыва, что-то вроде этого:
То есть у меня есть какой-то длинный и загадочный ярлык ( "A-253-QZ" в этом примере, в реальном мире обычно есть 8-10-12 компонентов), и мне нужно объяснить его части, что "A" означает обозначение серий, "253", например, "максимальная скорость" и "QZ" являются приемлемыми типами батарей.
Мне нужно сгенерировать эти диаграммы "на лету", поэтому я бы предпочел, чтобы он был выложен с помощью HTML + CSS.
Мое лучшее усилие до сих пор представляет собой сложную таблицу, которая использует свои границы для рисования этих строк прорыва - JSBin. Это выглядит так:
Я понимаю, что он довольно субоптимальный:
- он использует HTML-таблицы для форматирования, то есть зло
- вертикальные линии правильно центрированы, но он генерирует ад столбцов, чтобы сделать это
- горизонтальные линии не выровнены по центру линии, а внизу
- горизонтальные линии не касаются конца заголовков объяснений
Любые идеи, как сделать это лучше/без таблиц/исправить упомянутые проблемы? Любые идеи по лучшему представлению концепции?