Display method and dictionary pen

Abstract

This invention provides a display method and a dictionary pen. The method includes: acquiring first content and second content corresponding to the first content in a display scenario; displaying the first content and the second content based on a first display mode. The first display mode includes a first display window and a second display window adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario. The method and dictionary pen provided by this invention fully utilize the horizontal space of the screen through the first display mode, thereby improving the utilization rate of the horizontal space of the screen. By adapting and adjusting the horizontal width ratio between the first display window and the second display window based on the display scenario, flexible adaptation to the differentiated information display needs in different display scenarios is achieved, optimizing the user's information retrieval experience and learning efficiency in different display scenarios.

Description

Technical Field

[0001] This invention relates to the field of human-computer interaction technology, and in particular to a display method and a dictionary pen. Background Technology

[0002] Currently, most dictionary pen products adopt a vertically laid-out layout, for example, arranging all query results such as words, phonetic symbols, parts of speech, definitions, and example sentences in a vertical direction.

[0003] However, this vertical tiled layout not only causes the prefix information to scroll out of the visible area when users scroll down to view detailed content, making it easy to forget the term being viewed, but also results in a large amount of unused horizontal screen space, low screen space utilization, and users having to scroll frequently to view the complete content, thus affecting the user experience. Summary of the Invention

[0004] This invention provides a display method and a dictionary pen to address the shortcomings of vertically tiled layouts in the application of elongated screens in related technologies.

[0005] This invention provides a display method, comprising: Obtain the first content, and the second content corresponding to the first content in the display scenario; The first content and the second content are displayed based on a first display mode, which includes a first display window and a second display window arranged adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

[0006] According to a display method provided by the present invention, the display scenarios include word lookup scenarios and / or translation scenarios.

[0007] According to a display method provided by the present invention, in the word search scenario, the first display window is a fixed display window, and the second display window is a scrolling display window.

[0008] According to a display method provided by the present invention, in the word search scenario, displaying the first content and the second content based on a first display mode includes: The first content and the second content are rendered in a scrolling container, wherein the visible area of ​​the scrolling container includes the first display window and the second display window; The first content and the second content are rendered in a fixed container, which is set above the scrolling container, and the visible width of the fixed container is the same as the width of the first display window; A masking layer is provided between the scrolling container and the fixed container, the masking layer covering the area in the scrolling container corresponding to the first display window.

[0009] According to a display method provided by the present invention, in the word search scenario, the display of the first content and the second content based on the first display mode further includes: Based on the content height of the first content and the vertical height of the screen, it is determined whether the content displayed within the fixed container is allowed to scroll independently.

[0010] According to a display method provided by the present invention, in the translation scenario, both the first display window and the second display window are scrolling display windows, and the first display window and the second display window scroll synchronously.

[0011] According to a display method provided by the present invention, in the translation scenario, displaying the first content and the second content based on a first display mode includes: In response to a scrolling operation on a target display window, the target sentence in the target content is determined, wherein the target display window is either the first display window or the second display window, and the target content is the content displayed in the target display window; Based on the sentence-level correspondence between the first content and the second content, the following sentence corresponding to the target sentence in the following content is determined, wherein the following content is the content in the first content and the second content other than the target content; The target sentence and the following sentence are simultaneously scrolled and displayed to preset positions in the first display window and the second display window.

[0012] According to a display method provided by the present invention, determining the target sentence in the target content where the scrolling operation is performed includes: Obtain the scroll distance within the target display window; Obtain the display distance between the display position of each sentence in the target content within the target display window and the preset position; The target sentence is determined from the target content based on the difference between the display distance and the scroll distance of each sentence in the target content.

[0013] According to a display method provided by the present invention, in the translation scenario, the display of the first content and the second content based on a first display mode further includes: Based on the vertical height of the first display window and the row height of the first display window when displaying the first content, a first compensation value is determined; based on the first compensation value, fill space is added at the end of the first content; A second compensation value is determined based on the vertical height of the second display window and the line height of the second display window when displaying the second content; based on the second compensation value, fill space is added at the end of the second content.

[0014] According to a display method provided by the present invention, in the translation scenario, the display of the first content and the second content based on a first display mode further includes: During the continuous scrolling operation, the display window where the scrolling operation is taking place is locked as the target display window, and scrolling drive requests from other display windows are ignored; During the scrolling display of the following sentence, the scrolling event callbacks triggered by the scrolling display of the following sentence are ignored.

[0015] According to a display method provided by the present invention, ignoring scroll event callbacks triggered by the scrolling display of the following sentence during the scrolling display process includes: During the scrolling display of the following sentences, a synchronization state lock is marked; While the synchronization state lock is marked, scroll event callbacks triggered by the scrolling display of the following sentence are ignored, and the synchronization state lock is released in the next rendering frame after the scrolling display of the following sentence is completed.

[0016] According to a display method provided by the present invention, the display of the first content and the second content based on a first display mode includes: The horizontal scaling ratio is calculated based on the standard viewport width and the actual width of the screen, and the vertical scaling ratio is calculated based on the standard viewport height and the actual height of the screen. The smaller of the horizontal scaling ratio and the vertical scaling ratio is used as a uniform scaling ratio. Based on the uniform scaling ratio, the display parameters of the first display mode are scaled proportionally to obtain adaptive display parameters. Based on the adaptive display parameters, the first content and the second content are displayed.

[0017] The display method provided by the present invention further includes: In response to a mode switching operation, the first content and the second content are displayed based on a second display mode, which is used to arrange and display the first content and the second content sequentially in the vertical direction of the screen.

[0018] The present invention also provides an electronic device, including a memory, a processor, and a computer program stored in the memory and executable on the processor, wherein the processor executes the program to implement the illustrated method as described above.

[0019] The present invention also provides a dictionary pen, including a dictionary pen body, a memory, a processor disposed within the dictionary pen body, and a computer program stored in the memory and running on the processor, wherein the processor executes the computer program to implement the demonstration method as described above.

[0020] The present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, implements the illustrated method as described above.

[0021] The present invention also provides a computer program product, including a computer program that, when executed by a processor, implements the demonstration method as described above.

[0022] The display method and dictionary pen provided by this invention fully utilize the horizontal space of the screen through a first display mode, presenting the first and second content side-by-side in adjacent first and second display windows, thus significantly improving the utilization rate of the horizontal space of the screen. Furthermore, by adapting the horizontal width ratio between the first and second display windows in the first display mode to the display scenario, it achieves flexible adaptation to the differentiated information display needs of different display scenarios. While effectively solving problems such as information forgetting, information density imbalance, and difficulty in comparative reading that exist in vertically arranged layouts, it optimizes the user's information retrieval experience and learning efficiency in different display scenarios. Attached Figure Description

[0023] To more clearly illustrate the technical solutions in this invention or related technologies, the accompanying drawings used in the description of the embodiments or related technologies will be briefly introduced below. Obviously, the accompanying drawings described below are some embodiments of this invention. For those skilled in the art, other drawings can be obtained based on these drawings without creative effort.

[0024] Figure 1 This is one of the illustrations of a word search page in related technologies.

[0025] Figure 2 This is the second illustration of a word search page in related technologies.

[0026] Figure 3 This is a diagram illustrating the translation of a page in related technologies.

[0027] Figure 4 This is a flowchart illustrating the demonstration method provided by the present invention.

[0028] Figure 5 This is one of the schematic diagrams of the display page provided by the present invention.

[0029] Figure 6This is the second illustration of the display page provided by the present invention.

[0030] Figure 7 This is the third illustration of the display page provided by the present invention.

[0031] Figure 8 This is the fourth illustration of the display page provided by the present invention.

[0032] Figure 9 This is the fifth illustration of the display page provided by the present invention.

[0033] Figure 10 This is the sixth illustration of the display page provided by the present invention.

[0034] Figure 11 This is a schematic diagram of the structure of the display device provided by the present invention.

[0035] Figure 12 This is a schematic diagram of the structure of the electronic device provided by the present invention.

[0036] Figure 13 This is a schematic diagram of the structure of the dictionary pen provided by the present invention. Detailed Implementation

[0037] To make the objectives, technical solutions, and advantages of this invention clearer, the technical solutions of this invention will be clearly and completely described below with reference to the accompanying drawings. Obviously, the described embodiments are only some, not all, of the embodiments of this invention. All other embodiments obtained by those skilled in the art based on the embodiments of this invention without creative effort are within the scope of protection of this invention.

[0038] All actions involving the acquisition of signal information or data in this invention are carried out in compliance with the relevant data protection laws and policies of the country where the device is located, and with the authorization granted by the owner of the device.

