html текст
All interests
  • All interests
  • Design
  • Food
  • Gadgets
  • Humor
  • News
  • Photo
  • Travel
  • Video
Click to see the next recommended page
Like it
Don't like
Add to Favorites

TeamLab Document Editor на canvas: стирая грани между desktop и online

В предыдущем посте мы рассказали вам, что одной из главных целей участия в 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 вполне себе настоящая, но это лишь усугубляет «эффект папируса», т.к. документ приходится не только перерисовывать при внесении изменений, но и пересчитывать разбивку.

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

Разработка с нуля

Проблему разбивки на страницы мы решили так, как это делается в десктопных редакторах: изменили архитектуру кода в части отрисовки документа — работа идёт только над видимой частью файла, отрисовка остального документа происходит, только если к нему происходит обращение.

Подойдя к решению задачи разбивки на страницы таким образом, мы также устранили проблемы:

— скорости работы (напр. при изменении гарнитуры шрифта) с многостраничными документами,

— зуммирования,

— отображения непечатных символов,

— изменения полей документов.


На графике указано время, которое занимает открытие и зуммирование документов более 100 страниц у популярных онлайн редакторов.

Задача идентичного отображения

Одновременно с этим, мы озадачились вопросом качественного отображения текста в разных браузерах и при печати. Несмотря на то, что для пользователя это одна проблема, программно она имеет две стороны — измерение шрифтов (получение метрик шрифта) и отрисовка текста в документе.

Дело в том, что текущие онлайн редакторы используют средства браузера как для измерения шрифта, так и для отрисовки текста. Однако, измерения, производимые браузером не точны и не содержат важных атрибутов, например, таких как надстрочные и подстрочные элементы и иные метрики. Более того, разные браузеры могут иметь собственные средства измерения, что приводит к некорректному отображению одного и того же документа в разных браузерах.

То же самое относится и к способам отрисовки текста. Существующие редакторы используют средства браузера, чтобы отрисовать текст на «холсте», предоставляемом ОС.

Именно поэтому при разработке нашего редактора нам пришлось создать как собственный движок для получения метрик шрифта, так и собственные методы для отрисовки на экране. В результате мы сами контролируем измерение шрифта и посылаем команды в свой «отрисовщик».

В решении задачи отрисовки текста нам бесспорно помогло появление новой технологии HTML5, в состав которой входит элемент canvas, дающий нам доступ к «холсту», а именно, к пикселям. Каждый элемент текста отрисовывается с точностью до пикселя и, соответственно, никак не зависит ни от браузера, ни от ОС.

Помимо идентичности отображения в различных браузерах мы смогли добиться отличного результата при печати документа, т.е. при сохранении файла в pdf. Хранение всех параметров в виде мета файла с набором команд избавляет от необходимости в какой-либо конвертации, которая всегда означает неизбежные потери.


Полученные преимущества

В итоге в отличие от всех существующих онлайн-редакторов, TeamLab Document Editor обладает следующими технологическими преимуществами:

  • HTML5 набирает всё большую популярность, что гарантирует целый ряд новых улучшений и в дальнейшем;
  • все примененные нами технологии, кроме отрисовки на canvas, могли бы быть применены и в нашем предыдущем редакторе, однако при использовании HTML5 они работают гораздо эффективнее;
  • применение canvas позволяет производить собственную отрисовку;
  • благодаря использованным технологиям добавление нового функционала будет абсолютно беспроблемным


Ну, и конечно, целым рядом важных плюсов для пользователей:

  • идентичность текста на входе и выходе: обработанный файл сохраняет тот же самый стиль, абзацы, межстрочный и межсимвольный интервалы и т.д. при просмотре в любом браузере в любой ОС, а также при импорте и печати;
  • широкий выбор опций для работы с таблицами, междустрочными интервалами, многоуровневой нумерацией, стилями текста и заголовков
  • возможности беспрепятственной обработки многостраничных отчетов, деловой или финансовой документации в точном соответствии со всеми стандартами;
  • отсутствие языковых барьеров благодаря максимальному количеству шрифтов, включая иероглифы;
  • поддержку всеми современными браузерами, отсутствие необходимости использовать дополнительное ПО.


Для того, чтобы попробовать бета-версию нового редактора прямо сейчас, посетите демо-портал TeamLab Document Editor по адресу http://html5.teamlab.com
Читать дальше
Twitter
Одноклассники
Мой Мир

материал с habrahabr.ru

1

      Add

      You can create thematic collections and keep, for instance, all recipes in one place so you will never lose them.

      No images found
      Previous Next 0 / 0
      500
      • Advertisement
      • Animals
      • Architecture
      • Art
      • Auto
      • Aviation
      • Books
      • Cartoons
      • Celebrities
      • Children
      • Culture
      • Design
      • Economics
      • Education
      • Entertainment
      • Fashion
      • Fitness
      • Food
      • Gadgets
      • Games
      • Health
      • History
      • Hobby
      • Humor
      • Interior
      • Moto
      • Movies
      • Music
      • Nature
      • News
      • Photo
      • Pictures
      • Politics
      • Psychology
      • Science
      • Society
      • Sport
      • Technology
      • Travel
      • Video
      • Weapons
      • Web
      • Work
        Submit
        Valid formats are JPG, PNG, GIF.
        Not more than 5 Мb, please.
        30
        surfingbird.ru/site/
        RSS format guidelines
        500
        • Advertisement
        • Animals
        • Architecture
        • Art
        • Auto
        • Aviation
        • Books
        • Cartoons
        • Celebrities
        • Children
        • Culture
        • Design
        • Economics
        • Education
        • Entertainment
        • Fashion
        • Fitness
        • Food
        • Gadgets
        • Games
        • Health
        • History
        • Hobby
        • Humor
        • Interior
        • Moto
        • Movies
        • Music
        • Nature
        • News
        • Photo
        • Pictures
        • Politics
        • Psychology
        • Science
        • Society
        • Sport
        • Technology
        • Travel
        • Video
        • Weapons
        • Web
        • Work

          Submit

          Thank you! Wait for moderation.

          Тебе это не нравится?

          You can block the domain, tag, user or channel, and we'll stop recommend it to you. You can always unblock them in your settings.

          • Kate_Palmova
          • домен habrahabr.ru

          Get a link

          Спасибо, твоя жалоба принята.

          Log on to Surfingbird

          Recover
          Sign up

          or

          Welcome to Surfingbird.com!

          You'll find thousands of interesting pages, photos, and videos inside.
          Join!

          • Personal
            recommendations

          • Stash
            interesting and useful stuff

          • Anywhere,
            anytime

          Do we already know you? Login or restore the password.

          Close

          Add to collection

             

            Facebook

            Ваш профиль на рассмотрении, обновите страницу через несколько секунд

            Facebook

            К сожалению, вы не попадаете под условия акции