Responsive Content Tagging via Media Query Segmentation
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Current editors for structured documents, such as those using XHTML, HTML, XML, and SGML, lack an intuitive approach for creating responsive web design, requiring users to focus on either structure or content editing and often necessitate duplicative authoring and debugging due to limitations in media query granularity and control over content.
Innovation Solution
A system and method that applies user-defined condition tags to content elements within a document, associating them with viewport characteristics through media queries, allowing for the generation of control data that adjusts content display based on rendering viewport characteristics, thereby enabling responsive design without duplicating content for different form factors.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Manufacturing precision
If current editors focus on structure editing for structured documents, then structure control is improved, but content editing becomes cumbersome and requires operating on syntactic entities
Solution Approach 1:
The editor interface is segmented into distinct regions: a structure view showing syntactic entities and a content view showing linear content. Users can select content in the content view without needing to understand or navigate the underlying syntactic structure, thus improving ease of content editing while maintaining structure control through the separate structure view.
Solution Approach 2:
The patent introduces an intermediary interface layer that translates between linear content selection and structured document operations. This intermediary allows users to work with content in a natural linear manner while the system automatically handles the mapping to syntactic entities, resolving the contradiction between structure control and content editing ease.
2Ease of operation
If current editors focus on content editing and abstract away structure, then content editing becomes intuitive, but structure control is lost
Solution Approach 1:
The editor is divided into separate views: one for content editing that abstracts away structure for intuitive operation, and another for structure control that displays syntactic entities. This segmentation allows each view to optimize for its specific purpose without compromising the other.
Solution Approach 2:
An intermediary mechanism maintains the connection between the content view and structure view, allowing users to edit content intuitively while the system automatically updates and reflects changes in the structure view, thus preserving structure control despite abstraction in the content editing interface.
3Adaptability or versatility
If media queries are applied to blocks of syntax elements, then responsive design is achieved, but granularity is restricted and content control is limited
Solution Approach 1:
The patent segments the document into individual content elements that can be independently tagged with media query conditions. This allows media queries to be applied at a fine-grained level to specific content elements rather than only to blocks of syntax elements, improving both responsive design capability and content control granularity.
Solution Approach 2:
The system dynamically associates media query conditions with content elements based on user input and viewport characteristics. This dynamic approach allows flexible control over which content elements are displayed under different viewport conditions, achieving both responsive design and precise content control without being restricted by static syntax block boundaries.
4Manufacturing precision
If duplicative authoring is used for different form factors, then content control for each device is improved, but productivity decreases due to additional authoring and debugging
Solution Approach 1:
The patent implements a universal content model where content is authored once and tagged with media query conditions that determine display across different form factors. This multi-functional approach allows a single content element to serve multiple devices and viewport sizes, eliminating duplicative authoring while maintaining precise content control through conditional tags.
Solution Approach 2:
Instead of creating duplicate content for different form factors, the system changes parameters by associating different media query conditions with the same content element. This allows the same content to be selectively displayed or hidden based on viewport characteristics, achieving device-specific control without duplicative authoring and significantly improving productivity.
Data Source
AI summary
Systems and methods are disclosed herein for disclosed for controlling the display of content in web-based documents based on a characteristic of a viewport used to render that content. For example, a method comprising storing a document as a data file comprising content data and storing control data as one or more control data files; applying tags to a portion of the content data according to user input; designating media query rules for each of the tags, each media query rule responsive to one or more viewport characteristics; and generating control data based, in part, on said designation, the control data comprising each of tags in association with the respectively designated media queries rules, wherein, when the output file is rendered, the at least a portion of the content data is displayed responsive to the media query rules corresponding thereto based on the tags.