[0039] With the increasing demand for language learning, electronic learning aids for students, such as dictionary pens and electronic dictionaries, have emerged. In terms of display page design, mainstream products for learning devices like dictionary pens typically use a vertical, tiled layout.

[0040] For example, Figure 1 This is one of the illustrations of a word search page in related technologies, such as... Figure 1 As shown, in a word lookup scenario, the dictionary pen arranges all search results, including words, phonetic symbols, parts of speech, definitions, and example sentences, in a vertical order. Users need to scroll continuously from top to bottom to view all the content.

[0041] This vertically tiled layout has obvious limitations on the elongated screens typical of learning devices like dictionary pens.

[0042] Firstly, the vertical height of a dictionary pen screen is limited, typically displaying only 6 to 7 lines of text. However, the detailed content in the search results, such as parts of speech, definitions, and example sentences, often far exceeds the capacity of a single screen. This causes the core word information, including the original word and its phonetic transcription, located at the top of the page, to scroll out of the visible area when users scroll down to view definitions or example sentences. Users may easily forget which word they were looking up, leading to confusion such as "What word was I just looking up?", thus affecting their learning effectiveness.

[0043] Secondly, while the dictionary pen screen has a relatively ample pixel width in the horizontal direction, its vertical tiled layout only utilizes the vertical dimension to arrange content, leaving a large amount of horizontal space unused. This results in a large blank area on the right side of the screen, leading to low screen space utilization and a very limited amount of effective content that can be displayed on a single screen. For example, Figure 2 This is the second illustration of a word search page in related technologies. Figure 2 In the middle, there is a large amount of blank space on the right side of the page, which completely renders the dictionary pen's display advantage in the horizontal dimension idle, resulting in an obvious imbalance in information density.

[0044] Thirdly, in translation scenarios, when users need to translate and consult a text containing multiple sentences, the original text and its corresponding translation are arranged vertically, either with the original text on top and the translation below, or vice versa, and are separated by a large amount of content. When a user scrolls to view a sentence in the translation, the corresponding original sentence may have already scrolled out of the current visible area. The user cannot see both the original sentence and its corresponding translation at the same horizontal level, and must repeatedly scroll up or down the page to confirm the correspondence between the translated and original sentences. This forces the user's gaze to frequently move back and forth vertically, resulting in low efficiency in comparative reading. For example... Figure 3 This is a diagram illustrating the translation of a page in related technologies, such as... Figure 3 As shown, the original text's last sentence, "better place to live in," is separated from its corresponding translation by the translations of all the sentences preceding it in the original text, making comparative reading difficult for users.

[0045] To address the aforementioned problems, embodiments of the present invention provide a display method. This display method can be applied to electronic devices with screens and data processing capabilities, such as portable learning devices for language learning like dictionary pens, scanning pens, character recognition pens, character learning pens, and electronic dictionaries, or general electronic devices like smartphones, tablets, and laptops. Embodiments of the present invention do not specifically limit the application to these devices.

[0046] Figure 4This is a flowchart illustrating the demonstration method provided by the present invention, such as... Figure 4 As shown, the method includes: Step 410: Obtain the first content and the second content corresponding to the first content in the display scenario.

[0047] Here, the first content refers to the content that the user wishes to consult, learn, or refer to. For example, the first content may be text information scanned and entered by the user using a scanning element on an electronic device onto a medium such as a book or paper; it may also be text or image information obtained by the user through image recognition processing after taking a picture with a camera on an electronic device; it may also be text content manually entered by the user through a touch screen or physical buttons; in addition, the first content may also be content read from local storage on the electronic device or received through a network, and this embodiment of the invention does not limit this.

[0048] After obtaining the first content, the display scenario can be determined, and then the second content corresponding to the first content in the display scenario can be obtained.

[0049] The display scenario refers to the application scenario or usage context in which the first and second pieces of content are displayed. The display scenario can be automatically determined by the device based on user actions or active user selection, or it can be preset by the user before triggering the display operation. For example, the display scenario could be a word lookup scenario, a translation scenario, a classical poetry learning scenario, or a test question analysis scenario, etc.

[0050] The second content is related to the first content in the display scenario, and its type is determined by the scenario. For example, in a word lookup scenario, the electronic device can search for the first content based on its built-in dictionary database or through online queries, obtaining related content, including but not limited to pinyin, radicals, parts of speech, definitions, word combinations, example sentences, sources, synonyms / antonyms, pronunciation, phonetic symbols, and translations, as the second content. Similarly, in a translation scenario, the electronic device can use a translation engine to translate the first content and use the translation result as the second content.

[0051] Step 420: Display the first content and the second content based on a first display mode. The first display mode includes a first display window and a second display window that are adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

[0052] Specifically, the first display mode is a horizontal split-screen display mode. For example, Figure 5 This is one of the schematic diagrams of the display page provided by the present invention, such as... Figure 5 As shown, the first display mode includes a first display window 51 and a second display window 52 arranged adjacent to each other in the horizontal direction of the screen. The first display window 51 and the second display window 52 are arranged closely together in the horizontal direction of the screen, collectively covering the width of the screen in that direction. The first display window 51 is used to display first content, and the second display window 52 is used to display second content.

[0053] With this horizontal split-screen display layout, the first and second content can be presented simultaneously on the same screen. Users can refer to the first content at any time while viewing the second content without switching pages or scrolling up and down. This effectively avoids the problem of forgetting information caused by the first content moving out of the visible area due to page scrolling, and improves information retrieval efficiency.

[0054] Furthermore, in the horizontal direction of the screen, the horizontal width occupied by the first and second display windows is not fixed, but dynamically determined based on the display scenario. That is, the horizontal width ratio between the first and second display windows changes to adapt to the display scenario. Here, the horizontal width ratio refers to the relative ratio of the actual display width of the first and second display windows in the horizontal direction of the screen.

[0055] It is understandable that, in different display scenarios, the first and second content will differ significantly in terms of information content, information hierarchy, and the degree of user attention to each. Therefore, based on the specific information needs of the display scenario, the horizontal width ratio of the first and second display windows can be reasonably allocated so that the width allocation of the two display windows fully matches the user's information acquisition habits and cognitive needs in that display scenario.

[0056] For example, in a certain display scenario, if the first content is relatively brief and is information that the user needs to refer to continuously when viewing the second content, while the second content is relatively detailed, then there is a clear hierarchical relationship between the first and second content. In this case, a smaller horizontal width can be allocated to the first display window and a larger horizontal width to the second display window, so as to form a display layout with clear primary and secondary information. This ensures that the first content is always in the user's field of vision, while providing sufficient display space for the rich second content.

[0057] In another display scenario, if the first and second content are comparable in terms of information content and the user needs to compare and read them side by side, then the first and second display windows can be allocated relatively equal horizontal widths to form a symmetrical reference display layout, making it easier for the user to compare the content on both sides one by one.

[0058] For example, in a word lookup scenario, the horizontal width ratio between the first and second display windows can be 3:7; in a translation scenario, the horizontal width ratio between the first and second display windows can be 5:5.

[0059] In the method provided in this embodiment of the invention, the first display mode fully utilizes the horizontal space of the screen, presenting the first content and the second content side-by-side in adjacent first and second display windows, thus significantly improving the utilization rate of the horizontal space of the screen. Furthermore, by adapting the horizontal width ratio between the first and second display windows in the first display mode to the display scenario, flexible adaptation to the differentiated information display needs under different display scenarios is achieved. This effectively solves problems such as information forgetting, information density imbalance, and difficulty in comparative reading that exist in vertically arranged layouts, while optimizing the user's information retrieval experience and learning efficiency under different display scenarios.

[0060] Based on the above embodiments, the display scenarios include word lookup scenarios and / or translation scenarios.

[0061] Specifically, a word search scenario refers to a usage scenario where a user searches for a specific character, word, or phrase. In a word search scenario, the first content is the character, word, or phrase to be searched that the user scanned or entered, or the first content includes the character, word, or phrase to be searched that the user scanned or entered, as well as its phonetic symbols, stroke count, structure, radicals, etc. The second content includes the related content obtained by the electronic device based on the dictionary query of the first content, including parts of speech, definitions, word combinations, example sentences, sources, synonyms / antonyms, etc.

[0062] In a word search scenario, the first piece of information is usually brief, while the second piece often contains a wealth of detailed information, including parts of speech, multiple definitions, and example sentences, far exceeding the amount of information in the first piece. Therefore, in a word search scenario, a smaller horizontal width can be allocated to the first display window used to show the first piece of information, and a larger horizontal width can be allocated to the second display window used to show the second piece of information, thus creating a clear hierarchy in the display layout.

