Browser Word Processor DOM Rendering via Off-Screen Measurement
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Web browsers lack the flexibility and native text rendering capabilities to provide a rich, WYSIWYG experience for word processing, limiting the functionality of cloud-based word processing applications.
Innovation Solution
A browser-based word processing system that operates according to a model-view-controller paradigm, where a document model is downloaded from a server, rendered into a DOM, and updated in real-time, allowing for WYSIWYG presentation, collaborative editing, and advanced formatting features.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If web browsers are used for cloud-based word processing, then accessibility and ease of operation are improved, but text rendering capability and formatting flexibility deteriorate
Solution Approach 1:
The patent introduces an off-screen iFrame'd HTML span element as an intermediary to measure character dimensions. This mediator element allows the browser to accurately calculate character widths and heights without displaying them, enabling precise WYSIWYG positioning while maintaining browser accessibility. The intermediary resolves the contradiction by providing measurement capability without visual rendering overhead.
Solution Approach 2:
The patent segments the document rendering into multiple components: an off-screen measurement layer (iFrame span elements) and an on-screen display layer (canvas). This segmentation allows character dimension measurement to occur separately from visual presentation, enabling accurate WYSIWYG rendering in the browser without compromising text rendering capability. Each segment handles specific functions that together resolve the capability gap.
2Ease of manufacture
If simple HTML elements are used for browser implementation, then ease of manufacture and compatibility are improved, but functionality and flexibility deteriorate
Solution Approach 1:
The patent merges multiple HTML elements and browser capabilities into a unified word processing system. It combines off-screen iFrame span elements for measurement, canvas for rendering, and JavaScript for logic into a single application that delivers full word processing functionality. This merging allows simple browser components to work together to achieve complex functionality that none could provide alone.
Solution Approach 2:
The patent makes the browser canvas element multi-functional by using it both for WYSIWYG rendering and for receiving user input. The same canvas that displays the document with accurate formatting also captures keystrokes and mouse actions. This universality allows a single simple HTML element to perform multiple functions that traditionally required separate specialized components.
3Manufacturing precision
If WYSIWYG rendering is implemented in browser, then presentation quality is improved, but device complexity and computational requirements increase
Solution Approach 1:
The patent extracts the complex character measurement logic into separate off-screen iFrame span elements that exist independently from the main document rendering. By taking out the measurement function into dedicated intermediary elements, the main rendering system remains relatively simple while still achieving precise WYSIWYG presentation. The complexity is isolated to specific components rather than distributed throughout the entire system.
Solution Approach 2:
The patent performs preliminary character dimension measurements by rendering characters in off-screen span elements before they are displayed in the final document. This preliminary action of measuring and calculating positions in advance allows the main rendering system to simply place characters at pre-calculated positions, reducing the complexity of real-time rendering calculations during user interaction.
Data Source
Figure 1
Figure 2A~2B
Figure 2C
AI summary
A computer-implemented method for presenting a document for interaction with a user in a web browser includes accessing an electronic model of the document; determining, with a computing device, positions for items in a visual rendering of the electronic model based on relative sizes and positions of other items in the electronic model; and generating, with the computing device, a document object model (DOM) that defines an editing surface, wherein the DOM (a) places placing the items at the determined positions on the editing surface, (b) places a graphic element that represents a cursor at a determined location on the editing surface, and (c) is arranged to receive user input on the editing surface and to correlate a location of the received user input to a location in the electronic model.