Текст с тенями: CSS или графика?

Question

У меня есть внутреннее веб-приложение с изображением вверху страницы, в настоящее время содержащее текст на английском языке с тенями. Теперь мне нужно предоставить локализованные версии этой страницы для разных языков. Мой основной выбор:

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

Есть ли другие варианты? Это для образовательной среды, я не могу контролировать браузер, используемый студентами.

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

Answer 1

Лично я большой поклонник техник CSS для визуальных эффектов, подобных этой. Большим преимуществом является то, что вы перекладываете обработку эффекта на клиентскую сторону, экономите время и время создания контента (пользовательские текстовые изображения для каждой локали - это большой заказ!) И ускоряют загрузку страницы для пользователя.

Единственная причина избегать этого - если вы абсолютно ДОЛЖНЫ иметь тени в очень старых (IE5) браузерах без поддержки CSS.

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

Answer 2

Создание изображений по запросу на стороне сервера для каждого языка, в комплекте с тенями. Кэшируйте их по мере необходимости.

Если вы можете использовать Image Magick, вы можете обратиться к этому руководству для генерации текста + тени ...

Answer 3

Хорошо, Safari поддерживает запатентованное свойство CSS для теней, но оно не будет работать в других браузерах. CSS3 также будет иметь тени (на самом деле только один для блоков, но, возможно, его можно использовать и для текста, например, когда блок имеет прозрачный фон).

Но, учитывая, что большинство браузеров пока не поддерживают 100% CSS2, я думаю, вам нужно выбрать один из двух вариантов. Конечно, есть не такой сложный трюк CSS, чтобы получить тень:

Тени для всех

Но они выглядят не так хорошо, как настоящая тень, поскольку они не размыты. Кроме того, вам нужно иметь текст дважды в HTML, чтобы они работали.

Answer 4

Сохранение изображений с текстом может быть проблемой - даже без локализации я бы этого избегал.

Два варианта, которые я бы попробовал перед тем, как перейти к вашим вариантам:

• В поисках бесплатной программы, которая генерирует теневые изображения, которую ваша программа может использовать всякий раз, когда обнаруживает, что для заголовка доступен новый текст
• Использование теневого изображения, которое можно повторить как фоновое изображение под текстом

Если это не сработает, я попробую CSS, но протестирую его в максимально возможном количестве браузеров, прежде чем начать работу с ним.