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

Не важно, над каким проектом вы работаете. Рано или поздно вы предпочтете бумажным документам электронные. Мы не стали исключением. Будучи провайдером сервиса для малого и среднего бизнеса, мы прекрасно осознавали, насколько важна для команды отлаженная система совместной работы с документами. При этом, ни одно из существующих решений не удовлетворяло нашим запросам. Что нам оставалось делать? Создавать собственный! О том, с чего начиналась наша разработка, как мы пришли к 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 2) Zoho Writer 3) И самое интересное - Office365: Существующие онлайн редакторы используют инструменты браузера как для измерения, так и для отрисовки текста. Однако такие измерения по определению не могут быть точными. Кроме того, ни один браузер не может работать с целым рядом атрибутов, таких как надстрочные и подстрочные интервалы. Инструменты измерения у каждого браузера индивидуальные, а это, естественно, ведет к существенным различиям в отображении одного и того же документа, скажем, в Mozilla и в Chrome. То же самое, естественно, относится и к браузерной отрисовке текста. Именно поэтому при разработке HTML5 редактора нам пришлось создать как собственный движок для получения метрик шрифта, так и собственные методы для отрисовки на экране. В результате мы сами контролируем измерение шрифта и посылаем команды в свой «отрисовщик». Благодаря использованной технологии, мы получили массу преимуществ, в том числе гибкую настройку межстрочных и межбуквенных интервалов. Конечно, стоит отдать должное в первую очередь технологии HTML5, а если быть точнее - элементу Canvas, который дал нам полный доступ к пиксельной отрисовке текстов. Каждый элемент отрисовывается в точности до пикселя и его последующее отображение никак не зависит ни от браузера, ни от операционной системы. Помимо идентичного отображения необходимо было добиться и качественной печати (и, соответственно, конвертации в формат PDF). Сохранение всех параметров в мета-файле вместе с набором команд позволяет пропустить процесс конвертации, во время которого и происходит потеря форматирования.

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

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

Новый рекламный формат в наших телеграм-каналах.

Купить 500 символов за $150