[0063] For example, in a word search scenario, the horizontal width ratio between the first and second display windows can be determined to be 3:7, that is, the first display window occupies about 30% of the horizontal width of the screen, and the second display window occupies about 70% of the horizontal width of the screen.

[0064] A translation scenario refers to a usage situation where a user translates a piece of text. In a translation scenario, the first content is the original text to be translated, which the user scans or enters, and the second content is the translated text obtained by the electronic device after translating the first content.

[0065] In translation scenarios, the first and second content pieces are roughly equivalent in terms of information content. Users need to read the original text and the translation side-by-side, sentence by sentence or paragraph by paragraph, to understand the meaning of the original text or verify the accuracy of the translation. Therefore, in translation scenarios, the first and second display windows can be allocated relatively equal horizontal widths to form a symmetrical display layout, making it easier for users to compare the original text and the translation at the same line of sight.

[0066] For example, in a translation scenario, the horizontal width ratio between the first and second display windows can be set to 5:5, meaning that the first and second display windows each occupy approximately 50% of the screen's horizontal width. This allows the original text and the translation to be displayed side-by-side with equal width, enabling users to efficiently compare and read the original text and the translation within the same line of sight. This significantly reduces the reading burden caused by the need for users' eyes to repeatedly shift vertically under traditional vertical layouts.

[0067] Based on any of the above embodiments, in the word search scenario, the first display window is a fixed display window, and the second display window is a scrolling display window.

[0068] Specifically, in a word lookup scenario, since the first content is the object the user needs to refer to, while the second content usually contains more information, it often exceeds the single-screen viewing range of the electronic device. In order to balance the persistent display of the first content that needs to be referenced and the complete viewing of the lengthy second content, this embodiment of the invention, based on horizontal screen splitting, further sets the first display window as a fixed display window and the second display window as a scrolling display window.

[0069] Furthermore, setting the first display window as a fixed display window ensures that the first content displayed in the first display window remains in the same position on the screen. That is, the first content does not shift position or move out of the visible area as the user scrolls vertically on the screen of the electronic device, thereby ensuring that the user can always see the first content being queried at a glance.

[0070] The second display window is set as a scrolling display window, so that the second content displayed in the second display window can support and respond to the user's interactive operations such as swiping up and down the touch screen and operating the scroll button, and scroll or display accordingly, so as to display more second content beyond the current screen size, so that the user can continuously browse other interpretations, example sentences and other information hidden outside the visible range of the screen.

[0071] For example, Figure 6 This is the second illustration of the display page provided by the present invention, as shown below. Figure 6As shown, in a word search scenario, the first display window 51 of the display page can display first content including the search term "present" and its pronunciation, and this first content is fixedly displayed in the first display window 51; the second display window 52 of the display page can display second content including the definition, example sentences, word variations, phrases, derivations, synonyms, proverbs, etc. of the search term "present," and this second content can be scrolled in the second display window 52, ​​meaning that users can trigger the scrolling display of the second content in the second display window 52 through scrolling operations. Furthermore, in Figure 6 The display page also includes a mode switching control 53. Users can trigger a mode switching operation by tapping the mode switching control 53, thereby triggering a switch between the first display mode and the second display mode.

[0072] In this embodiment of the invention, a layout combining a fixed first display window and a scrolling second display window is adopted in the word lookup scenario. Thus, the user only needs to scroll down in the second display window to view the definition and example sentences, while the first content, such as the word prefix, in the first display window is always fixedly displayed and will not disappear from the visible range of the screen. This solves the problem of users easily forgetting the word prefix and experiencing the momentary forgetting of "which word was I just looking up" in the traditional vertical tiled layout, and greatly optimizes the user's reading and learning experience in the word lookup scenario.

[0073] In actual front-end or client-side layout systems, due to complex nested scrolling containers, traditional fixed positioning properties often fail, and conventional floating layer solutions are difficult to flexibly accommodate complex content layouts. To address these issues, based on any of the above embodiments, in the word search scenario, step 420, displaying the first content and the second content based on the first display mode, includes: The first content and the second content are rendered in a scrolling container, wherein the visible area of ​​the scrolling container includes the first display window and the second display window; The first content and the second content are rendered in a fixed container, which is set above the scrolling container, and the visible width of the fixed container is the same as the width of the first display window; A masking layer is provided between the scrolling container and the fixed container, the masking layer covering the area in the scrolling container corresponding to the first display window.

[0074] Specifically, in order to achieve the effect of displaying the first content in a fixed position in the first display window and displaying the second content in a scrollable position in the second display window, a scrollable container that allows vertical scrolling can be created at the bottom of the screen, and the visible area of ​​the scrollable container can be set to cover the entire screen.

[0075] Here, the visible area of ​​the scrolling container can cover the display areas of the first and second display windows; that is, the width of the scrolling container's visible area includes the total width of the first and second display windows. For example, the width of the scrolling container's visible area can be set to the horizontal width of the screen, and the height of the scrolling container's visible area can be set to the vertical height of the screen.

[0076] Within the scrolling container, the interface containing both the first and second content can be fully rendered.

[0077] Subsequently, a fixed container can be placed above the scrolling container. This fixed container is an interface layer independent of the scrolling container; it floats above or covers the underlying scrolling container. Within this fixed container, the entire interface, including both the first and second content, can be rendered.

[0078] Furthermore, unlike the underlying scrolling container, the visible width of the fixed container is strictly limited to be the same as the width of the first display window. Due to this width limitation, within the fixed container, only the first content located on the left is visible to the user, while the second content located on the right is truncated or hidden because it exceeds the visible range of the fixed container. That is, visually, the first display window area on the left side of the screen shows the first content rendered by the fixed container, floating on top and in a fixed position.

[0079] In this scenario, the bottom layer of the screen is a complete, scrollable page, while the top layer is a fixed page that only displays the first content on the left. If the user scrolls through the second display window on the right, the bottom scroll container will move vertically as a whole, meaning that the first content in the left-hand area of ​​the bottom layer will also move vertically accordingly.

[0080] To prevent users from seeing the afterimage of the text of the first content moving up and down through the fixed container at the top, thus avoiding visual ghosting and confusion, this embodiment of the invention also provides a masking layer between the scrolling container and the fixed container. Here, the masking layer is an opaque isolation layer that covers the area in the scrolling container corresponding to the first display window; that is, the size and position of the masking layer completely overlap with the first display window.

[0081] Therefore, when the bottom scrolling container scrolls, the first content in the corresponding area of ​​the first display window is completely covered by an opaque mask layer; while above the mask layer, the first statically rendered content in the top fixed container remains fixed and displayed.

[0082] In this embodiment of the invention, the first content and the second content are rendered a second time in the bottom scrolling container and the top fixed container, and a mask layer is set between the bottom scrolling container and the top fixed container for visual isolation, thereby achieving a visual interactive effect where some areas are fixed and some areas are scrolling.

[0083] The embodiments of the present invention effectively solve the problem of front-end rendering of local content with fixed values ​​under complex view nesting without modifying the original rendering logic of sub-components, thus avoiding visual ghosting and jitter.

[0084] Based on any of the above embodiments, in the word search scenario, step 420, which involves displaying the first content and the second content based on the first display mode, further includes: Based on the content height of the first content and the vertical height of the screen, it is determined whether the content displayed within the fixed container is allowed to scroll independently.

[0085] Specifically, the content height of the first content refers to the actual vertical physical size that the first content occupies after rendering, such as pixel height. The vertical height of the screen is the effective visible area height of the electronic device's screen in the vertical direction.

[0086] In word search scenarios, the first content is usually quite brief, with its height generally less than or equal to the screen's vertical height. In this case, to avoid accidental touches, electronic devices will set the fixed container to a non-interactive or scroll-disabled state, making it a static, fixed floating layer. However, in some special cases, the height of the first content may exceed the screen's vertical height. If the first display window is forced to be absolutely fixed in this situation, the portion of the first content extending beyond the bottom of the screen will be truncated, making it inaccessible to the user.

[0087] Therefore, after rendering, this embodiment of the invention can compare the content height of the first content with the vertical height of the screen. When it is determined that the content height of the first content is greater than the vertical height of the screen, it is determined that the content displayed in the fixed container is allowed to scroll independently. For example, the fixed container is given an attribute that allows vertical scrolling, so that it can independently respond to the user's swipe operation within the fixed area. Conversely, when the content height of the first content is less than or equal to the vertical height of the screen, the content displayed in the fixed container is not allowed to scroll independently.

[0088] In this embodiment of the invention, by dynamically monitoring the height of the first content and dynamically granting the fixed container independent scrolling capability, the shortcomings of traditional floating layer solutions in handling information truncation caused by the excessive length of the fixed area content are compensated. While maintaining a relatively fixed visual experience of the first content in the word search scenario, the integrity of the first content display is guaranteed in a few special cases, further enhancing the robustness of electronic devices in the word search scenario.

