HTML Document Comparison via Tree Segmentation

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Current tools for comparing HTML documents are inadequate in managing multi-version comparisons and associating comments with specific document revisions, particularly failing to highlight structural and graphical changes effectively, leading to confusion in identifying differences across document versions.

Innovation Solution

A system and method for comparing multiple HTML documents that allows users to view different versions side-by-side, highlighting textual and graphical changes, and managing comments and annotations, enabling the identification of added or removed content, including changes in visibility and structure, by breaking documents into chunks and using visual indicators like borders or outlines.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Measurement precision

If conventional HTML diffing tools are used to compare document versions, then textual changes can be highlighted, but structural and graphical changes (such as added buttons or visibility changes) cannot be detected

Engineering Contradiction:

Improvedetection accuracy of changesVSAvoidability to detect different change types

Core Design Contradiction:

Measurement precisionVSAdaptability or versatility

Solution Approach 1:

The patent segments the HTML document into multiple representable elements (text nodes, element nodes, attribute nodes) and compares them individually across versions. This segmentation enables detection of various change types including structural modifications, graphical element additions, and visibility changes, resolving the limitation of conventional tools that only handle textual differences.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The system changes the comparison parameter from purely textual content to a comprehensive representation that includes element structure, attributes, and visual properties. By representing documents as trees of representable elements with multiple properties, the system can detect changes in visibility, structure, and graphics, not just text.

Inventive Principle:

Principle #35Parameter changes

2Measurement precision

If screenshot overlay methods are used to compare web pages, then visual differences can be shown, but slight placement differences cause misalignment and similar content is incorrectly highlighted

Engineering Contradiction:

Improvevisual difference detectionVSAvoiduserability in identifying changes

Core Design Contradiction:

Measurement precisionVSEase of operation

Solution Approach 1:

The patent replaces the mechanical screenshot overlay approach with a computational tree-based comparison system. Instead of pixel-by-pixel image comparison that is sensitive to placement, the system uses hierarchical representation of document structure to identify and highlight changes, providing both visual accuracy and ease of use.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

3Productivity

If conventional HTML diffing tools are used, then textual changes are highlighted, but changes in non-textual elements (such as buttons, images, structure) are not detected

Engineering Contradiction:

Improvespeed of change identificationVSAvoidinformation about structural and graphical changes

Core Design Contradiction:

ProductivityVSLoss of information

Solution Approach 1:

The patent creates a universal comparison framework that handles multiple change types through a single system. The representable element tree structure can represent text, elements, attributes, and visual properties, allowing one comparison mechanism to detect all types of changes including textual, structural, graphical, and visibility modifications simultaneously.

Inventive Principle:

Principle #6Universality (Multi-functionality)

4Measurement precision

If HTML diffing tools compare text across container boundaries, then textual differences are found, but differences in container structure and layout are not highlighted

Engineering Contradiction:

Improvetextual difference detectionVSAvoidcontainer structure and layout

Core Design Contradiction:

Measurement precisionVSShape

Solution Approach 1:

The system segments the document into hierarchical container structures and compares both the text content within containers and the container structure itself. This dual-level segmentation allows simultaneous detection of textual differences and structural/layout changes, resolving the contradiction between text-focused and structure-aware comparison.

Inventive Principle:

Principle #1Segmentation

Data Source

PatentUS20250094702A1System and method for comparing versions of HTML documents in a proofing interface

Publication Date: 2025.03.20 KHOO JUSTIN

AI summary

Embodiments of a system and method for comparing multiple versions of HTML documents in a proofing interface. The system allows users to compare different versions of a document, highlighting changes in textual and graphical content, and managing comments and annotations across revisions. Users can toggle between different display modes, such as mobile and desktop views, and initiate comparisons between document versions through an interactive control interface. The system is particularly suited for collaborative environments where document revisions are frequent, and accurate tracking of changes is essential. Embodiments of an interface allowing annotations such as pins or comments to be placed persistently in a document, whether a document is displayed with or without highlights that might otherwise cause the annotation to change position. Embodiments of the present invention generally relate to the comparison of multiple HTML documents in a user interface. The HTML documents may comprise web pages, emails, or other forms of documents. A user interface presents differences between the documents in a way that is visible to the user.