Делимся опытом: как мы создали онлайн редактор документов на Canvas HTML5

8 ноября 2012, 10:55
Не важно, над каким проектом вы работаете. Рано или поздно вы предпочтете бумажным документам электронные. Мы не стали исключением. Будучи провайдером сервиса для малого и среднего бизнеса, мы прекрасно осознавали, насколько важна для команды отлаженная система совместной работы с документами. При этом, ни одно из существующих решений не удовлетворяло нашим запросам. Что нам оставалось делать? Создавать собственный! О том, с чего начиналась наша разработка, как мы пришли к HTML5 Canvas, и что получилось в итоге, мы с радостью расскажем в этом посте.

Как все начиналось

Говоря об онлайн редактировании документов, первым делом все, конечно же, вспоминают о таких гигантах, как Google, Microsoft и Zoho. Сперва мы тоже пошли по проверенному пути и попробовали использовать аналогичные разработки на HTML4. - Чтобы сделать возможной работу редактора в браузере, мы организовали конвертацию файлов в формат HTML на собственном сервере. - Возможность редактирования текста была реализована за счет CK-эдитора - всем известного редактора с открытым исходным кодом. - Ну и чтобы пользователи смогли сохранить свой документ, мы подключили обратную конвертацию из HTML в желаемый формат. Нельзя сказать, что результат нас полностью удовлетворял - впрочем, ничего удивительного в этом также не было. Наш первый редактор сталкивался с теми же проблемами, что и его предшественники: небогатый функционал, существенные недочеты при отображении в разных браузерах, конвертации и печати документа.

Учимся на чужих ошибках

Одна из основных потребностей для пользователя - возможность работать в привычном режиме с документом любого объема. Однако метод, применяемый десктопными редакторами для разбивки документа на страницы - это настоящий вызов для SaaS. Дело в том, что облачные редакторы способны работать лишь с одной HTML страницей вне зависимости от того, сколько информации она содержит. Другими словами, если вы возьмете 700-страничный документ, ваш браузер будет по-прежнему рассматривать его как единую HTML страницу - огромный объем данных, который нужно обрабатывать полностью каждый раз, когда делается малейшее изменение в документе. Мы в шутку назвали это "эффектом папируса". Есть два онлайн редактора, которые справляются с этой проблемой - это Zoho и Google Docs. Zoho приблизительно "определяет" границы страниц документа и таким образом делит файл на части, что прилично ускоряет работу редактора. Однако проблему печати документа это, к сожалению, не решает - то, что выходит из принтера, чаще всего не соответствует тому, что вы видите на экране. Google справляется с этой задачей немного лучше, однако, на скорости работы это не отражается: если попытаться открыть в нем страниц 100, да еще и с картинками, скорее всего, придется перезагружать браузер после каждого внесенного изменения. Посмотрев на чужие ошибки, первым делом мы отказались от проверенных методов и решили сделать действительно качественную разбивку на страницы.

Начинаем все с начала

Естественно, в качестве ориентира мы взяли самые популярные оффлайн редакторы документов и их принцип работы. Полностью изменив архитектуру кода, мы добились своей цели: все операции совершаются лишь на видимой части документа, в то время как к оставшейся части файла редактор обращается лишь в случае необходимости (выделить все, обновить страницу и т.п). Таким образом были решены следующие проблемы: 1) низкая скорость при работе с многостраничными документами; 2) зуммирование. (изменяется масштаб самого документа, а не окна браузера); 3) отображение невидимых символов; 4) возможность изменения границ;

Эффект изломанного телефона.

Еще одна серьезная проблема существующих онлайн редакторов - это неидентичное отображение документов в разных браузерах, форматах и, что немаловажно, при печати. С точки зрения пользователя это выглядит как единая проблема, но для разработчиков это как минимум две задачи: измерение шрифтов (определение метрик каждого шрифта) и отрисовка текста в документе. Чтобы вы понимали, о чем речь, давайте загрузим один и тот же документ в Google Drive, Zoho Writer и Office365 и откроем в режиме редактирования. Вот исходный документ, созданный в MS Word 2010: исходный документ А вот как он отобразился в редакторах: 1) Google google drive edit mode 2) Zoho Writer zoho edit mode 3) И самое интересное - Office365: office 365 edit mode Существующие онлайн редакторы используют инструменты браузера как для измерения, так и для отрисовки текста. Однако такие измерения по определению не могут быть точными. Кроме того, ни один браузер не может работать с целым рядом атрибутов, таких как надстрочные и подстрочные интервалы. Инструменты измерения у каждого браузера индивидуальные, а это, естественно, ведет к существенным различиям в отображении одного и того же документа, скажем, в Mozilla и в Chrome. То же самое, естественно, относится и к браузерной отрисовке текста. Именно поэтому при разработке HTML5 редактора нам пришлось создать как собственный движок для получения метрик шрифта, так и собственные методы для отрисовки на экране. В результате мы сами контролируем измерение шрифта и посылаем команды в свой «отрисовщик». интервалы междустрочные teamlab Благодаря использованной технологии, мы получили массу преимуществ, в том числе гибкую настройку межстрочных и межбуквенных интервалов. Конечно, стоит отдать должное в первую очередь технологии HTML5, а если быть точнее - элементу Canvas, который дал нам полный доступ к пиксельной отрисовке текстов. Каждый элемент отрисовывается в точности до пикселя и его последующее отображение никак не зависит ни от браузера, ни от операционной системы. Помимо идентичного отображения необходимо было добиться и качественной печати (и, соответственно, конвертации в формат PDF). Сохранение всех параметров в мета-файле вместе с набором команд позволяет пропустить процесс конвертации, во время которого и происходит потеря форматирования.

Картинка стоит тысячи слов

Сегодня редактор - это часть виртуального офиса TeamLab, и мы продолжаем усиленно над ним работать. Так, например, недавно мы выпустили в бета версию редактор электронных таблиц, на подходе совместное редактирование, комментирование и редактор презентаций. И, кстати, вот как выглядит тестовый документ на редактировании в Teamlab: (справа оригинальное изображение в MS Word 2010, слева - открытое на редактировании в нашем редакторе) teamlab editor vs ms word
Обсуждение