[0089] Based on any of the above embodiments, in the translation scenario, both the first display window and the second display window are scrolling display windows, and the first display window and the second display window scroll synchronously.

[0090] Specifically, in translation scenarios, the first and second contents, which are in the form of long sentences or paragraphs, often cannot be displayed completely on one screen within their respective display areas. Therefore, in this embodiment of the invention, both the first and second display windows are configured as scrolling display windows. As a result, the first content displayed in the first display window and the second content displayed in the second display window can support and respond to user interactions such as swiping up and down the touchscreen and operating the scroll button, and can be scrolled or displayed accordingly to show more of the first and second contents beyond the current screen size.

[0091] Furthermore, in translation scenarios, there is a close semantic correspondence between the first and second content, and users often need to compare and contrast them in parallel. To avoid visual misalignment between the first and second content, which would force users to frequently alternate between the two display windows, this embodiment of the invention sets the first and second display windows to scroll synchronously.

[0092] Here, synchronized scrolling means that regardless of whether the user triggers the scrolling operation on the first or second display window, the electronic device will automatically drive the other display window to scroll in the same direction simultaneously as the currently operated display window scrolls. For example, when the user scrolls down on the first content in the first display window, the second content in the second display window will also automatically scroll down, thus ensuring that the display positions of the first and second content on the screen always maintain a dynamic correspondence.

[0093] In this embodiment of the invention, in the translation scenario, both the first and second display windows are set as scrolling display windows, and synchronous scrolling between them is achieved. This allows users to keep the original text and the translation at the same line of sight no matter where they are browsing when reading and comparing long translated content. This effectively solves the problem that users need to move their eyes back and forth to find the corresponding content under the traditional display layout, and eliminates the tedious operation of repeatedly scrolling up and down to confirm the correspondence, greatly improving the efficiency of reading and comparing long sentences.

[0094] Based on any of the above embodiments, in the translation scenario, step 420, displaying the first content and the second content based on the first display mode, includes: In response to a scrolling operation on a target display window, the target sentence in the target content is determined, wherein the target display window is either the first display window or the second display window, and the target content is the content displayed in the target display window; Based on the sentence-level correspondence between the first content and the second content, the following sentence corresponding to the target sentence in the following content is determined, wherein the following content is the content in the first content and the second content other than the target content; The target sentence and the following sentence are simultaneously scrolled and displayed to preset positions in the first display window and the second display window.

[0095] Specifically, during the process of displaying the first content and the second content based on the first display window and the second display window respectively, the user can browse the first content and the second content through scrolling. Here, scrolling refers to the user's action on either the first display window or the second display window, causing the content displayed in that window to scroll vertically.

[0096] For ease of explanation, in this embodiment of the invention, during the scrolling operation, the window in the first and second display windows where the scrolling operation is taking place is designated as the target display window, and the other display window in the first and second display windows, excluding the target display window, is designated as the other display window. Furthermore, the content displayed in the target display window within the first and second content is designated as the target content, and the content displayed in the other display window is designated as the following content. It is understood that the target display window and other display windows, as well as the target content and following content, are all determined by the scrolling operation. Under different scrolling operations, the target display window and other display windows, as well as the target content and following content, can refer to different display windows and contents within two display windows and two content sets. For example, when a user scrolls through the first content, i.e. the original text, the first content is the target content, and the second content, i.e. the translation, is the following content. The first display window showing the original text is the target display window, and the second display window showing the translation is the other display window. However, when a user scrolls through the second content, i.e. the translation, the second content is the target content, and the first content, i.e. the original text, is the following content. The second display window showing the translation is the target display window, and the first display window showing the original text is the other display window.

[0097] Here, the scrolling operation can be triggered by the user sliding their finger up and down on the touch display area where the target display window is located, by the user controlling the scrolling of the content of the target display window through physical buttons, or by the user scrolling input through the mouse wheel or touchpad, etc. This embodiment of the invention does not specifically limit this.

[0098] In response to a scrolling action on the target display window, the target sentence corresponding to that scrolling action within the target content can be determined. Here, the target sentence refers to a specific sentence in the target content within the target display window that the user intends to view by performing the scrolling action. In some embodiments, the target sentence can be identified from all sentences in the target content by analyzing the positional changes of the target display window content caused by the scrolling action.

[0099] In some embodiments, the target sentence can be the sentence currently positioned at a preset position or closest to a preset position within the target display window as the user scrolls. The preset position can be the top edge of the target display window in the vertical direction, i.e., the top of the target display window, or other fixed reference positions in the vertical direction, such as the middle position. This embodiment of the invention does not specifically limit this. Taking the top edge of the target display window as an example, after the user scrolls the target display window, the sentence closest to the top edge of the target window can be determined from the target content as the target sentence.

[0100] Sentence-level correspondence refers to the mapping relationship established between two pieces of content at the sentence level. For example, in a translation scenario, after obtaining the source text, the translation processing unit outputs the translation in sentence order. This automatically establishes a one-to-one mapping relationship between each sentence in the source text and each sentence in the translation, forming a sentence-level correspondence between the source text and the translation, i.e., a sentence-level correspondence between the first and second pieces of content.

[0101] After obtaining the target sentence of the scrolling operation in the target content, the sentence corresponding to the target sentence in the following content can be mapped based on the sentence-level correspondence between the first content and the second content. In this embodiment of the invention, this sentence is denoted as the following sentence.

[0102] For example, the target content contains several original English sentences, and the following content contains several corresponding Chinese translation sentences. The sentence-level correspondence includes mapping relationships established sequentially such as (original sentence 1, translated sentence 1), (original sentence 2, translated sentence 2), etc. When the user scrolls to the third original sentence of the target content in the target display window, the third original sentence is identified as the target sentence. Based on the sentence-level correspondence, the corresponding translation of the third original sentence in the following content, that is, the third Chinese translation in the following content, is identified as the following sentence.

[0103] After determining the target sentence and the following sentences, the target sentence can be scrolled to the preset position in the target display window, while the following sentences can be scrolled to the preset positions in other display windows.

[0104] Here, scrolling display refers to the process of adjusting the vertical scrolling position of the window content to make a specified sentence appear at a preset position in the display window. Further, for the target display window, its vertical scrolling position can be adjusted to align the target sentence with its preset position, thus placing the target sentence at that preset position. For other display windows, their vertical scrolling positions can be adjusted synchronously with the target display window to align the following sentence with its preset position, thus placing the following sentence at its preset position. Furthermore, the scrolling position adjustments of the target display window and other display windows are performed simultaneously, maintaining synchronization in the operation sequence, thereby achieving a visually linked scrolling between the target display window and other display windows.

[0105] In some embodiments, the preset positions of the target display window and other display windows are both the top edge of their respective windows in the vertical direction. In this case, regardless of which sentence in the target content the user scrolls through in the target display window, the target sentence can be scrolled to the top edge of the target display window, and the corresponding sentence in the following content can be scrolled to the top edge of the other display windows. This ensures that the target sentence and the following sentence are always within the same horizontal line of sight, allowing the user to complete the sentence-by-sentence comparison reading of the original text and the translation without having to move their gaze up and down between the target display window and other display windows.

[0106] For example, a user scans and inputs a multi-sentence English text using a dictionary pen. The dictionary pen translates the English text into a Chinese translation, resulting in two segments: the original English text and the Chinese translation, displayed in two separate windows. Assuming the user scrolls upwards in the target window containing the original English text, the dictionary pen responds by identifying sentence 3, currently near the top of the target window, as the target sentence. Based on sentence-level correspondence, it determines sentence 3 in the Chinese translation segment as the following sentence. The dictionary pen then scrolls sentence 3 to the top edge of the target window and simultaneously scrolls the translated sentence to the top edge of the other windows. This allows the user to see the original sentence at the top of the target window and the translated sentence at the top of the other windows, with both presented horizontally aligned. The user's gaze does not need to shift vertically, allowing for direct English-Chinese reading of the sentence.

[0107] In the display method provided in this embodiment of the invention, when the user performs a scrolling operation on the target display window, the target sentence and the following sentence are determined in real time based on the sentence-level correspondence, and the two are scrolled to their respective preset positions in the window simultaneously. As a result, when the user browses any sentence of the target content, the corresponding sentence in the following content is always visually aligned horizontally with it, so that the sentence-by-sentence comparison between the first content and the second content can be completed without the need for eye movement. This solves the problem of difficulty in comparison under vertical flat layout and the need to repeatedly scroll up and down to confirm the correspondence, effectively improving the user's reading efficiency and user experience.

