They've done Pages in the browser. Ok, great. So that would use HTML5, right? And take advantage of modern web browsers' layout compatibilities, complete with CSS styling, and all the cool new stuff like CSS regions & shapes. Right?
Apparently not.
If you go into Pages and open up web inspector, what you'll see is not a nice clean HTML structure with the text written in HTML and formatting in CSS. Instead, you'll see a large collection of dynamically-generated SVG <text> elements, with pixel-exact positions explicitly specified, even to the level of the horizontal locations of individual glyphs. This effectively completely bypasses the browser's own layout capabilities. They appear to have written their own layout engine in javascript, or perhaps ported over the existing native Pages one.
Any ideas why they would have taken this route? Apple and Adobe have both been doing some fantastic work on improving WebKit with better layout facilities, and Microsoft have been doing the same with IE. Things are pretty good in 2013. Why not leverage that work?
My guess is that it's because browser support is inconsistent, and Apple needs to have a 100% flawless experience on ahem less-well-engineered browsers. Positioning the SVG elements precisely ensures that nothing is cut off, and there aren't any visual oddities. Writing your own layout engine is a great way to ensure a consistent experience across multiple rendering engines.
Because Pages is not a web page editor, it's a word processor and page layout system. The intended output is essentially a printed document. In fact (checking out the beta) when you share a document you can choose to email in Pages, PDF or Word format. HTML is not presented as an option.
Can you explain the difference between a web page editor and word processor? (this isn't meant as criticism; I'd just like to understand your perspective, as I personally view them as being in the same category)
Web pages are limited by HTML capability, and based on infinite-length documents of variable width.
Word processors deal with pages (page numbering, margins, footnotes, columns, set page widths) with much more complex text flows, and the output needs to look exactly the same on every screen and every device.
This isn't a surprise at all. You need total control over layout and UI elements. SVG has a lot of advantages over canvas, specifically it can take advantage of hardware acceleration and doesn't have the text layout quirks that canvas does.
If you think about what it would take to build a User Interface toolkit you would use in a desktop application in HTML5 you can see lots of problems. There is simply too much abstraction in HTML5 to do what Apple may have wanted to do. Cross-browser quirks are unavoidable and performance can be very difficult to get right especially with interactions in the DOM. Even if you can get performance right there may be issues with producing the exact layout in each browser or the designers intention in the first place.
`contenteditable` has a lot of issues once you go past casual text editing. Sounds like it's doing something similar to Google Docs (using the browser simply as a dumb renderer, and doing a lot of the calculations/layout in JavaScript).
They've done Pages in the browser. Ok, great. So that would use HTML5, right? And take advantage of modern web browsers' layout compatibilities, complete with CSS styling, and all the cool new stuff like CSS regions & shapes. Right?
Apparently not.
If you go into Pages and open up web inspector, what you'll see is not a nice clean HTML structure with the text written in HTML and formatting in CSS. Instead, you'll see a large collection of dynamically-generated SVG <text> elements, with pixel-exact positions explicitly specified, even to the level of the horizontal locations of individual glyphs. This effectively completely bypasses the browser's own layout capabilities. They appear to have written their own layout engine in javascript, or perhaps ported over the existing native Pages one.
Any ideas why they would have taken this route? Apple and Adobe have both been doing some fantastic work on improving WebKit with better layout facilities, and Microsoft have been doing the same with IE. Things are pretty good in 2013. Why not leverage that work?