В предыдущем посте мы рассказали вам, что одной из главных целей участия в CeBIT 2012 было анонсирование нового онлайн редактора документов TeamLab. Сегодня поподробнее о редакторе (на данный момент он в beta версии), как пришли к идее его создания и как, в итоге, реализовали.
О каком бы проекте ни шла речь, работать с документами приходится всегда и, безусловно, нам всем хочется, чтобы редактирование файлов протекало с максимальным комфортом.
Будучи поставщиками онлайн инструментов для командной работы (от управления проектами до CRM), в определенный момент мы столкнулись с потребностью в собственном сервисе для работы с документами и начали разработку модуля, который вскоре перерос в довольно масштабный инструмент для работы с документами, презентациями и таблицами, интегрированный в систему Teamlab.
С чего начинали
Не секрет, что в сегменте document management первенство в ряду онлайн редакторов принадлежит Google, Microsoft и ZOHO. Разрабатывая первую версию нашего модуля управления документами, мы пошли уже проторенным путем и использовали известные методы: файлы конвертировались на сервере в html формат для дальнейшей работы в браузере, а для редактирования были задействованы ресурсы open source редактора CKEditor. Для сохранения результата работы мы подключили и обратную конвертацию — из html в желаемый формат.
В итоге, наш редактор столкнулся с теми же самыми проблемами, которые характерны для существующих онлайн редакторов: от скудного набора инструментов до серьезных ошибок при сохранении, конвертации и отображении.
О проблемах — больших и малых
Как и разработчики других онлайн-редакторов, сначала мы решили улучшить работу со страницами, а именно, сделать разбивку на страницы, ведь первое, что нужно пользователю даже при элементарном редактировании — это оценка объема документа, например, для его отправки на печать.
В чем же проблема разбивки на страницы? Существующие онлайн редакторы работают с одной html страницей, в независимости от того, сколько информации там помещается — на 1 страницу или на 700. Соответственно, чем больше этот документ будет, тем большего размера эта страница html получается. Другими словами, он представляется длинным рулоном, который нужно развернуть полностью, то есть «отрисовать» и «ПЕРЕрисовать» в случае внесения изменений. Именно поэтому между собой мы называем эту проблему в шутку «эффектом папируса».
Только два редактора из существующих, Zoho и Google Docs, достаточно активно развивают свои редакторы и тоже начали именно с этого — с разбивки страниц. Если у первых она, скажем так, примерная, реализована больше для визуализации и расположена там, где по приблизительным подсчетам должна заканчиваться страница, то у Google Docs вполне себе настоящая, но это лишь усугубляет «эффект папируса», т.к. документ приходится не только перерисовывать при внесении изменений, но и пересчитывать разбивку.
Проанализировав всё это, мы приняли решение полностью отказаться от старых методов.
Разработка с нуля
Проблему разбивки на страницы мы решили так, как это делается в десктопных редакторах: изменили архитектуру кода в части отрисовки документа — работа идёт только над видимой частью файла, отрисовка остального документа происходит, только если к нему происходит обращение.
Подойдя к решению задачи разбивки на страницы таким образом, мы также устранили проблемы:
— скорости работы (напр. при изменении гарнитуры шрифта) с многостраничными документами,
— зуммирования,
— отображения непечатных символов,
— изменения полей документов.
Задача идентичного отображения
Одновременно с этим, мы озадачились вопросом качественного отображения текста в разных браузерах и при печати. Несмотря на то, что для пользователя это одна проблема, программно она имеет две стороны — измерение шрифтов (получение метрик шрифта) и отрисовка текста в документе.
Дело в том, что текущие онлайн редакторы используют средства браузера как для измерения шрифта, так и для отрисовки текста. Однако, измерения, производимые браузером не точны и не содержат важных атрибутов, например, таких как надстрочные и подстрочные элементы и иные метрики. Более того, разные браузеры могут иметь собственные средства измерения, что приводит к некорректному отображению одного и того же документа в разных браузерах.
То же самое относится и к способам отрисовки текста. Существующие редакторы используют средства браузера, чтобы отрисовать текст на «холсте», предоставляемом ОС.
Именно поэтому при разработке нашего редактора нам пришлось создать как собственный движок для получения метрик шрифта, так и собственные методы для отрисовки на экране. В результате мы сами контролируем измерение шрифта и посылаем команды в свой «отрисовщик».
В решении задачи отрисовки текста нам бесспорно помогло появление новой технологии HTML5, в состав которой входит элемент canvas, дающий нам доступ к «холсту», а именно, к пикселям. Каждый элемент текста отрисовывается с точностью до пикселя и, соответственно, никак не зависит ни от браузера, ни от ОС.
Помимо идентичности отображения в различных браузерах мы смогли добиться отличного результата при печати документа, т.е. при сохранении файла в pdf. Хранение всех параметров в виде мета файла с набором команд избавляет от необходимости в какой-либо конвертации, которая всегда означает неизбежные потери.
Полученные преимущества
В итоге в отличие от всех существующих онлайн-редакторов, TeamLab Document Editor обладает следующими технологическими преимуществами:
- HTML5 набирает всё большую популярность, что гарантирует целый ряд новых улучшений и в дальнейшем;
- все примененные нами технологии, кроме отрисовки на canvas, могли бы быть применены и в нашем предыдущем редакторе, однако при использовании HTML5 они работают гораздо эффективнее;
- применение canvas позволяет производить собственную отрисовку;
- благодаря использованным технологиям добавление нового функционала будет абсолютно беспроблемным
Ну, и конечно, целым рядом важных плюсов для пользователей:
- идентичность текста на входе и выходе: обработанный файл сохраняет тот же самый стиль, абзацы, межстрочный и межсимвольный интервалы и т.д. при просмотре в любом браузере в любой ОС, а также при импорте и печати;
- широкий выбор опций для работы с таблицами, междустрочными интервалами, многоуровневой нумерацией, стилями текста и заголовков
- возможности беспрепятственной обработки многостраничных отчетов, деловой или финансовой документации в точном соответствии со всеми стандартами;
- отсутствие языковых барьеров благодаря максимальному количеству шрифтов, включая иероглифы;
- поддержку всеми современными браузерами, отсутствие необходимости использовать дополнительное ПО.
Для того, чтобы попробовать бета-версию нового редактора прямо сейчас, посетите демо-портал TeamLab Document Editor по адресу http://html5.teamlab.com
Автор: Galkinator