[0108] Furthermore, the synchronous scrolling of the first and second display windows is achieved based on sentence-level correspondence, rather than based on the same scrolling distance or scrolling percentage. This avoids the permanent drift problem caused by the inconsistency in height between the first and second content, and ensures that the corresponding sentences between the first and second content always remain visually horizontally aligned during synchronous scrolling.

[0109] Based on any of the above embodiments, in the translation scenario, step 420, determining the target sentence in the target content where the scrolling operation is performed, includes: Obtain the scroll distance within the target display window; Obtain the display distance between the display position of each sentence in the target content within the target display window and the preset position; The target sentence is determined from the target content based on the difference between the display distance and the scroll distance of each sentence in the target content.

[0110] Specifically, upon detecting a scroll event targeting the target display window—that is, upon detecting a scroll operation targeting the target display window—the current scroll position of the target display window's scroll container can be read to obtain the scroll distance generated within the target display window. Here, the scroll distance is the vertical displacement of the target content relative to the visible area of ​​the target display window caused by the user's scrolling action. For example, the scroll distance can correspond to the `scrollTop` property value of the target display window's scroll container, where `scrollTop` represents the vertical pixel distance by which the top of the target content extends beyond the top of the visible area of ​​the target display window.

[0111] In addition, it is possible to obtain the display distance between the display position of each sentence in the target content and the preset position within the target display window.

[0112] For each sentence, the display position refers to its physical or logical coordinate position during layout and rendering. For example, the display position can be the offset of the sentence relative to the top of its outer scrolling container within the DOM (Document Object Model), and can be represented by `offsetTop`. The display distance refers to the relative distance between the sentence's own display position and the preset position of the target display window in an unscrolled state. In some embodiments, assuming the preset position is the top of the visible area of ​​the target display window, the display position can be directly determined as the display distance between the displayed position and the preset position.

[0113] After obtaining the scroll distance and the display distance of each sentence in the target content, the difference between the scroll distance and the display distance can be calculated. Specifically, this difference can be the absolute value of the mathematical difference between the display distance and the scroll distance. This difference directly reflects the true absolute distance between the sentence and the preset position of the target display window under the current scrolling operation.

[0114] After obtaining the difference between the display distance and the scroll distance of each sentence in the target content, the sentence with the smallest difference in the target content can be determined, that is, the sentence that is closest to the preset position of the target display window under the current scrolling operation. The sentence with the smallest difference is then determined as the target sentence.

[0115] In this embodiment of the invention, by obtaining the scrolling distance and the display distance of each sentence, and determining the target sentence from the target content based on the difference between the two, the target sentence that the user expects to read through scrolling can be located objectively and accurately from the target content. This provides a basis for determining the following sentence corresponding to the target sentence, so as to achieve synchronous scrolling at the sentence level.

[0116] Based on any of the above embodiments, in the translation scenario, step 420, which involves displaying the first content and the second content based on the first display mode, further includes: Based on the vertical height of the first display window and the row height of the first display window when displaying the first content, a first compensation value is determined; based on the first compensation value, fill space is added at the end of the first content; A second compensation value is determined based on the vertical height of the second display window and the line height of the second display window when displaying the second content; based on the second compensation value, fill space is added at the end of the second content.

[0117] Specifically, in order to ensure that the sentence at the end of the content may also scroll to the preset position of the display window during the scrolling display process, the end of the first content and the second content are filled in in the embodiments of the present invention.

[0118] Furthermore, for the first and second display windows, a height compensation value can be determined based on the vertical height of the display window and the line height of the display window when displaying content. In this embodiment of the invention, the height compensation value for the first content is recorded as the first compensation value, and the height compensation value for the second content is recorded as the second compensation value.

[0119] The vertical height of the display window refers to the actual visible height occupied by the display window in the vertical direction, which can also be understood as the viewport height. The line height of the display window when displaying content refers to the vertical height occupied by a single sentence in the content when rendered and displayed within the display window, which can also be understood as the height of a single sentence.

[0120] The height compensation value of the window can be obtained by subtracting its vertical height from its line height when displaying content. The height compensation value is the additional vertical space distance that needs to be compensated so that the last sentence of the content can be fully reached and remain in the preset position of the window.

[0121] After obtaining the display window's height compensation value, a fill space with a height equal to the height compensation value can be added at the end of the content. Here, fill space refers to an additional blank area after the last sentence of the content, containing no actual text but occupying effective scroll height; for example, it could be padding. It's understandable that by inserting a blank fill space with a height equal to the height compensation value at the end of the content, the total scroll height of the entire content can be artificially extended. Therefore, even if the default position is at the top of the display window, the sentence at the end of the content can still be displayed at the top of the display window through scrolling or synchronous scrolling.

[0122] In this embodiment of the invention, a height compensation value is calculated based on the vertical height and line height of the display window, and a filling space equal to the height compensation value is added at the end of the content. This achieves a sentence boundary snapping and end compensation mechanism, thereby breaking the content height limitation of the native scrolling container and ensuring that all sentences in the content can be scrolled to the preset position of the display window. This ensures that sentence-level alignment is effective for all sentences in the content and avoids the situation where the end sentences of the content cannot be synchronized due to insufficient height.

[0123] Based on any of the above embodiments, in the translation scenario, step 420, which involves displaying the first content and the second content based on the first display mode, further includes: During the continuous scrolling operation, the display window where the scrolling operation is taking place is locked as the target display window, and scrolling drive requests from other display windows are ignored; During the scrolling display of the following sentence, the scrolling event callbacks triggered by the scrolling display of the following sentence are ignored.

[0124] Specifically, because there is a synchronous scrolling mechanism between the target display window and other display windows, driving one of the display windows to scroll can easily trigger scrolling events at the system's underlying level, causing the two display windows to compete for control or fall into an infinite loop. To ensure the stability of synchronous scrolling, a dual-lock anti-conflict mechanism is introduced in this embodiment of the invention.

[0125] During the period from when a user initiates a scrolling action until the scrolling action is completely completed, the display window where the scrolling action is taking place can be locked as the target display window. During this period, the display window currently receiving the user's scrolling action can be regarded as the target display window for active scrolling.

[0126] Due to the linkage mechanism, scrolling of the target display window will drive the scrolling of other display windows. When other display windows physically scroll, the system's underlying layer often generates corresponding scroll-driven requests. These requests are signals or events sent by other display windows to the system requesting the processing of their own scrolling logic. These scroll-driven requests may, in turn, force synchronization with the target display window. This dual-sided preemption can cause a conflict in the synchronization positions of the two display windows, resulting in severe visual jitter.

[0127] Therefore, in this embodiment of the invention, during the period when the display window where the scrolling operation is located is locked as the target display window, that is, during the period when the display window where the scrolling operation is located is locked as the only legitimate active input source, the electronic device directly ignores the scrolling drive request from the other display windows, thereby effectively blocking the reverse interference of the non-active side to the synchronization logic.

[0128] Furthermore, during the scrolling display following the sentence, changes in the position of DOM elements usually automatically dispatch native scroll events. If this is not blocked, the system may mistakenly assume that other display windows are passively scrolling under the user's scrolling action, and thus perform reverse synchronous scrolling on the target display window. This ultimately creates an infinite recursive loop where the target display window synchronizes with other display windows for associated scrolling → other display windows trigger callbacks → other display windows synchronize with the target display window for associated scrolling.

[0129] To switch the above infinite loop link, during the scrolling display following the sentence, you can actively intercept and ignore scrolling event callbacks caused by the linked scrolling display of other display windows.

[0130] In this embodiment of the invention, a dual-lock anti-conflict system is constructed by a first mechanism of locking the target display window and ignoring requests from other display windows, and a second mechanism of ignoring event callbacks during program synchronization. This effectively solves the visual jitter problem caused by the inherent dual-side preemption in the synchronous scrolling of dual display windows, as well as the infinite recursive dead loop problem caused by program event re-entry, thus ensuring the stability and smoothness of the simultaneous interaction of dual display windows on the same screen.

[0131] Based on any of the above embodiments, ignoring the scroll event callback triggered by the scroll display of the following sentence during the scrolling display process includes: During the scrolling display of the following sentences, a synchronization state lock is marked; While the synchronization state lock is marked, scroll event callbacks triggered by the scrolling display of the following sentence are ignored, and the synchronization state lock is released in the next rendering frame after the scrolling display of the following sentence is completed.

[0132] Specifically, during the process of driving the following sentences in other display windows to scroll to a preset position, a synchronization state lock can be marked. Here, the synchronization state lock is a state flag set in system memory or at the application level, such as the `syncingRef` variable. Marking the synchronization state lock means setting the state flag to an active state. By marking the synchronization state lock, the system can be declared that the current state is a special state that drives the synchronous scrolling of the following sentences.

