вторник, 28 марта 2017 г.

Что делать c растеризацией текста?

Наша самая заметная техническая проблема с прототипированием интерфейсов – растеризация текста. Алгоритмы растеризации текста заметно отличаются в Windows (и, соответственно, в стационарном ПО, в частности – во всех браузерах, кроме Safari) и в программах авторинга. В результате всякий раз, когда нам важны характеристики текста в интерфейсе (например, влезает строка или не влезает, насколько она хорошо читается в соотвествующем кегле) приходится работать чуть ли не наобум.

  • В InDesign растеризация своя. На части объектов её можно подавить, но тоже получается плохо.
  • В PDF растеризация тоже своя; отличия от InDesign невелики, но заметны.
  • В Photoshop сразу несколько алгоритмов растеризации, но ни один не совпадает с алгоритмом Windows.
  • Как ни странно, в Fireworks, который ныне продается как средство прототипирования, тоже свой растеризатор. Его ужас в том, что он растеризует похоже на Windows, но использует какие-то внутренние и непонятные единицы измерения (восемь пунктов в Fireworks ≠ восьми пунктам в Windows для обоих стандартных разрешений). Кроме того, он что-то делает с апрошами, так что строки при равных кеглях получаются немного другой длины.
  • Я возлагал большие надежды на Pencil, но у него те же проблемы, что и в Fireworks.

Сейчас мы это проблему никак не решаем за неимением решения. У нас есть тестовая таблица кеглей стандартных шрифтов в Windows и только. Поэтому прошу помощи зала – в чём лучше всего сейчас моделировать стандартный Windows-набор?


Комментарии:

Золотов Андрей:
Когда-то я наткнулся на плагин к фотошопу, очень близко имитирующий сглаживание Windows. Стал изучать проблему глубже и выяснил интересный момент.

У разных ЖК-мониторов в пикселе разная последовательность субпикселей(1/3 пикселя с определенным цветом). У каких-то компаний стандарт R-G-B, а у каких-то B-G-R.

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

Так вот, большим удивлением был тот факт, что скриншот со сглаженным Windows текстом, сделанный на одном мониторе может некорректно отображаться на другом мониторе (насколько помню, в паре несовместимых мониторов фигурировал NEC). Выходит, что плагин к фотошопу не подходит, просто картинкой не обойтись — нужна среда, которая бы при отображении растеризовала текст виндовым способом.

Мне кажется, поддержки такого сглаживания в продукатх Adobe можно и не ждать, мне профит не очевиден. Но они ведь не так давно открыли стандарт PDF, может кто-то, хоть тот же микрософт, сделает просмотровщик пдф с нужным сглаживанием.

Да, есть уже готовая среда для разработки интерфейсов от Microsoft — Expression Blend ;)

Золотов Андрей:
Хм, пошел искать нет ли официального Microsoft’овского просмотровщика PDF и наткнулся на программу Foxit Reader, которая при сглаживании использует субпиксели. http://www.foxitsoftware.com/

Пока не понял так же, как windows, но внешне похоже. Правда размеры шрифты не совпадают, надо ещё поиграться с разрешением.

LXj:
Хм, подгонять текст таким образом — это как-то неправильно. А что делать, если нужно будет поправить строку из-за изменения функциональности? Или, оужас, сделать локализацию, после чего все строки поплывут? Я уж не говорю о том, что программы иногда приходится портировать на другую платформу, где растеризация выглядит по-другому (Мак) или вообще неизвестно как (Линух). Не логичнее ли использовать решения с “растягивающимся” дизайном? (большая часть современных тулкитов, вроде Qt/Gtk, умеют “растягивать” диалоги под содержащийся текст)

Aleks Ritov:
Это одна из причин, почему я люблю делать прототипы в хтмле. Да, да, всё понимаю. Но все равно люблю :)

Артём Сапегин:
Если правильно вас понял, то кроме Сафари 3. В 4-м Сафари для Виндоуса по умолчанию используется ClearType.

frst:
Самое простое - заверстать в хтмл. Есть визио еще, там можно выбирать метод сглаживания.

2Золотов Андрей
дайте ссылочку чтоли

Золотов Андрей:
2 frst: Ссылочку на что? На Foxit Reader дал ссылку выше.

frst:
ссылку на foxit reader я могу найти сам
а вот с “плагин к фотошопу” все сложнее

Федор Борецкий:
Ну, если это настолько критично… С учетом замечания Андрея о том, что растризация меняется от монитора к монитору, и что для “кошерной” растризации действительно нужна не столько среда проектирования, сколько среда отображения, можно сделать забавное умозаключение: использовать в качестве растризатора саму Windows. Т.е. проще в какой-нибудь визуальной среде программирования экраны и набросать. Внешний вид будет не очень сложно создать. А если времени/ума/сил хватит, то в прототипе может даже некая интерактивность появиться. Причем “идентичная натуральной” ;)

Visual Studio? Blend? Если нужна сверхдостоверность, то работать надо на инструменте заказчика. Собственно “1C”, начиная с какого-то момента, просил создавать именно в их внутреннем конструкторе.

P.S. Все вышесказанное не имеет никакого отношения к Web и HTML. Не вижу смысла задумываться над растеризацией если неизвестно каким на самом деле шрифтом и размером все это будет отображаться. Тут дизайнеру надо играть в другие игры.

Золотов Андрей:
frst: Sharptype 3.0 http://photoshop.pluginsworld.com/plugins/adobe/659/graphest/sharptype-3-0.html



Другие посты по этой теме:



Комментариев нет: