Расчет на стороне сервера для ширины текста на стороне клиента

Question

Среда: Приложение ASP.NET MVC C #.

Бизнес-кейс: создание диаграммы, включающей вертикальный столбец с помеченными прямоугольниками, с использованием элементов div для графики итекст внутри div для меток.Div и метки имеют фиксированную ширину и переменную высоты.Высота метки , основанная на количестве строк, определяет высоту div , которая, в свою очередь, определяет верхнюю позицию следующего ниже div / графика нижеЭто.(См. Изображение ниже).

Архитектура кода: графические высоты и верхние позиции рассчитываются на сервере, а также экспортируются для использования в других графических форматах;изменение местоположения этого кода не входит в сферу применения.Клиентский JS-код использует «перенос слов» и «разрыв-слово» для удобного размещения меток в элементе div / graphics (с усечением с использованием «overflow hidden» по мере необходимости).

Код детали: Высота метки в настоящее время рассчитывается на сервере путем поиска разрывов строк.Разрывы строк определяются путем подсчета символов (а также выполнения сложных операций с «символами разрыва», например пробел, тире, запятая).Предел количества на сервере для одной строки составляет 20 символов (это можно легко изменить).

Проблема: В JS / CSS разрывы строк отличаются от вычислений на стороне сервера, в основном потому, чторазличий в ширине символов.Например, «BBBBBBBBBBBBBBBBBBBB» будет шире, чем «iiiiiiiiiiiiiiiiiiii» на клиенте (как показано здесь).

В результате «B» будет перенесено после 17 символов и потребует две строки, которые »«1» будет помещаться на одной строке.

Проблема в том, что в некоторых случаях сервер будет рассчитывать потребность в высоте в две строки, когда на дисплее клиента отображается только высота одной строки.В этом случае div выше, чем должно быть, и положение div ниже него ниже, чем должно быть.(Бизнес-кейс был упрощен; визуальный результат в реальном случае немного сложнее из-за проблемы с высотой div.) *

Необходим: способ более точного расчета ожидаемого количества строк для меток насервер, так что соответствующие высоты div и соответствующие верхние позиции на клиенте более точно изображены.

Рассмотренные альтернативы:

1) уточняют серверкод стороны, используя регулярное выражение или другое для учета символов верхнего регистра.Это кажется выполнимым, но грязным.

2) использовать графический класс на сервере для создания виртуальной графики, поместить в нее текст и проверить его на наличие разрывов строк.Кажется, что это может потенциально сработать, но не ясно, что технология существует, и она может быть неэффективной.

Вопросы

A) Является альтернативой 2 техническивыполнимо?

B) Есть ли другие альтернативы, которые могут быть рассмотрены?

Answer 1

Вы не можете просто полагаться на длину строки, чтобы определить, насколько она будет на самом деле широкой.Ширина шрифта символов - это то, что может создать вам проблему.Я не такой широкий, как W, поэтому ваш расчет всегда будет неточным.Вы можете использовать этот код для определения общей длины вашей строки:

using (System.Drawing.Graphics graphics = System.Drawing.Graphics.FromImage(new Bitmap(1, 1)))
{
    SizeF size = graphics.MeasureString("Hello there", new Font("Segoe UI", 11, FontStyle.Regular, GraphicsUnit.Point));
}

Просто сделайте некоторое простое деление, чтобы использовать общую длину / желаемую ширину, и это должно сказать вам, сколько строк займет текствверх.Это все меняется, если пользователь использует другой шрифт, чем тот, который вы использовали для его расчета.