Александр

Если не хочется переделывать как выше советовали, то я бы еще рассмотрел вариант "по-старинке": ссылки через map на img, клики обрабатываются скриптом и подключают одну из заготовленных картинок с выделенной областью.

Плюсы:
1. Можно сделать произвольное выделение, хоть даже свечение на соседние области, это не повлияет на регионы, т.е. точно как сделал дизайнер.
2. Можно довесить различные css-переходы например.

Минусы:
1. Нужно сделать картинки по кол-ву областей, соответственно либо предзагрузку довешивать, либо крупный спрайт, в ПНГ в приведенном виде не должен быть сильно "тяжелым").
2. Не очень удобно поддерживать (например добавлять области).

Бо большому счету никак: только у пользователя отрендерить и жаваскриптом опросить. Даже если взять какой-то конкретный браузер, то могут быть разные шрифты установлены, разные размеры базового шрифта в настройках. Не говоря уже о «мелочах» вроде погрешности различных режимов сглаживания. Например в cleartype может «набежать» несколько лишних пикселей в строке, перенесется слово, и дальше уже высота блока сильно вырастет.

Эм… а как в ворде можно судить про абсолютные размеры шрифта в пикселах, если там есть как минимум DPI документа и масштаб? А если глубоко копнуть, так наверняка еще какие-то масштабные преобразования найдутся. Не знаю, как сейчас, а во времена 97го ворда при изменении дефолтного принтера иногда съезжало размещение текста по страницам… WYSIWYG, блин :)

С другой стороны, браузерный pt вроде бы зависит от дефолтного DPI монитора, который установлен в ОС (тут могу наврать).

Касательно изначально вопроса, вероятно есть 1 немного кривой выход: сделать в ворде текст 100pt, замерять его размер в пикселах, после чего подобрать в браузере такой же размер в пикс (т.о. он не будет зависеть от выставленного DPI в ОС). Когда будет подобран — тогда число пунктов в ворде будет численно равно числу процентов в браузере. Т.е. 100pt в ворде = 100% в браузере.