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