[0133] While the synchronization state lock is being held, electronic devices can directly ignore scroll event callbacks triggered by the scrolling display following the sentence until the synchronization state lock is released.

[0134] Furthermore, the synchronization state lock is not released immediately after the scrolling display of the following sentence is completed, but rather in the next rendered frame after the scrolling display of the following sentence is completed. In other words, the release action for the synchronization state lock is postponed until the start of the next rendering cycle.

[0135] For example, the synchronization state lock can be released in the next rendering frame after the scrolling display of the following sentence is completed using requestAnimationFrame. That is, the scrolling synchronization operation is postponed to the next rendering frame after the scrolling display of the following sentence is completed.

[0136] Understandably, in the actual operating environment of electronic devices, some underlying systems' scroll events are not triggered synchronously and immediately upon a change in position. Instead, they are placed in a microtask queue and dispatched asynchronously at a later time in the current execution stack. If the electronic device cancels the synchronization state lock immediately after executing the scrolling of the following sentence, the electronic device may still incorrectly respond to the delayed scrolling event, causing the anti-collision mechanism to completely fail and triggering an infinite loop again.

[0137] In this embodiment of the invention, the release of the synchronization state lock is postponed to the next rendering frame, which can span the microtask dispatch cycle of the current execution stack. This ensures that regardless of whether the underlying system uses synchronous triggering or asynchronous microtask triggering, all false scrolling events caused by the program can be successfully intercepted before the next rendering frame, thereby eliminating the risk of anti-conflict mechanism failure caused by microtask delay.

[0138] Based on any of the above embodiments, the demonstration method further includes: The target sentence and / or the following sentence are presented in a first form; The first and second contents are presented in a second form, excluding the target sentence and / or the following sentence; the first form is different from the second form.

[0139] Specifically, after identifying the target sentence in the target content and the following sentences in the following content, differentiated displays can be made for the target sentence, the following sentences, and other sentences.

[0140] The target sentence and / or following sentence can be displayed in a first form, and other sentences in the first and second content, excluding the target sentence and / or following sentence, can be displayed in a second form.

[0141] Here, the first form can be a visual rendering style used for emphasis and highlighting. For example, it can use a specific font color, a striking background highlight color, bold font, or add a special border to distinguish it from other ordinary text in the window. For example, the first form could be yellow highlight. By presenting the target sentence and its following sentence in a highlighted, eye-catching first form, a strong visual appeal can be created, clearly indicating the active sentence pair undergoing semantic comparison in the two windows.

[0142] The second form can be a relatively weaker, more conventional visual rendering style, with significantly lower color saturation or contrast than the first form. For example, the second form could be a regular off-white or other darker colors. By presenting misaligned sentences that are not currently the focus of the reading in a relatively dim or ordinary second form, it is possible to effectively prevent these non-focused sentences from interfering with the user's vision, thus achieving visual noise reduction.

[0143] Based on any of the above embodiments, step 420, which involves displaying the first content and the second content based on the first display mode, includes: The horizontal scaling ratio is calculated based on the standard viewport width and the actual width of the screen, and the vertical scaling ratio is calculated based on the standard viewport height and the actual height of the screen. The smaller of the horizontal scaling ratio and the vertical scaling ratio is used as a uniform scaling ratio. Based on the uniform scaling ratio, the display parameters of the first display mode are scaled proportionally to obtain adaptive display parameters. Based on the adaptive display parameters, the first content and the second content are displayed.

[0144] Specifically, in practical applications, since the actual size of the screen of an electronic device may deviate from the size of the design draft, in order to ensure the compatibility and display effect of the first display mode on screens of different sizes, in this embodiment of the invention, a uniform scaling ratio can be calculated based on the standard viewport width, the actual width of the screen, the standard viewport height, and the actual height of the screen, so as to scale the display parameters.

[0145] The standard viewport width and standard viewport height refer to the baseline design dimensions used when designing the display interface. The actual screen width and actual screen height refer to the physical screen's usable viewable area size of the electronic device currently running this display method. The horizontal scaling ratio (scaleX) can be obtained by dividing the actual screen width by the standard viewport width, and the vertical scaling ratio (scaleY) can be obtained by dividing the actual screen height by the standard viewport height.

[0146] After calculating the horizontal and vertical scaling ratios, these two ratios can be compared, and the smaller value can be used as the uniform scaling ratio for the entire application.

[0147] Next, based on this unified scaling ratio, the original display parameters in the first display mode, such as the standard width and height set for the first and second display windows, can be scaled proportionally to obtain adaptive display parameters for the current screen rendering. For example, the top left corner of the screen can be anchored as the origin for proportional scaling.

[0148] Finally, the first and second content can be loaded and rendered under the display window layout with the above adaptive display parameters, thus completing the interface display.

[0149] The display method provided in this embodiment of the invention calculates the horizontal and vertical scaling ratios respectively and takes the smaller value as the uniform scaling ratio for proportional scaling. This enables responsive adaptive adaptation of the first display mode on screens of different physical sizes. While effectively avoiding the display content from being stretched or distorted or cropped due to exceeding the screen limits, it ensures that the first content and the second content can maintain a consistent visual layout and excellent reading experience on different types of electronic devices, greatly enhancing the compatibility and versatility of the interface display.

[0150] Based on any of the above embodiments, the demonstration method further includes: In response to a mode switching operation, the first content and the second content are displayed based on a second display mode, wherein the second display mode is configured to sequentially arrange and display the first content and the second content in the longitudinal direction of the screen.

[0151] Specifically, the mode switching operation refers to an instruction operation triggered by a user to cause an electronic device to change the current display layout mode. The mode switching operation may specifically be triggered by the user pressing a replacement button disposed on the device body, or implemented by clicking a virtual switching button on a touch screen, or through a specific screen touch gesture, which is not specifically limited in the embodiments of the present invention.

[0152] In a case where the above mode switching operation is detected, the display interface of the electronic device may perform layout reconstruction, for example, switching from the first display mode to the second display mode.

[0153] The second display mode herein may be understood as a vertical tiled layout mode. Under the second display mode, the first content and the second content are no longer displayed side by side in split screens in the transverse direction of the screen, but are sequentially arranged in the longitudinal direction of the screen.

[0154] It should be noted that the above switching of the display modes is bidirectionally reversible. If the current display mode is the second display mode, the user may also perform the mode switching operation to switch the display interface to the first display mode.

[0155] Figure 7 is the third schematic diagram of the display page provided by the present invention, as shown in Figure 7 shown, in a word lookup scenario, the first display window 51 of the display page under the first display mode may display the first content including the queried character "shan", as well as the pinyin, structure, radical and stroke count of the character, and the first content is fixedly displayed in the first display window 51; the second display window 52 of the display page may display the second content including various definitions of the queried character "shan", and the second content is scrollably displayed in the second display window 52, that is, the user may trigger the scroll display of the second content in the second display window 52 through a scrolling operation.

[0156] In addition, in the Figure 7 displayed display page, a mode switching control 53 is further included. The user may trigger the mode switching operation by tapping the mode switching control 53, thereby triggering switching between the first display mode and the second display mode. That is, under the first display mode, in response to the mode switching operation, the display may be switched to the second display mode.

[0157] Figure 8 is the fourth schematic diagram of the display page provided by the present invention, as shown in Figure 8As shown, in the word search scenario, in the second display mode, the first and second pieces of content are arranged vertically. Furthermore, in... Figure 8 The displayed page also includes a mode switching control 53. Users can trigger a mode switching operation by tapping the mode switching control 53, thereby switching between the first display mode and the second display mode. That is, in the second display mode, in response to the mode switching operation, the display can switch back to the first display mode.

[0158] Figure 9 This is the fifth illustration of the display page provided by the present invention, such as... Figure 9 As shown, in the translation scenario, the first display window 51 in the first display mode can display the first content of the original text before translation, and the second display window 52 can display the second content of the translated text. Each sentence in the first content corresponds one-to-one with each sentence in the second content. The first display window 51 and the second display window 52 scroll synchronously, specifically, the user can scroll either of the two display windows, and the other display window will scroll synchronously as well.

[0159] In addition, Figure 9 The displayed page also includes a mode switching control 53. Users can trigger a mode switching operation by tapping the mode switching control 53, thereby switching between the first display mode and the second display mode. That is, in the first display mode, in response to the mode switching operation, the display can switch to the second display mode.

