Browser-Specific CSS Classes for Geometric Symbol Rendering

Resolve Bottlenecks,
Find Innovative SolutionsGenerate Solutions

Solution Overview

Problem

Current methods for creating HTML/CSS representations of geometric symbols in web browsers are complex, inflexible, and require significant effort, often resulting in unstable and unreliable code due to differences in how various web browsers interpret CSS commands.

Innovation Solution

A method that processes a symbol definition to create web browser-specific shape and attribute CSS classes, allowing for the generation of HTML/CSS representations that are optimized for different browsers, reducing code complexity and ensuring cross-browser compatibility.

Engineering Contradictions & Design Principles

VSEngineering Contradiction Analysis

1Adaptability or versatility

If HTML 5 Canvas API is used to draw symbols in web browsers, then any kind of symbol can be drawn with flexible geometry, but the performance to calculate symbol geometry and draw symbols is still unsatisfactory even with GPU acceleration

Engineering Contradiction:

Improvesymbol geometry flexibilityVSAvoidsymbol rendering performance

Core Design Contradiction:

Adaptability or versatilityVSProductivity

Solution Approach 1:

The patent replaces the HTML 5 Canvas API's JavaScript-based drawing mechanism with CSS3's GPU-accelerated rendering engine. By substituting the mechanical drawing operations with CSS transformations and rendering, the system achieves better performance while maintaining geometric flexibility.

Inventive Principle:

Principle #28Mechanics substitution (Replace mechanical system)

Solution Approach 2:

The patent changes the rendering parameters by switching from Canvas's context-based drawing to CSS3's transform and filter properties. This parameter change enables utilization of browser-native GPU acceleration paths, significantly improving rendering performance.

Inventive Principle:

Principle #35Parameter changes

2Manufacturing precision

If vector based graphics like SVG or VML are used, then graphics can be indefinitely scaled without degrading quality, but a high amount of memory and processing power is required to render large and complex structures

Engineering Contradiction:

Improvescaling qualityVSAvoidmemory and processing requirements

Core Design Contradiction:

Manufacturing precisionVSQuantity of substance

Solution Approach 1:

The patent segments the symbol rendering into multiple CSS-styled HTML elements rather than using a single complex vector structure. This segmentation reduces the memory footprint and processing requirements while maintaining scalable quality through CSS3's native rendering capabilities.

Inventive Principle:

Principle #1Segmentation

Solution Approach 2:

The patent introduces CSS3 as an intermediary layer between the symbolic process definition and the visual rendering. This intermediary enables efficient rendering by leveraging browser-native CSS engines rather than requiring direct interpretation of complex vector graphics.

Inventive Principle:

Principle #24Intermediary (Mediator)

3Productivity

If HTML 5 and CSS 3 are used to represent symbols with nested HTML elements styled with CSS, then GPU accelerated rendering provides acceptable performance, but it is rather difficult for human persons to create a complex symbol and code reliability is reduced due to different CSS interpretations across browsers

Engineering Contradiction:

Improverendering performanceVSAvoidcode creation complexity

Core Design Contradiction:

ProductivityVSDevice complexity

Solution Approach 1:

The patent enables self-service by allowing the symbolic process definition to automatically generate the corresponding HTML/CSS code. The system serves itself by translating process symbols into optimized HTML/CSS representations without requiring manual coding, thereby reducing complexity while maintaining performance.

Inventive Principle:

Principle #25Self-service

Solution Approach 2:

The patent creates a universal code generation mechanism that produces browser-compatible HTML/CSS code from a single symbolic process definition. This multi-functional approach handles cross-browser compatibility automatically, reducing the complexity of creating reliable code for different browsers.

Inventive Principle:

Principle #6Universality (Multi-functionality)

4Adaptability or versatility

If bitmap based graphics are used, then symbols can be displayed in web browsers using standard formats, but scaling results in visible artifacts and reduced quality

Engineering Contradiction:

Improvebrowser compatibilityVSAvoidscaling quality

Core Design Contradiction:

Adaptability or versatilityVSManufacturing precision

Solution Approach 1:

The patent implements dynamic scaling by using CSS3 transform properties that enable smooth resizing of symbolic elements. Unlike static bitmap graphics, the CSS-based rendering dynamically adapts to different sizes while maintaining quality through the browser's native rendering engine.

Inventive Principle:

Principle #15Dynamics

Data Source

PatentEP2608056B1Creating html/CSS representations of a geometric symbol

Publication Date: 2020.06.10 SOFTWARE AG

Figure 1
Figure 2
Figure 3

AI summary

The invention relates to the creation of a HTML/CSS representation of a geometric symbol by processing (1000) a symbol definition from a file and by creating a web browser specific shape CSS class for each geometric shape (1080) comprised in the symbol definition. The generated HTML/CSS representation (1150) comprises the one or more created web browser specific CSS classes (1080, 1130).