Избегайте обертывания текста при выполнении анимации jQuery на размер шрифта

Question

У меня есть контент, который отображается в масштабе предварительного просмотра, используя em для всех, а затем масштабируя размер корневого шрифта, когда я хочу уменьшить/увеличить, так что вы видите полное содержание, нажав на превью, в какой момент я использую JQuery для анимации размера шрифта до 100%:

http://jsfiddle.net/5fCd5/3/

Так в основном:

CSS:

.example section { 
    font-size: 30%;  
} 

JS:

zoomed.animate({ 
    fontSize: '100%' 
}); 

Но посмотреть на скрипке, чтобы получить лучшее представление.

Проблема заключается в том, что, хотя контейнер масштабируется с размером шрифта, браузер будет обертывать текст в несколько разных точках всей анимации - я понимаю логистику, почему это происходит (разные пропорции символов при визуализации на разных размеры/намек и т. д.), но выглядит ужасно. Это гораздо более заметно в Chrome, чем в Firefox. Интересно, что IE10 не меняет места, где обтекание линий вообще. Это в Windows - возможно, для рендеринга шрифтов на OSX эта проблема не возникает.

Может ли кто-нибудь подумать о каком-либо исправлении или обходном пути?

Один из способов, который я рассматривал изначально был:

Создать предварительный просмотр на 100% размера шрифта, разделить текст на пробельных, добавьте его в контейнер одним словом, в то время, когда контейнер увеличивается в высоту МАГАЗИНУ позицию, затем оберните каждую строку в элементе пробелом без обертки и дайте переполнение контейнера: скрытое.

Однако, поскольку я хочу использовать произвольный HTML (включая изображения размером в em) для предварительного просмотра, это не реально.

Answer 1

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

http://www.fonts.com/search/web-fonts?searchtext=Helvetica+Monospaced&SearchType=WebFonts&src=GoogleWebFonts

Answer 2

Использование CSS письмо-интервал ТРАЕКТОРИЙ div.padder как:

letter-spacing: 1px; 

делает немного разницы, подумал я не знаю, если это именно изменение вы надеетесь.

Answer 3

Идея состоит в том, что, увеличивая регулярный текст, вы отдаете решение от , как, чтобы увеличить его до css/html. Вы хотите разработать метод, в котором у вас больше контроля над анимацией и масштабированием вашего текста.

Примером этого может быть преобразование текста в растровое изображение, а затем его масштабирование. Это было бы неплохим выбором по очевидным причинам, таким как высокая стоимость преобразования шрифта в растровое изображение, а также то, что растровое изображение будет выглядеть неравномерно после его масштабирования (т.е. есть потеря качества). Кроме того, даже при использовании css scale() вызывает около blurring при увеличении и уменьшении (см. Комментарии по оригинальному вопросу).

мое предложение:

1. Прежде всего convert вашего шрифта в брезентовой эквивалент, используя cufon. Для отображения шрифтов Cufon использует смесь Canvas и VML.
2. Использование cufon/canvas - хороший первый шаг. Однако, если вы посмотрите на пример cufonned text here, вы заметите, что если вы увеличиваете и уменьшаете масштаб, вы увидите тот же самый симплекс пикселизации/потери качества, который обычно ассоциируется с растровыми изображениями. Далее research доказывает, что масштабирование холста покажет пикселизацию (см. Этот пример http://jsfiddle.net/mBzVR/4/).
3. Чтобы обойти это, вместо простого масштабирования вашего холста, например, путем умножения и высоты на число. Вы можете сделать свой холст на 25 кадров в секунду (FPS), слегка увеличивая/уменьшая его размер в каждом кадре оказанные на 1/25 секунды. Я получил эту идею от Flot, которая представляет собой библиотеку jQuery для разметки холстов. Если вы посмотрите на пример своей домашней страницы, вы увидите анимированную диаграмму, панорамируя влево/вправо. Если вы сохраните эту страницу .. вы увидите что-то вроде этого в flot.demo.js:

flotcharts.org от:

// Update the random dataset at 25FPS for a smoothly-animating chart 
setInterval(function updateRandom() { 
    series[0].data = getRandomData(); 
    plot.setData(series); 
    plot.draw(); 
}, 40); 

Таким образом, вы можете полностью контролировать свою анимационную упаковку и убедитесь, что нет пикселизации/масштабирование происходит.

Answer 4

Hm. На моем Mac Firefox не имеет никаких проблем, но Chrome хуже, чем я думаю, вы заметили - текст превышает границы контейнера после изменения размера.

Думаю, нам, возможно, потребуется выполнить резервное копирование на один шаг и подумать над этим вопросом еще раз. Итак:

• существует сколь угодно размер (хотя одинаковые) контейнеры текст («текстовых контейнеры»)
• этих контейнеров содержатся в другом произвольно размере контейнера («внешний контейнер»)
• браузеров обруч текст в соответствии с тем, сколько слов может вписаться в ширину контейнера (при условии, что overflow: auto;)
• так, , предполагая, что все эти вещи сохраняют свои относительные размеры во время изменения размера, симптом, который вы описываете, должен быть невозможным (отсутствуют ошибки браузера и еще ...)

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

На моей машине (ноутбук, так что размеры пикселов невелики, но это не влияет на логику здесь), отдельные текстовые контейнеры (самый внутренний .padder) имеют соотношение сторон 143px/53px = 2.70, в то время как внешний контейнер (.examples) имеет соотношение сторон 526px/253px = 2.08.

Это имеет следующие последствия:

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

Существует только одно решение, я могу видеть в пр событие, которое вы испытываете: заставляет внешний контейнер и текстовые контейнеры иметь одинаковое соотношение сторон (т. поскольку любое решение, которое включает использование фактического текста HTML и, изменяет соотношение сторон во время преобразования, будет иметь одинаковую проблему).

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