[0160] Figure 10 This is the sixth illustration of the display page provided by the present invention, as shown below. Figure 10 As shown, in the translation scenario, in the second display mode, the first and second content items are arranged vertically. Furthermore, in... Figure 10 The displayed page also includes a mode switching control 53. Users can trigger a mode switching operation by tapping the mode switching control 53, thereby switching between the first display mode and the second display mode. That is, in the second display mode, in response to the mode switching operation, the display can switch back to the first display mode.

[0161] In this embodiment of the invention, based on the mode switching operation, the controllable switching between a first display mode based on two display windows and a second display mode with a vertical tiled layout is realized, thereby taking into account the user's inherent reading habits and effectively improving the convenience of human-computer interaction and user experience.

[0162] Based on any of the above embodiments, the present invention provides a demonstration method applied to a dictionary pen. The method includes: First, obtain the scanned content and use it as the first content.

[0163] Next, determine the current display scenario, and based on the current display scenario, determine the second content corresponding to the first content.

[0164] For example, in a scenario where the display is a word lookup scenario, the first content is processed based on a dictionary to obtain a second content that reflects the definition, example sentences, and other information of the first content; in a scenario where the display is a translation scenario, the first content is translated based on a translation engine to obtain a second content that corresponds one-to-one with the sentences in the first content.

[0165] Subsequently, based on the display scenario, the horizontal width ratio between the first display window and the second display window is determined, and the first display window and the second display window in the first display mode are rendered based on the horizontal width ratio, and the first content and the second content are displayed based on the first display window and the second display window respectively.

[0166] For example, in the case of a word lookup scenario, the horizontal width ratio is set to 3:7, and the first display window is set to a fixed display window while the second display window is a scrolling display window; in the case of a translation scenario, the horizontal width ratio is set to 5:5, and both the first and second display windows are set to scrolling display windows, with the first and second display windows scrolling synchronously.

[0167] Furthermore, in the context of word search, to achieve the effect of displaying the first content fixedly within the first display window and the second content scrollably within the second display window, a scrolling container that allows vertical scrolling can be created at the bottom of the screen. The visible area of ​​this scrolling container is set to cover the entire screen, and the interface including the first and second content is rendered within it. A fixed container is then created above the scrolling container, also rendering the interface including the first and second content, with its visible width matching the width of the first display window. Additionally, a mask layer can be placed between the scrolling and fixed containers, with its size and position completely overlapping the first display window. Thus, through a structure consisting of a scrolling container, a mask layer, and a fixed container from bottom to top, the visual effect of a fixed first display window and a scrolling second display window is achieved.

[0168] In addition, in translation scenarios, to achieve synchronized scrolling of the first and second display windows, blank fill spaces with a height equal to the difference between the vertical height and the line height can be added at the end of the first and second content, respectively, to ensure that the last sentence of the two content can also be displayed at the top of the display window due to scrolling or synchronized scrolling.

[0169] Furthermore, in response to scrolling operations, the distance between each sentence in the target content and the top of the display window after the scrolling operation can be calculated based on the scrolling distance of the scrolling operation and the distance between each sentence in the target content and the top of the display window. The sentence closest to the top is selected as the target sentence, and the sentence following the target sentence is determined by combining the sentence-level correspondence between the two contents, thereby achieving synchronous scrolling of the two display windows.

[0170] Furthermore, during the continuous scrolling operation, the display window where the scrolling operation is located is locked as the active operation side, and scrolling events from the non-active operation side are ignored to prevent the non-active side from preempting; and during the scrolling display following the sentence, the synchronization state is locked, thereby ignoring the scrolling event callbacks triggered by the scrolling display following the sentence, and unlocking in the next rendering frame after the scrolling display following the sentence is completed, thereby blocking the intrusion of procedural callbacks and avoiding getting stuck in an infinite scrolling loop.

[0171] The display device provided by the present invention will be described below. The display device described below can be referred to in correspondence with the display method described above.

[0172] Figure 11 This is a schematic diagram of the structure of the display device provided by the present invention, as shown below. Figure 11 As shown, the device includes: The acquisition unit 1110 is used to acquire first content and second content corresponding to the first content in the display scenario; The display unit 1120 is used to display the first content and the second content based on a first display mode. The first display mode includes a first display window and a second display window arranged adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

[0173] In the device provided in this embodiment of the invention, the first display mode fully utilizes the horizontal space of the screen, presenting the first content and the second content side-by-side in adjacent first and second display windows, thus significantly improving the utilization rate of the horizontal space of the screen. Furthermore, by adapting the horizontal width ratio between the first and second display windows in the first display mode to the display scenario, flexible adaptation to the differentiated information display needs of different display scenarios is achieved. This effectively solves problems such as information forgetting, information density imbalance, and difficulty in comparative reading that exist in vertically arranged layouts, while optimizing the user's information retrieval experience and learning efficiency in different display scenarios.

[0174] Based on any of the above embodiments, the display scenarios include word lookup scenarios and / or translation scenarios.

[0175] Based on any of the above embodiments, in the word search scenario, the first display window is a fixed display window, and the second display window is a scrolling display window.

[0176] Based on any of the above embodiments, in the word search scenario, the display unit is specifically used for: The first content and the second content are rendered in a scrolling container, wherein the visible area of ​​the scrolling container includes the first display window and the second display window; The first content and the second content are rendered in a fixed container, which is set above the scrolling container, and the visible width of the fixed container is the same as the width of the first display window; A masking layer is provided between the scrolling container and the fixed container, the masking layer covering the area in the scrolling container corresponding to the first display window.

[0177] Based on any of the above embodiments, in the word search scenario, the display unit is further used for: Based on the content height of the first content and the vertical height of the screen, it is determined whether the content displayed within the fixed container is allowed to scroll independently.

[0178] Based on any of the above embodiments, in the translation scenario, both the first display window and the second display window are scrolling display windows, and the first display window and the second display window scroll synchronously.

[0179] Based on any of the above embodiments, in the translation scenario, the display unit is specifically used for: In response to a scrolling operation on a target display window, the target sentence in the target content is determined, wherein the target display window is either the first display window or the second display window, and the target content is the content displayed in the target display window; Based on the sentence-level correspondence between the first content and the second content, the following sentence corresponding to the target sentence in the following content is determined, wherein the following content is the content in the first content and the second content other than the target content; The target sentence and the following sentence are simultaneously scrolled and displayed to preset positions in the first display window and the second display window.

[0180] Based on any of the above embodiments, the display unit is specifically used for: Obtain the scroll distance within the target display window; Obtain the display distance between the display position of each sentence in the target content within the target display window and the preset position; The target sentence is determined from the target content based on the difference between the display distance and the scroll distance of each sentence in the target content.

[0181] Based on any of the above embodiments, in the translation scenario, the display unit is further configured to: Based on the vertical height of the first display window and the row height of the first display window when displaying the first content, a first compensation value is determined; based on the first compensation value, fill space is added at the end of the first content; A second compensation value is determined based on the vertical height of the second display window and the line height of the second display window when displaying the second content; based on the second compensation value, fill space is added at the end of the second content.

[0182] Based on any of the above embodiments, in the translation scenario, the display unit is further configured to: During the continuous scrolling operation, the display window where the scrolling operation is taking place is locked as the target display window, and scrolling drive requests from other display windows are ignored; During the scrolling display of the following sentence, the scrolling event callbacks triggered by the scrolling display of the following sentence are ignored.

[0183] Based on any of the above embodiments, the display unit is specifically used for: During the scrolling display of the following sentences, a synchronization state lock is marked; While the synchronization state lock is marked, scroll event callbacks triggered by the scrolling display of the following sentence are ignored, and the synchronization state lock is released in the next rendering frame after the scrolling display of the following sentence is completed.

[0184] Based on any of the above embodiments, the display unit is specifically used for: The horizontal scaling ratio is calculated based on the standard viewport width and the actual width of the screen, and the vertical scaling ratio is calculated based on the standard viewport height and the actual height of the screen. The smaller of the horizontal scaling ratio and the vertical scaling ratio is used as a uniform scaling ratio. Based on the uniform scaling ratio, the display parameters of the first display mode are scaled proportionally to obtain adaptive display parameters. Based on the adaptive display parameters, the first content and the second content are displayed.

[0185] Based on any of the above embodiments, the display unit is further configured to: In response to a mode switching operation, the first content and the second content are displayed based on a second display mode, which is used to arrange and display the first content and the second content sequentially in the vertical direction of the screen.

[0186] Figure 12 An example is a schematic diagram of the physical structure of an electronic device, such as... Figure 12 As shown, the electronic device may include: a processor 1210, a communications interface 1220, a memory 1230, and a communication bus 1240, wherein the processor 1210, the communications interface 1220, and the memory 1230 communicate with each other via the communication bus 1240. The processor 1210 can call logical instructions in the memory 1230 to execute a demonstration method, which includes: Obtain the first content, and the second content corresponding to the first content in the display scenario; The first content and the second content are displayed based on a first display mode, which includes a first display window and a second display window arranged adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

