Авторазмер доски вылета с использованием HTML, CSS и JQuery

Question

Мне нужно разработать табло прибытия и отправления с автоматическим масштабированием на работе.

Это началось достаточно легко, когда я создал таблицу с шириной столбцов в процентах (а общая таблица была 100% ширины).

На данный момент у меня есть небольшой кусочек JQuery, позволяющий мне изменить масштаб моего текста, но это только для подтверждения концепции.

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

Однако я немного застрял, с чего начать. Сейчас я активно развиваю это, но мои первые мысли:

scale = maxstringwidth_inpx / currentcellwidth_inpx

Где бы я рассчитал maxstringwidth, имея таблицу поиска и метрики шрифта для символа размером 1em на экране.

Все ячейки имеют назначенные проценты экрана, поэтому я должен иметь возможность прочитать их напрямую.

Тогда я могу установить размер шрифта, например:

$("body").css("font-size", currentfontsize_px * scale);

Звучит ли это осуществимым подходом? Это также поднимает вопросы о заполнении над и под каждой строкой в ​​каждой ячейке, но я уверен, что я могу сделать кое-что подобное и там.

Чтобы квалифицироваться, где я застрял:

1. Есть ли примеры такого рода вещь в дикой природе (я не мог найди любую)
2. Имеет ли мой подход подводные камни?
3. Вы делали это раньше а можете поделиться мудростью / приемами?
4. Я выстрелил себе в ногу уже и должны рассмотреть другой подход?

Я упомянул об использовании Flash для PM в качестве средства автоматического масштабирования текста, поскольку мы можем затем сделать множество метрик шрифта в ActionScript. Тем не менее, я только начинаю с того, что использую .NET flash IDE, поэтому я ограничусь этим в качестве платформы разработки.

Спасибо за любые советы, примеры и советы!

Simon

Answer 1

Чтобы избежать проблем с разными размерами шрифтов в разных ОС / браузерах, вы можете Рассчитать ширину текста с помощью Javascript , чтобы убедиться в правильности базового размера, с которого вы начинаете масштабирование.

Answer 2

CSS и HTML могут быть очень привередливы, когда дело доходит до такого рода вещей, тем более что размер шрифта может сильно отличаться на разных компьютерах. Например, если вы используете шрифт, скажем, Verdana. Это довольно распространенный шрифт. К сожалению, способ, которым Mac, Windows и Linux рендерит, немного отличается. На самом деле нет никакого способа гарантировать ширину / высоту «хорошего» (немонокального) шрифта, если только приложение не будет использоваться в очень строго контролируемой среде.

Я обычно не сторонник использования Flash, но, если это вариант, это действительно единственный способ гарантировать, что что-то будет выглядеть так, как ожидалось, поскольку вы можете встраивать шрифты и, как вы упомянули, гораздо больше контроля во Flash больше, чем в CSS. Вы собираетесь сделать довольно сложную разработку в CSS и jQuery для достижения тех же самых эффектов - и даже тогда у вас все еще будут трудности между браузерами и операционными системами.

Но, если вы решите сделать это в CSS / jQuery / HTML, убедитесь, что вы используете ems везде - без пикселей.

Удачи, и дайте нам знать, что вы решите сделать в конце.