Web PDF Text Editing With Bitmap Rendering Consistency
Find Innovative SolutionsGenerate Solutions
Solution Overview
Problem
Existing methods for editing pdf text on web pages result in inconsistent text appearance between reading and editing modes due to imperfect font matching, leading to a disrupted user experience.
Innovation Solution
A method involving timed intervals to display cursor and filling bitmaps simulates cursor flashing and character input/output, ensuring consistent text appearance by using the data layer to manage both displayed and edited text.
Engineering Contradictions & Design Principles
Engineering Contradiction Analysis
1Ease of operation
If web page native elements (div) are used to display and edit pdf text content, then editing functionality is achieved, but text appearance consistency between reading and editing modes deteriorates due to imperfect font matching
Solution Approach 1:
The patent creates a visual copy of the PDF text rendering by drawing text bitmaps directly onto the canvas at the same position and with the same appearance as the original PDF text. This copying approach preserves the exact font, size, and style of the original PDF text in the editing mode, eliminating the font matching problem while maintaining full editing functionality through the underlying div element.
2Adaptability or versatility
If approximate font matching is used in web page elements, then editing capability is enabled, but the text display effect becomes inconsistent between reading and editing modes
Solution Approach 1:
The patent merges the advantages of both approaches by combining the div element (for editing capability) with canvas text bitmap drawing (for visual consistency). The div element handles user interaction and editing operations, while the canvas layer renders text that visually matches the original PDF text bit-for-bit, achieving both editing capability and display consistency simultaneously.
3Ease of operation
If web page native elements are used for text editing, then user interaction is simplified, but the original text appearance (font, size, position) cannot be perfectly preserved
Solution Approach 1:
The patent introduces a canvas layer as an intermediary between the user interface (div element) and the visual display. The canvas draws text bitmaps that exactly replicate the original PDF text appearance, acting as a visual mediator that preserves the original font, size, and position while allowing the div element underneath to handle all user interactions without compromise.
Data Source
AI summary
The present disclosure discloses a method for editing pdf page text on a web page, wherein the method is provided with a timer, and a filling bitmap and a cursor bitmap are alternately displayed at timed intervals of the timer to simulate a cursor flashing effect and prompt a user for a current input position. A data layer acquires in real time a code of a key which is input by a user; when the data layer receives that the code of the key, which is input by the user is a character, the character corresponding to the code of the key is inserted into a first position, and a timer is paused simultaneously; after the character is inserted, the cursor is located at a second position, and then an updated region is calculated, an updated bitmap is drawn and sent to a web page which displays the updated bitmap on the updated region, wherein the updated region is a region in the text content where a position of a character changes before and after the character is input. The method of the present disclosure uniformly processes both a displayed text and an edited text by a data layer, so that an appearance of a text in a reading mode is highly consistent with an appearance of a text in an editing mode, achieving an effect of “what you see is what you get”.