[0187] Furthermore, the logical instructions in the aforementioned memory 1230 can be implemented as software functional units and, when sold or used as independent products, can be stored in a computer-readable storage medium. Based on this understanding, the technical solution of the present invention, essentially, or the part that contributes to related technologies, or a portion of the technical solution, can be embodied in the form of a software product. This computer software product is stored in a storage medium and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute all or part of the steps of the methods described in the various embodiments of the present invention. The aforementioned storage medium includes various media capable of storing program code, such as USB flash drives, portable hard drives, read-only memory (ROM), random access memory (RAM), magnetic disks, or optical disks.

[0188] Figure 13 This is a schematic diagram of the structure of the dictionary pen provided by the present invention, as shown below. Figure 13 As shown, the dictionary pen includes a dictionary pen body 1300, a memory 1310 and a processor 1320 disposed within the dictionary pen body 1300, and a computer program stored in the memory 1310 and running on the processor 1320. When the processor 1320 executes the computer program, it implements the demonstration method provided by the above-described methods. The method includes: Obtain the first content, and the second content corresponding to the first content in the display scenario; The first content and the second content are displayed based on a first display mode, which includes a first display window and a second display window arranged adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

[0189] On the other hand, the present invention also provides a computer program product, the computer program product comprising a computer program, the computer program being able to be stored on a non-transitory computer-readable storage medium, and when the computer program is executed by a processor, the computer being able to execute the demonstration methods provided by the above methods, the method comprising: Obtain the first content, and the second content corresponding to the first content in the display scenario; The first content and the second content are displayed based on a first display mode, which includes a first display window and a second display window arranged adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

[0190] In another aspect, the present invention also provides a non-transitory computer-readable storage medium having a computer program stored thereon, which, when executed by a processor, is implemented to perform the demonstration methods provided by the above methods, the method comprising: Obtain the first content, and the second content corresponding to the first content in the display scenario; The first content and the second content are displayed based on a first display mode, which includes a first display window and a second display window arranged adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

[0191] The device embodiments described above are merely illustrative. The units described as separate components may or may not be physically separate. The components shown as units may or may not be physical units; that is, they may be located in one place or distributed across multiple network units. Some or all of the modules can be selected to achieve the purpose of this embodiment according to actual needs. Those skilled in the art can understand and implement this without any creative effort.

[0192] Through the above description of the embodiments, those skilled in the art can clearly understand that each embodiment can be implemented by means of software plus necessary general-purpose hardware platforms, and of course, it can also be implemented by hardware. Based on this understanding, the above technical solutions, in essence or the parts that contribute to the related technology, can be embodied in the form of software products. This computer software product can be stored in a computer-readable storage medium, such as ROM / RAM, magnetic disk, optical disk, etc., and includes several instructions to cause a computer device (which may be a personal computer, server, or network device, etc.) to execute the methods described in the various embodiments or some parts of the embodiments.

[0193] Finally, it should be noted that the above embodiments are only used to illustrate the technical solutions of the present invention, and not to limit them; although the present invention has been described in detail with reference to the foregoing embodiments, those skilled in the art should understand that modifications can still be made to the technical solutions described in the foregoing embodiments, or equivalent substitutions can be made to some of the technical features; and these modifications or substitutions do not cause the essence of the corresponding technical solutions to deviate from the spirit and scope of the technical solutions of the embodiments of the present invention.

Claims

1. A display method, characterized in that, include: Obtain the first content, and the second content corresponding to the first content in the display scenario; The first content and the second content are displayed based on a first display mode, which includes a first display window and a second display window arranged adjacent to each other in the horizontal direction of the screen. The first display window is used to display the first content, and the second display window is used to display the second content. The horizontal width ratio between the first display window and the second display window is determined based on the display scenario.

2. The display method according to claim 1, characterized in that, The demonstration scenarios include word lookup scenarios and / or translation scenarios.

3. The display method according to claim 2, characterized in that, In the word search scenario, the first display window is a fixed display window, and the second display window is a scrolling display window.

4. The display method according to claim 3, characterized in that, In the aforementioned word search scenario, displaying the first content and the second content based on the first display mode includes: The first content and the second content are rendered in a scrolling container, wherein the visible area of ​​the scrolling container includes the first display window and the second display window; The first content and the second content are rendered in a fixed container, which is set above the scrolling container, and the visible width of the fixed container is the same as the width of the first display window; A masking layer is provided between the scrolling container and the fixed container, the masking layer covering the area in the scrolling container corresponding to the first display window.

5. The display method according to claim 4, characterized in that, In the aforementioned word search scenario, displaying the first content and the second content based on the first display mode further includes: Based on the content height of the first content and the vertical height of the screen, it is determined whether the content displayed within the fixed container is allowed to scroll independently.

6. The display method according to claim 2, characterized in that, In the translation scenario, both the first display window and the second display window are scrolling windows, and the first display window and the second display window scroll synchronously.

7. The display method according to claim 6, characterized in that, In the translation scenario, displaying the first content and the second content based on the first display mode includes: In response to a scrolling operation on a target display window, the target sentence in the target content is determined, wherein the target display window is either the first display window or the second display window, and the target content is the content displayed in the target display window; Based on the sentence-level correspondence between the first content and the second content, the following sentence corresponding to the target sentence in the following content is determined, wherein the following content is the content in the first content and the second content other than the target content; The target sentence and the following sentence are simultaneously scrolled and displayed to preset positions in the first display window and the second display window.

8. The display method according to claim 7, characterized in that, Determining the target sentence in the target content for the scrolling operation includes: Obtain the scroll distance within the target display window; Obtain the display distance between the display position of each sentence in the target content within the target display window and the preset position; The target sentence is determined from the target content based on the difference between the display distance and the scroll distance of each sentence in the target content.

9. The display method according to claim 7, characterized in that, In the translation scenario, displaying the first content and the second content based on the first display mode further includes: Based on the vertical height of the first display window and the row height of the first display window when displaying the first content, a first compensation value is determined; based on the first compensation value, fill space is added at the end of the first content; A second compensation value is determined based on the vertical height of the second display window and the line height of the second display window when displaying the second content; based on the second compensation value, fill space is added at the end of the second content.

10. The display method according to claim 7, characterized in that, In the translation scenario, displaying the first content and the second content based on the first display mode further includes: During the continuous scrolling operation, the display window where the scrolling operation is taking place is locked as the target display window, and scrolling drive requests from other display windows are ignored; During the scrolling display of the following sentence, the scrolling event callbacks triggered by the scrolling display of the following sentence are ignored.

11. The display method according to claim 10, characterized in that, The step of ignoring scroll event callbacks triggered by the scrolling display of the following sentence during the scrolling display process includes: During the scrolling display of the following sentences, a synchronization state lock is marked; While the synchronization state lock is marked, scroll event callbacks triggered by the scrolling display of the following sentence are ignored, and the synchronization state lock is released in the next rendering frame after the scrolling display of the following sentence is completed.

12. The display method according to any one of claims 1 to 11, characterized in that, The display of the first content and the second content based on the first display mode includes: The horizontal scaling ratio is calculated based on the standard viewport width and the actual width of the screen, and the vertical scaling ratio is calculated based on the standard viewport height and the actual height of the screen. The smaller of the horizontal scaling ratio and the vertical scaling ratio is used as a uniform scaling ratio. Based on the uniform scaling ratio, the display parameters of the first display mode are scaled proportionally to obtain adaptive display parameters. Based on the adaptive display parameters, the first content and the second content are displayed.

13. The display method according to any one of claims 1 to 11, characterized in that, Also includes: In response to a mode switching operation, the first content and the second content are displayed based on a second display mode, which is used to arrange and display the first content and the second content sequentially in the vertical direction of the screen.

14. An electronic device comprising a memory, a processor, and a computer program stored in the memory and running on the processor, characterized in that, When the processor executes the computer program, it implements the display method as described in any one of claims 1 to 13.

15. A dictionary pen, comprising a dictionary pen body, a memory, a processor disposed within the dictionary pen body, and a computer program stored in the memory and running on the processor, characterized in that, When the processor executes the computer program, it implements the display method as described in any one of claims 1 to 13.

16. A non-transitory computer-readable storage medium having a computer program stored thereon, characterized in that, When the computer program is executed by a processor, it implements the display method as described in any one of claims 1 to 13.

17. A computer program product, comprising a computer program, characterized in that, When the computer program is executed by a processor, it implements the display method as described in any one of claims 1 to 13.

Images