Display device and control method
The display device and control method address font size challenges by adjusting display size to fit within the display area, enhancing readability and space utilization across diverse devices and languages.
Patent Information
- Authority / Receiving Office
- JP · JP
- Patent Type
- Patents
- Current Assignee / Owner
- Filing Date
- 2021-11-17
- Publication Date
- 2026-03-13
AI Technical Summary
Existing display technologies struggle to optimally pre-define font size and style for text on diverse display devices, leading to reduced readability due to unpredictable display results, especially with web browsers and responsive designs, and are impractical for multiple languages and dynamic content.
A display device and control method that temporarily places objects in a display area, compares their size with the area, and adjusts the display size to fit within the area, using a control unit to manage font size and layout adjustments.
Ensures optimal display of objects within the display area, improving readability and utilization of text space without unnecessary font size reduction, suitable for various devices and languages.
Smart Images

Figure 0007829304000001 
Figure 0007829304000002 
Figure 0007829304000003
Abstract
Description
Technical Field
[0001] The present disclosure relates to a display device and the like.
Background Art
[0002] Conventionally, in various devices, display means for displaying characters such as text and numerical values has been provided. Also, various techniques for appropriately displaying characters have been proposed.
[0003] For example, when arranging characters within a line having a predetermined line width, the sum of the allowable compression amounts between each character of the character string to be arranged and the excess amount from the line width when the character string is arranged at a basic character interval are obtained. When the sum of the allowable compression amounts is smaller than the excess amount, the difference between the excess amount and the sum of the allowable compression amounts is obtained, and an additional compression amount to be distributed to each character interval of the character string is obtained based on this difference. A technique for determining the compression amount between each character based on the allowable compression amount of the character and the additional compression amount and arranging the characters has been proposed (see, for example, Patent Document 1).
Prior Art Documents
Patent Documents
[0004]
Patent Document 1
Summary of the Invention
Problems to be Solved by the Invention
[0005] When displaying text (character string) on a display device provided in a device such as an image forming apparatus, it is necessary to fit the text within a predetermined display area while ensuring the maximum readability of the characters. To improve readability, it is necessary to specify the largest possible character size for the text. For this purpose, it is necessary to individually pre-verify the character sizes that exactly fit within the display area.
[0006] In recent years, web browsers have increasingly been used as the display engine for device-specific screens. However, when using general-purpose display engines such as web browsers, it is difficult to predict the display results of various texts in advance, and it is difficult to pre-define the optimal size for displaying text and other objects.
[0007] Web browsers support advanced text formatting and layout processing to achieve high-quality display, and their operation follows specifications defined by the W3C (World Wide Web Consortium). However, the range of supported functions varies from web browser to web browser, and even when supporting the same function, there are often slight differences in control between web browsers. Furthermore, even within the same web browser, the operation may change from version to version due to functional improvements or bug fixes. Moreover, it is impossible to fully understand the behavior of web browsers and simulate their display processing.
[0008] Furthermore, with the increasing diversity of display devices such as smartphones and tablets, much content is now created to automatically adjust its display layout according to the size of various display devices. In such content, commonly known as "responsive design," the size of the text display area may dynamically change to match the size of the area where the content is displayed. In this case, the text may overflow its display area, resulting in a scrollable area, or the overflowing portion may be cut off and omitted. To avoid such phenomena, it is necessary to specify a smaller font size that is considered sufficiently safe after considering various scenarios. However, determining the font size based on the worst-case scenario means that in many cases where the worst-case scenario does not occur, the text display area will not be fully utilized. As a result, text is often displayed in a font size smaller than the optimal size, leading to a decrease in readability.
[0009] Furthermore, regarding the control of font size, there is a method of switching the font size applied to the display according to the number of characters to be displayed. This method is used when displaying text in a predetermined display area and when the number of characters in the text to be displayed varies greatly. For example, it might be possible to display up to 5 characters at 24px, 6 to 10 characters at 20px, and any more than that at 18px. Such a control method is used for displaying phone numbers on mobile phones, etc. However, such a control method is only applicable when there is no concept of word wrap, as in phone numbers, and when the characters entered are limited to numbers and some symbols, and the width required for display can be easily calculated from the number of characters to be displayed. In word sequences and sentences that contain various characters and have an indeterminate length, it is difficult to predict in advance the width of the area required for display, and it is difficult to determine a threshold for switching font sizes. In particular, in the case of Western text, word wrap is performed using delimiters such as spaces, so even a slight change in font size can change the word wrap position of each line, causing a large change in the number of displayed lines. Therefore, adjusting the font size for areas that can display multiple lines becomes even more difficult. As a result, to ensure sufficient safety, it becomes necessary to specify the font size of the characters displayed in the display area, and even with multiple font size settings, it is unavoidable that text will sometimes be displayed in a font size smaller than necessary.
[0010] Furthermore, with globalization, it's not uncommon to see content displayed in more than 20 languages. In such cases, text resources must be switched and displayed for each language. However, when deploying a user interface (UI) with numerous screens in multiple languages, pre-verifying and defining the optimal font size for each language in each text display area is not only time-consuming but also impractical due to the increasing amount of definition data. While it's not impossible to pre-verify the appropriate font size for fixed names and messages that are stored beforehand, it's impossible to pre-verify the appropriate font size when displaying user data, user-customizable data, or text dynamically obtained from external sources.
[0011] Thus, there is a challenge in that it is difficult to optimally pre-define the font size and style of text. This challenge is not addressed in existing technologies such as Patent Document 1.
[0012] In view of the above-mentioned issues, this disclosure aims to provide a display device, etc., that can appropriately display objects in a display area. [Means for solving the problem]
[0013] To solve the above-mentioned problems, the display device of this disclosure comprises a display unit and a control unit, wherein the control unit temporarily places an object in the display area of the display unit, compares the size of the object with the size of the display area to determine the display size of the object so that the object is included in the display area, and draws the object within the display area with the determined display size.
[0014] Furthermore, the control method of the present disclosure is a control method for a display device, characterized by including the steps of: temporarily placing an object in a display area; determining the display size of the object by comparing the size of the object with the size of the display area so that the object is included in the display area; and drawing the object within the display area with the determined display size. [Effects of the Invention]
[0015] According to this disclosure, it is possible to provide a display device, etc., that can appropriately display an object in a display area. [Brief explanation of the drawing]
[0016] [Figure 1] This is a perspective view of the image forming apparatus in the first embodiment. [Figure 2] This is a diagram illustrating the functional configuration of the image forming apparatus in the first embodiment. [Figure 3] It is a diagram showing an example of the data configuration of the setting table in the first embodiment. [Figure 4] It is a flowchart showing the flow of the main processing of the image forming apparatus in the first embodiment. [Figure 5] It is a flowchart showing the flow of the one-line fixed area processing in the first embodiment. [Figure 6] It is a flowchart showing the flow of the multi-line area processing in the first embodiment. [Figure 7] It is a flowchart showing the flow of the height over processing in the first embodiment. [Figure 8] It is a flowchart showing the flow of the width compression processing in the first embodiment. [Figure 9] It is a flowchart showing the flow of the width compression processing for height over in the first embodiment. [Figure 10] It is a diagram showing an operation example in the first embodiment. [Figure 11] It is a diagram showing an operation example in the first embodiment. [Figure 12] It is a diagram showing an operation example in the first embodiment. [Figure 13] It is a diagram showing an operation example in the first embodiment. [Figure 14] It is a diagram showing an operation example in the first embodiment. [Figure 15] It is a diagram showing an operation example in the first embodiment. [Figure 16] It is a diagram showing an operation example in the first embodiment. [Figure 17] It is a diagram showing an operation example in the first embodiment. [Figure 18] It is a diagram showing an operation example in the first embodiment. [Figure 19] It is a diagram showing an operation example in the first embodiment. [Figure 20] It is a diagram showing an operation example in the first embodiment. [Figure 21] It is a diagram showing an operation example in the first embodiment. [Figure 22]This figure shows an example of operation in the first embodiment. [Figure 23] This figure shows an example of operation in the first embodiment. [Modes for carrying out the invention]
[0017] An embodiment for implementing this disclosure will be described below with reference to the drawings. Note that the following embodiment is merely an example for illustrating this disclosure, and the technical scope of the invention as described in the claims is not limited to the following description.
[0018] [1. First Embodiment] First, the first embodiment will be described. The first embodiment describes a case in which the image processing apparatus of the present disclosure is applied to an image forming apparatus 10. The image forming apparatus 10 is an information processing apparatus having a copying function, a scanning function, a document printing function, etc., and is also called an MFP (Multi-Function Printer / Peripheral).
[0019] [1.1 Functional Configuration] A first embodiment will be described with reference to the drawings. Figure 1 is an external perspective view of the image forming apparatus 10 according to the first embodiment, and Figure 2 is a block diagram showing the functional configuration of the image forming apparatus 10.
[0020] As shown in Figure 2, the image forming apparatus 10 is configured to include a control unit 100, an image input unit 120, an image forming unit 130, a display unit 140, an operation unit 150, a storage unit 160, and a communication unit 190.
[0021] The control unit 100 is a functional unit for controlling the entire image forming apparatus 10. The control unit 100 realizes various functions by reading and executing various programs stored in the storage unit 160, and is composed of, for example, one or more arithmetic units (CPU (Central Processing Unit)). Alternatively, the control unit 100 may be configured as a SoC (System on a Chip) having multiple functions among those described below.
[0022] The control unit 100 functions as an image processing unit 102 by executing a program stored in the memory unit 160. The image processing unit 102 performs various image-related processing. For example, the image processing unit 102 performs sharpening and grayscale conversion processing on an image input by the image input unit 120.
[0023] The image input unit 120 inputs image data to the image forming apparatus 10. For example, the image input unit 120 is composed of a scanning device capable of reading an image and generating image data. The scanning device converts an image into an electrical signal using an image sensor such as a CCD (Charge Coupled Device) or CIS (Contact Image Sensor), and generates digital data by quantizing and encoding the electrical signal.
[0024] The image forming unit 130 forms (prints) an image on a recording medium such as recording paper. The image forming unit 130 is composed of, for example, a laser printer using an electrophotographic method. For example, the image forming unit 130 feeds recording paper from the paper feed tray 132 in Figure 1, forms an image on the surface of the recording paper, and ejects the recording paper from the paper output tray 134.
[0025] The display unit 140 displays various information. The display unit 140 is composed of a display device such as an LCD (Liquid Crystal Display), an OLED (Electro-Luminescence) display, or a microLED display.
[0026] The operation unit 150 receives input from the user of the image forming apparatus 10. The operation unit 150 is composed of input devices such as touch sensors. The method of detecting input in the touch sensor can be any common detection method, such as resistive, infrared, electromagnetic induction, or capacitive touch. The image forming apparatus 10 may also be equipped with a touch panel in which the display unit 140 and the operation unit 150 are integrally formed.
[0027] The memory unit 160 stores various programs and data necessary for the operation of the image forming apparatus 10. The memory unit 160 is composed of storage devices such as a semiconductor memory SSD (Solid State Drive) or an HDD (Hard Disk Drive).
[0028] The memory unit 160 stores the web browser application 162 and the settings table 166, and further reserves a screen information storage area 164 as a storage area.
[0029] The web browser application 162 is software (display engine) used to display predetermined screens, such as the home screen and operation screen, on the display unit 140. The home screen is the basic screen displayed when the power is turned on, when in standby mode, when recovering from sleep mode, etc., and is a screen that allows the user to select the function (job) to be implemented by the image forming apparatus 10. The operation screen is a screen for setting and operating the jobs to be executed.
[0030] The screen information storage area 164 stores data (screen information) used to display the screen (content) shown on the display unit 140 via the web browser application 162. The screen information is associated with each screen (for example, the home screen, operation screens for various functions, etc.). The screen information consists of, for example, HTML (Hyper Text Markup Language) data, CSS (Cascading Style Sheets) data, and image data.
[0031] Content creators who produce screen information specify the following information as settings for each text element (object to be displayed) within the content. Note that the units for values indicating length and font size among the settings below are, for example, pixels (px).
[0032] (1) Text area height and text area width The text area height is the height value of the area where the text (string) of a text element is displayed (hereinafter referred to as the "display area"). The text area width is the width value of the display area. Generally, margins (or padding) are provided around text for display quality and readability, but the above text area width and text area height specify the width and height of the area where the text is actually drawn and do not include the margins. (2) Specified font size (fsOriginal) The specified font size is the font size value of the text to be displayed. In CSS, this is specified by the font-size property. (3) Row height Line height is the height value reserved for displaying a single line of text. It is also called line spacing. Line height can be set as a fixed value or specified, such as "1.5 times the font size." In CSS, it is specified using the `line-height` property. (4) Specified minimum font size (fsSpecifiedReduceMin) This is the minimum font size value that can be set in the automatic scaling process. The automatic scaling process is a process that updates the settings related to the display manner of text (hereinafter referred to as "style information") to a setting that draws the text within the display area when the text displayed based on the settings (1) to (3) above extends beyond the display area. The specified minimum font size may be set as a numerical value or as a ratio to the specified font size. Note that specifying the specified minimum font size is not mandatory (it can be omitted). If the specified minimum font size is not specified, the system minimum font size described later will be applied as the specified minimum font size. (5) Automatic reduction attribute This information indicates whether or not to apply the automatic resizing process. In this embodiment, one of the following values is set as the attribute value of the automatic resizing attribute. • No automatic reduction: Automatic reduction processing will not be applied. • Fixed 1-line area: Apply automatic shrinking. Do not allow display of two or more lines. • Multi-line area: Apply automatic shrinking. Allow display of two or more lines.
[0033] Content creators can specify whether or not to apply automatic text reduction and whether or not to allow line breaks in the displayed text for each text element included in the content, using the automatic text reduction setting.
[0034] There are three main reasons why line breaks occur: • Line breaks caused by newline characters written in the text Word wrap Word wrap refers to a line break that moves the text after a delimiter, such as a space or hyphen, to the next line. • Forced line break (breaking a word in the middle of a line) A forced line break occurs when a word in a Western language, such as English, exceeds the width of the display area despite not containing a delimiter. In such cases, the excess text is forcibly moved to the next line.
[0035] If a content creator does not want to allow line breaks due to the factors mentioned above and must display text on a single line (for example, if there is insufficient height in the display area), they can specify "fixed single-line area" for the auto-shrink attribute of the text element in question.
[0036] The settings table 166 is a table that stores the settings used in the automatic reduction process, and is a table that associates setting values with each setting item, as shown in Figure 3, for example. The setting values stored in the settings table 166 are fixed values common to the entire content. In this embodiment, the following three setting values are stored in the settings table 166. (1) System minimum character size (fsSystemReduceMin) The system minimum font size is the smallest font size value that can be set during the automatic reduction process (for example, "12px"). If the display engine itself has a defined lower limit for font size, that value becomes the lower limit for the text font size. However, if the content side (image forming apparatus 10 side) has a lower limit for font size, that value is defined as the system minimum font size. The system minimum font size is defined in advance to prevent the font size from becoming too small due to the automatic reduction process. (2) Minimum character size that can be compressed width (fsCondensedMin) The minimum character size for width compression is a value (for example, "15px") that indicates the lower limit of the character size that can be compressed during automatic scaling. Width compression refers to the process of displaying text characters in an elongated format to fit within the display area. The minimum character size for width compression is defined in advance to prevent a decrease in the readability of text when small character sizes are compressed. (3) Lower limit of width compression ratio (fsCondensedRatioMin) The lower limit of the width compression ratio is a value (for example, 65%) that indicates the minimum width compression ratio set during automatic scaling. The width compression ratio is the compression ratio of character width in width compression, and is the transformation ratio set for the width (length in the X direction) of the text element when it is displayed. For example, if text that requires a width of 100px is transformed and drawn to a width of 70px, a value such as "70%" or "0.7 times" will be set as the compression ratio. In CSS, the width compression ratio is specified as "transform: scaleX(width compression ratio);". The lower limit of the width compression ratio is defined in advance to prevent the character width of the text from being compressed too much and reducing readability.
[0037] The communication unit 190 communicates with external devices via a LAN (Local Area Network) or WAN (Wide Area Network). The communication unit 190 is composed of communication devices or modules, such as a NIC (Network Interface Card) used in wired / wireless LANs. Alternatively, the communication unit 190 may communicate with other devices via a telephone line. In this case, the communication unit 190 is composed of an interface (terminal) into which a cable for connecting to a telephone line can be inserted, and it transmits and receives images with other devices by performing facsimile communication using known standards and protocols such as G3 / G4 standards.
[0038] [1.2 Processing Flow] The processing flow performed by the image forming apparatus 10 of this embodiment will be described with reference to Figures 4 to 9. The processing shown in Figures 4 to 9 is executed by the control unit 100, which reads the program stored in the storage unit 160.
[0039] [1.2.1 Main Processing] Referring to Figure 4, the main processing performed by the image forming apparatus 10 will be described. The processing shown in Figure 4 is performed when the control unit 100 displays a screen on the display unit 140. In parallel with the main processing, the control unit 100 can read and execute the web browser application 162 and perform predetermined display processing on the display engine. Furthermore, in the following description, the object for which the display size is set will be assumed to be a text element.
[0040] First, the control unit 100 reads the screen information of the screen to be displayed from the screen information storage area 164 (step S100). The control unit 100 may also make the necessary settings for display on the read screen information. For example, since a web browser allows specifying the method for controlling line breaks in text (line break control attribute), the control unit 100 may set the line break control attribute for the text element. For example, the control unit 100 may set the white-space property of the CSS of a text element whose auto-shrink attribute value is "fixed single-line area" to "nowrap" in order to prevent line breaks.
[0041] Next, the control unit 100 selects one text element to be subject to automatic reduction processing based on the screen information it has read (step S102). For example, based on the screen information read in step S100, the control unit 100 selects a text element included in the screen to be displayed whose automatic reduction attribute value is specified as either "single-line fixed area" or "multi-line area". In the following description, the text element selected in step S102 will be referred to as the "target element".
[0042] Next, the control unit 100 sets the font size of the target element's text to the specified font size (step S104). For example, the control unit 100 sets the specified font size to the font-size property of the specified element. Alternatively, the control unit 100 may set the line height to the line-height property of the specified element. In this way, the control unit 100 reflects the settings specified by the content creator in the style information of the target element.
[0043] Next, the control unit 100 determines whether the target element is a fixed single-line area (whether the auto-shrink attribute of the target element is "fixed single-line area") (step S106). If the target element is a fixed single-line area, the control unit 100 executes the fixed single-line area processing, which is an auto-shrink process, on the target element (step S106; Yes → step S108). The fixed single-line area processing is a process that overwrites (updates) the style information of the target element from the original style information in order to display the text (a single line of text) of the target element in the display area. The fixed single-line area processing will be described later.
[0044] On the other hand, if the target element is a multi-line area, the control unit 100 performs a multi-line area processing, which is an automatic reduction process, on the target element (step S106; No → step S110). Multi-line area processing is a process that overwrites (updates) the style information of the target element from the original style information in order to display the text (multi-line string) of the target element in the display area. Multi-line area processing will be described later.
[0045] Next, the control unit 100 determines whether or not it has selected all the text elements to be automatically resized (step S112). If the control unit 100 has not selected all the elements to be automatically resized, it returns to step S102 (step S112; No → step S102).
[0046] In this way, the control unit 100 updates style information for the target element, such as font size, width compression ratio, and whether or not to display the text truncated (ellipsis display attribute), by performing automatic compression processing. For example, the control unit 100 sets the width compression ratio as the value of the scaling transformation property for the string (in CSS, this would be "transform: scaleX(width compression ratio);").
[0047] On the other hand, if the control unit 100 has selected all elements to be automatically scaled down, it executes a process (actual screen drawing process) to draw the screen based on the screen information read in step S100 onto the display unit 140 (step S112; Yes → step S114). Since the control unit 100 overwrites the style information of the text elements in steps S108 and S110, it can display a screen that reflects the overwritten style information. As a result, the control unit 100 can draw the target elements (objects) within the display area at the display size determined by the processing in steps S108 and S110.
[0048] In this way, if there are text elements that require automatic scaling, the control unit 100 performs the automatic scaling process for each of those elements. Then, the control unit 100 updates the style information of all text elements that require automatic scaling to a size (character size, width compression ratio) that fits within the display area of the text element, and then performs the actual screen rendering process. As a result, the control unit 100 can render the text so that it fits within the display area.
[0049] [1.2.2 Processing of a fixed area on one line] Referring to Figure 5, the flow of processing a fixed-line area will be explained. First, the control unit 100 compares the size of the target element (object) with the height of the display area (height size) by comparing the specified character size of the target element with the height of the display area (step S200) to determine whether or not the height exceeds the limit. Height exceeding means that when the text of the target element is placed, the height of the placed text becomes greater than the height of the display area. In step S200, the control unit 100 may also determine that the height exceeds the limit if the specified character size is greater than the height of the display area.
[0050] If the height exceeds the limit, the control unit 100 sets the font size of the target element to a font size corresponding to the height of the line area (the area where one line of text is displayed) specified for the target element (step S200; Yes → step S202). In this way, the control unit 100 changes (reduces) the font size of the target element's text to a font size that is approximately the same height as the display area. For example, the control unit 100 considers the line height as the font size of the target element and sets a font size that fits within the line area. Specifically, if the height of the line area is 30px and the line height is 1.2 times the font size, the control unit 100 sets the font size that fits within the line area to 30 / 1.2 = 25 (px). On the other hand, if the height does not exceed the limit, the control unit 100 omits the process in step S202 (step S200; No). In this case, the font size of the target element remains at the specified font size.
[0051] Next, the control unit 100 performs a preliminary drawing (step S204). Preliminary drawing means causing the display engine to actually perform the display processing (placement) of the text of the target element in a state that is not reflected on the screen. In other words, preliminary drawing is the process of temporarily placing the target element. For example, the control unit 100 sets the attribute to hide for the target element and then causes the display engine to place the text in the display area, thereby temporarily placing the text.
[0052] The control unit 100, for example, instructs the web browser, which is the display engine, to actually render the target element. At this time, the control unit 100 sets the CSS visibility property of the target element's text to "hidden". This makes it possible for the control unit 100 to obtain the display state of the target element without actually displaying the target element's text on the screen.
[0053] Furthermore, the temporary drawing only needs to acquire the display state of the target element. For this reason, the control unit 100 may place the text of the target element with the same color as the background color of the display area and acquire the display state of the text. Alternatively, the control unit 100 may place the text, erase the text after a short time (for example, one frame after the frame in which the text was placed), and acquire the display state at the time the text was placed. In this way, the control unit 100 can display the text in a display manner that is difficult for the user to see and acquire the display state of the text.
[0054] Next, the control unit 100 obtains the display result information of the text of the temporarily drawn target element, compares the size of the target element (object) with the size of the display area, and determines whether or not it is width overflow (step S206). For example, the control unit 100 obtains the height and width of the bounding rectangle area of the text placed by the browser as text display result information. This allows the control unit 100 to obtain the height and width of the area (bounding rectangle area) where the text is placed. Width overflow means that when text is placed, the width of the placed text becomes larger than the width of the display area. Here, the control unit 100 obtains the height and width of the area where the text is placed (drawn) as display result information. At this time, the control unit 100 compares the width of the area where the text is placed with the width of the display area, and determines that it is width overflow if the width of the area where the text is placed is larger than the width of the display area.
[0055] If the width does not exceed the limit, the control unit 100 terminates the fixed-line area processing because the text of the target element fits within the display area (step S206; No). In this case, the style information of the target element will have a character size of the specified character size or the character size set in step S202, and a width compression ratio of 100% (no width compression). Also, the text will be displayed without being truncated.
[0056] On the other hand, if the width exceeds the limit, the control unit 100 calculates the width compression ratio (step S206; Yes → step S208). For example, the control unit 100 calculates the width compression ratio by dividing the width of the display area by the width of the area where the text is placed (text width) (width of display area / text width). By dividing the width of the display area by the text width, the control unit 100 can set the width compression ratio of the text of the target element to a width compression ratio in which the text is displayed with approximately the same width as the width of the display area. Here, by executing the processes in steps S202 and S208, the control unit 100 can set the character size and width compression ratio so that any edge of the text (top or bottom edge or left or right edge) touches or is near the edge of the display area. In other words, the control unit 100 can calculate and set the display size (width compression ratio) that displays the largest possible size of text within the display area.
[0057] Next, the control unit 100 determines whether the width compression ratio calculated in step S208 falls below the lower limit of the width compression ratio (step S210). If the width compression ratio falls below the lower limit of the width compression ratio, the control unit 100 sets the ellipsis display attribute to "Display ON" and sets the lower limit of the width compression ratio as the width compression ratio value of the text of the target element (step S210; Yes → step S212 → step S214). In this case, the style information of the target element will be: font size will be the specified font size or the font size set in step S202, width compression ratio will be the lower limit of the width compression ratio, and ellipsis display attribute will be "Display ON". In this way, the control unit 100 determines the display size of the target element (object) so that it is included in the display area. Furthermore, by setting the width compression ratio to the lower limit of the width compression ratio, the control unit 100 uses characters whose shape has been changed so that the display width of the characters is reduced.
[0058] The ellipsis display attribute indicates whether or not to display the text by omitting part of it. In this embodiment, when the ellipsis display attribute is set to "Display ON," it indicates that the text will be displayed by omitting part of it, and in other cases (for example, when the ellipsis display attribute is set to "Display OFF" or unspecified), it indicates that the text will be displayed without omitting anything. In other words, a text element with the ellipsis display attribute set to "Display ON" is a text element that, when it is not possible to display all of the text in the display area, displays only a portion of the text in the display area and also displays an ellipsis (for example, "..."). For example, in step S212, the control unit 100 sets the ellipsis display attribute to "Display ON" by specifying "ellipsis" for the text-overflow CSS of the target element.
[0059] On the other hand, if the width compression ratio does not fall below the lower limit of the width compression ratio, the control unit 100 sets the width compression ratio calculated in step S208 as the width compression ratio value for the text of the target element (step S210; No → step S216). In this case, the style information of the target element will be the specified font size or the font size set in step S202 for the font size, and the width compression ratio will be the width compression ratio calculated in step S208. Also, the text will be displayed without being truncated. In this way, the control unit 100 determines the size in which the text is included within the display area by changing the size of the text (font size, width compression ratio). In this manner, the control unit 100 determines the display size of the target element (object) so that it is included within the display area. In addition, the control unit 100 uses characters whose shape has been changed so that the display width of the characters is reduced by setting the width compression ratio.
[0060] [1.2.3 Multi-line area processing] The processing of multi-line areas will be explained with reference to Figure 6. First, the control unit 100 prohibits line breaks in the middle of words (step S300). For example, the control unit 100 sets the line break control attribute of the target element to "prohibit line breaks in the middle of words". Setting "prohibit line breaks in the middle of words" is achieved, for example, by specifying "normal" for the overflow-wrap property of the target element's CSS. As a result, if the text of the target element contains words longer than the width of the display area, the text will be drawn over the display area in the preliminary rendering.
[0061] Next, the control unit 100 performs a preliminary drawing (step S302) and obtains the display result information of the target element's text. It then compares the size of the target element (object) with the size of the display area and determines whether or not it exceeds the area (step S304). Area overflow means that the height or width exceeds the area limit.
[0062] The control unit 100 compares the width of the area where the text is placed with the width of the display area, and determines that the width is exceeded if the width of the area where the text is placed is greater than the width of the display area. The control unit 100 also compares the height of the area where the text is placed with the height of the display area, and determines that the height is exceeded if the height of the area where the text is placed is greater than the height of the display area. In other words, the control unit 100 compares the size (height x width) of the text element, which is the object to be displayed, with the size (height x width) of the display area. At this time, the control unit 100 determines that the area is exceeded if at least one of the width or height is exceeded.
[0063] If the area is not overflowed, the control unit 100 terminates the multi-line area processing because the text of the target element fits within the display area (step S304; No). In this case, the style information of the target element will be the specified font size and a width compression ratio of 100% (no width compression). Also, the text will be displayed without being truncated.
[0064] On the other hand, if the area is overflowing, the control unit 100 determines whether or not a height overflow has occurred (step S304; Yes → step S306). If a height overflow has occurred, the control unit 100 allows line breaks in the middle of words, so that even if the text contains words longer than the width of the display area, those words will be wrapped based on the width of the display area, and the control unit 100 performs the height overflow processing (step S306; Yes → step S308 → step S310). For example, in step S308, the control unit 100 sets the line break control attribute of the target element to "allow line breaks in the middle of words". Setting "allow line breaks in the middle of words" is achieved, for example, by specifying "break-word" for the overflow-wrap property of the CSS of the target element. As a result, the text of the target element will not be positioned beyond the width of the display area. Furthermore, the height overflow processing is a process that determines the size of the text that fits within the display area by changing the size (font size, width compression ratio) of the text of the target element that is experiencing a height overflow. The height overflow processing will be described later.
[0065] On the other hand, if there is no height overrun, that is, if only the width overrun occurs, the control unit 100 calculates the width compression ratio (step S306; No → step S312). For example, the control unit 100 calculates the width compression ratio by dividing the width of the display area by the width of the area where the text is placed by temporary drawing.
[0066] Here, in step S300, line breaks in the middle of a word are prohibited, so if there is a word longer than the display area, the word will be displayed over the display area. On the other hand, the height of the text fits within the display area. Specifically, the control unit 100 determines whether the text can be displayed in the display area with width compression alone. That is, the control unit 100 determines whether the width compression ratio falls below the lower limit of the width compression ratio (step S314).
[0067] If the width compression ratio does not fall below the lower limit of the width compression ratio, the control unit 100 sets the width compression ratio of the target element to the width compression ratio calculated in step S312 (step S314; No → step S316). In this case, the style information of the target element will have the specified font size and the width compression ratio calculated in step S312. Also, the text will be displayed without being truncated. In this way, the control unit 100 uses characters whose shape has been changed so that the display width of the characters is reduced by setting the width compression ratio.
[0068] On the other hand, if the width compression ratio falls below the lower limit of the width compression ratio, the control unit 100 allows line breaks in the middle of words and performs a preliminary drawing again (step S314; Yes → step S318 → step S320). Furthermore, the control unit 100 obtains the display result information of the target element's text and determines whether or not it exceeds the area (step S322).
[0069] If the area is not overflowed, the control unit 100 terminates the multi-line area processing (step S322; No). In this case, the style information of the target element will have the specified font size and a width compression ratio of 100% (no width compression). Also, the text will be displayed without being truncated. On the other hand, if the area is overflowed, the control unit 100 performs height overflow processing (step S322; Yes → step S310).
[0070] In this way, if the height does not exceed the limit, the control unit 100 changes the size of the text (character size, width compression ratio) by performing width compression to determine the size in which the text is contained within the display area. Furthermore, by dividing the width of the display area by the text width, the control unit 100 ensures that one of the edges of the text (the top and bottom edges or the left and right edges) touches or is near the edge of the display area.
[0071] [1.2.4 Height Overload Handling] The height overload processing will be explained with reference to Figure 7. First, the control unit 100 reduces the font size of the target element by 1px (step S400) and performs a preliminary drawing (step S402). The control unit 100 then obtains the display result information of the target element's text again, compares the size of the target element (object) with the size of the display area, and determines whether or not the height exceeds the limit (step S404).
[0072] The control unit 100 performs width compression processing if the height does not exceed the limit (step S404; No → step S406). The width compression processing will be described later. If the height does not exceed the limit, the text of the target element can be displayed without being truncated by the font size set for the target element (hereinafter referred to as "Fit font size (fsFit)"). Also, when the text is displayed using the Fit font size, the edges of the text will be touching the edges of the display area or near the edges of the display area.
[0073] On the other hand, if the height exceeds the limit, the control unit 100 determines whether the character size of the target element is equal to the lower limit of the configurable character size (step S404; Yes → step S408). The lower limit of the configurable character size is the specified lower limit character size of the target element (fsSpecifiedReduceMin) (if no specified lower limit character size is specified for the target element, it is the system minimum character size (fsSystemReduceMin)).
[0074] If the character size of the target element is not equal to the lower limit of the configurable character size, the control unit 100 returns to step S400 (step S408; No → step S400). In this way, if the height exceeds the limit, the control unit 100 repeats the process of reducing the character size by 1px at a time and performing a temporary drawing until the height no longer exceeds the limit or the character size reaches the lower limit of the configurable character size. In this way, the control unit 100 determines the display size of the target element (text) contained within the display area by changing (reducing) the character size of the target element.
[0075] On the other hand, if the font size of the target element is equal to the lower limit of the configurable font size, it indicates that the text will not fit within the display area even at the minimum configurable size. At this point, the font size of the target element is at the specified lower limit font size. Therefore, the control unit 100 sets the font size of the target element to the specified lower limit font size and then determines whether to display the text as abbreviated text or to display the text by compressing its width to fit within the display area. Specifically, the control unit 100 determines whether the font size of the target element is below the minimum width-compressible font size (fsCondensedMin) (step S408; Yes → step S410).
[0076] If the character size of the target element falls below the minimum character size for width compression (fsCondensedMin), the control unit 100 determines that width compression cannot be applied to the text of the target element, sets the ellipsis display attribute to "Display ON", and terminates the height overflow processing (step S410; Yes → step S412). In other words, even if the size of the text is changed, the control unit 100 determines that the target element (object) cannot be included within the display area, and therefore omits part of the target element to render the string. In this case, the style information of the target element will have the character size set to the specified lower limit character size, the width compression rate to 100% (no width compression), and the ellipsis display attribute set to "Display ON".
[0077] On the other hand, if the character size of the target element is greater than or equal to the minimum character size for which width compression is possible (fsCondensedMin), the control unit 100 attempts to compress the width of the target element at the current character size (specified lower limit character size), since width compression is possible at that character size. Therefore, the control unit 100 performs width compression processing for height overload (step S414). The width compression processing for height overload will be described later.
[0078] [1.2.5 Width Compression Processing] The width compression process will be explained with reference to Figure 8. The width compression process involves executing a width compression determination process and setting appropriate style information.
[0079] The width compression determination process determines, based on the Fit Font Size (fsFit), whether the text of the target element can potentially fit within the display area through width compression while maintaining the specified font size. Reducing the font size set for the target element resolves the height overflow issue. The reason the height overflow issue is resolved is that either (A), (B), or both of the following cases are met. (A) Because the height of each line was reduced, and the height of the area where the text is placed now fits within the height of the display area. (B) Because reducing the font size decreases the character width, which increases the number of characters that can be displayed on one line. As a result, the number of lines required to display the text decreases, and the height of the area where the text is placed fits within the height of the display area.
[0080] Of these, if the reason the height overflow was resolved is (B), then the number of lines can be reduced by decreasing the character width, and there is no need to reduce the character height (character size) itself. Therefore, the control unit 100 determines whether or not case (B) applies (width compression determination process). The width compression determination process corresponds to the processes from step S504 to step S510 described later. Furthermore, if case (B) applies, the control unit 100 sets an appropriate width compression ratio for the target element and sets the character size of the target element to the specified character size.
[0081] First, the control unit 100 calculates the width compression ratio from the fit character size (step S500). For example, the control unit 100 calculates the width compression ratio by dividing the fit character size (fsFit) by the specified character size (fsOriginal). The calculated width compression ratio is called the theoretical width compression value (calcedCondensed).
[0082] Next, the control unit 100 determines whether the theoretical width compression value (calcedCondensed) is below the lower limit of the width compression ratio (fsCondensedRatioMin) (calcedCondensed < fsCondensedRatioMin) (step S502). If the theoretical width compression value is below the lower limit of the width compression ratio, the control unit 100 does not perform width compression, specifies the fit font size (fsFit) as the font size of the target element, and terminates the width compression determination process (step S502; Yes). In this case, the style information of the target element will have the fit font size as the font size and a width compression ratio of 100% (no width compression). Also, the text will be displayed without being truncated.
[0083] On the other hand, if the theoretical width compression value does not fall below the lower limit of the width compression ratio (step S502; No), the control unit 100 determines whether the text will fit within the display area after width compression (width compression determination process). The control unit 100 returns the character size of the target element to the specified character size (step S504). The control unit 100 also expands the width of the display area (step S506).
[0084] Here, width compression of the target element is achieved by image deformation processing in the X direction relative to the normal display state of the target element. Therefore, the control unit 100 instructs the display engine (web browser) to perform line break processing in the state before width compression, and then performs width compression deformation on the processed result to achieve width compression. The line break positions after width compression appear in the temporarily drawn text by expanding the display area and performing temporary drawing. In other words, the control unit 100 temporarily expands the width of the display area to a width obtained by multiplying the width of the display area by the reciprocal of the theoretical width compression value (1 / calcedCondensed), and then performs temporary drawing of the text in the display area with the specified character size. This allows the control unit 100 to perform temporary drawing of the text based on the line break positions and number of lines after width compression. Therefore, in step S506, the control unit 100 expands the width of the display area of the target element's text to a width obtained by multiplying the width of the display area by the reciprocal of the theoretical width compression value. Furthermore, the control unit 100 performs preliminary drawing of text on the display area with expanded area width (step S508).
[0085] Next, the control unit 100 acquires display result information, compares the size of the target element (object) with the size of the display area, and determines whether or not it exceeds the area (step S510). If it does not exceed the area, the control unit 100 sets the width compression ratio of the target element to the width compression ratio (theoretical width compression value) calculated in step S500, since the text of the target element fits within the display area (step S510; No → step S512). In this case, the style information of the target element will have the specified font size for the font size and the theoretical width compression ratio for the width compression ratio. Also, the text will be displayed without being truncated. In other words, the text of the target element will have the specified font size set as the font size, and the width compression ratio (theoretical width compression value) will be set to fit within the display area.
[0086] Thus, the control unit 100 performs width compression if, through the width compression determination process, it determines that multi-line text (multi-line string) that is permitted to be displayed on multiple lines can fit within the display area by reducing the specified character size (specified character size). Here, the control unit 100 sets the width compression ratio as the ratio of the specified character size to the reduced character size (fit character size), which is the width compression ratio (theoretical width compression value) for the specified character size. At this time, if the text can be displayed within the display area according to the theoretical width compression value, the control unit 100 can determine the size of the text (width compression ratio) so that the text fits within the display area while maintaining the specified character size.
[0087] On the other hand, if the area is exceeded, the control unit 100 does not perform width compression because the text of the target element would not fit within the display area if width compression is applied. Instead, it sets the fit font size as the font size of the text of the target element (step S510; Yes → step S514). In this case, the style information of the target element will have a font size of fit font size and a width compression rate of 100% (no width compression). Also, the text will be displayed without being truncated.
[0088] [1.2.6 Width compression processing for height exceeding limits] The width compression process for height overflows will be explained with reference to Figure 9. The width compression process for height overflows is a process that determines the width compression ratio by sequentially setting three pre-set width compression ratios (85%, 75%, and 65%) to the target element and determining whether or not it fits within the display area. The determination of whether or not it fits with width compression uses the same method as the width compression determination process explained in Figure 8. That is, the control unit 100 temporarily sets the width of the display area to a value obtained by the reciprocal of the theoretical width compression value and performs a preliminary drawing, and determines whether or not it fits with width compression based on whether or not the text of the target element overflows the area.
[0089] First, the control unit 100 expands the width of the display area to a width corresponding to a width compression ratio of 85% and performs a preliminary drawing (step S600 → step S602). The control unit 100 compares the size of the target element (object) with the size of the display area to determine whether or not the height exceeds the limit (step S604). If the height does not exceed the limit, the control unit 100 sets the width compression ratio of the target element to 85% (step S604; No → step S622). In this case, the style information of the target element will have a font size of the specified lower limit font size and a width compression ratio of 85%. Also, the text will be displayed without being truncated.
[0090] If the height exceeds the limit, the control unit 100 expands the width of the display area to a width equivalent to a width compression ratio of 75% (step S604; Yes → step S606), performs a preliminary drawing (step S608), and determines whether or not the height exceeds the limit (step S610). If the height does not exceed the limit, the control unit 100 sets the width compression ratio of the target element to 75% (step S610; No → step S622). In this case, the style information of the target element will have a font size of the specified lower limit font size and a width compression ratio of 75%. Also, the text will be displayed without being truncated.
[0091] If the height exceeds the limit, the control unit 100 expands the width of the display area to a width corresponding to a width compression ratio of 65% (step S610; Yes → step S612), performs a preliminary drawing (step S614), and determines whether or not the height exceeds the limit (step S616). If the height does not exceed the limit, the control unit 100 sets the width compression ratio of the target element to 65% (step S616; No → step S622). In this case, the style information of the target element will have a font size of the specified lower limit font size and a width compression ratio of 65%. Also, the text will be displayed without being truncated.
[0092] If the height exceeds the limit, the control unit 100 sets the width compression ratio of the target element to the lower limit value of the compression ratio (65% in Figure 9) (step S616; Yes → step S618). The control unit 100 also sets the ellipsis display attribute of the target element to "Display ON" (step S620). In this case, the style information of the target element will have a font size of the specified lower limit font size and a width compression ratio of 65%. The text will also be displayed in an abbreviated form.
[0093] [1.3 Example of Operation] An example of operation of this embodiment will be described with reference to the diagram. In this example, the settings for the text elements are as follows. Font: Noto Sans • System minimum font size: 12px • Minimum specified font size: If not specified, it is the same as the system's minimum font size, 12px. • Lower limit of width compression: 65% • Minimum font size that can be compressed width-wise: 15px • Display area (fixed 1-line area): Width 100px, Height 30px • Display area (multi-line area): Width 100px, Height 48px • Line height: 1.2 times the specified font size • Line break control: Line breaks occur at word boundaries (whitespace). Words exceeding the display area are forcibly broken into lines character by character. Figures 10 to 13 show examples of operation for text elements with an auto-shrink attribute set to a single-line fixed area, while Figures 14 to 22 show examples of operation for text elements with an auto-shrink attribute set to a multi-line area. In Figures 10 to 22, the rectangular areas shown by solid lines represent the display area.
[0094] Figure 10 shows an example of the behavior when the height exceeds the limit, but the width does not exceed the limit in the temporary rendering after setting the font size. The text element shown in Figure 10 has the text "Abcdefg" and a specified font size of 30px.
[0095] Figure 10(a) shows an example of what happens when text is drawn in the display area with a specified font size. As shown in Figure 10(a), when text is displayed with a specified font size, the height of the text is greater than the height of the display area, resulting in a height overflow.
[0096] In this case, the font size of the text element is overwritten (changed) to 25px (=30px / 1.2), which is the font size corresponding to the height of the display area. Figure 10(b) shows the text temporarily drawn with the changed font size. The text is drawn to fit within the display area. Based on this temporary drawing result, attributes such as a font size of 25px and a width compression ratio of 100% (no width compression) are set for the text element. Figure 10(c) shows the text that is finally displayed on the screen after the actual screen rendering process is executed (hereinafter referred to as "final display"). As shown in Figure 10(c), the text is displayed to fit within the display area. Also, the text is not truncated.
[0097] Figure 11 shows an example of operation when width overload does not occur. The text element shown in Figure 11 has the text "Abc def" and a specified font size of 25px.
[0098] Figure 11(a) shows the text as it is temporarily drawn in the display area. As shown in Figure 11(a), the text does not extend beyond the width of the display area (it is not width-overflowing), so width compression is not necessary for the text. Based on this temporary drawing result, attributes such as a font size of 25px and a width compression ratio of 100% (no width compression) are set for the text element. Figure 11(b) shows the final display. As shown in Figure 11(b), the text is displayed as is with the specified font size.
[0099] Figure 12 shows an example of how the text behaves when the width exceeds the limit. The text element shown in Figure 12 has the text "Abc def ghi" and a specified font size of 25px.
[0100] Figure 12(a) shows text temporarily drawn in the display area. Here, the text width is 132px, which is larger than the width of the display area, 100px, resulting in a width overflow. In this case, the width compression ratio is calculated as 0.75 (75%), which is the value obtained by dividing the width of the display area (100px) by the text width (132px).
[0101] Based on this preliminary rendering, attributes such as a font size of 25px and a width compression ratio of 75% are set for the text element. Figure 12(b) shows the final display. As shown in Figure 12(b), the text is displayed in the display area with a width compression ratio of 75% so that it has the original area width (100px). Also, the text is not truncated.
[0102] Figure 13 shows another example of behavior when the width exceeds the limit. The text element shown in Figure 13 has the text "Abc def ghi jklm" and a specified font size of 25px.
[0103] Figure 13(a) shows text temporarily drawn in the display area. Here, the text width is 188px, which is larger than the width of the display area, 100px, resulting in a width overflow. In this case, the width compression ratio is calculated as 0.53 (53%), which is the value obtained by dividing the width of the display area (100px) by the text width (188px).
[0104] The calculated width compression ratio of 53% is below the lower limit of 65%. Therefore, the lower limit of 65% is used as the width compression ratio for text elements. Based on this preliminary rendering result, the text element is assigned attributes such as a font size of 25px, a width compression ratio of 65%, and the ellipsis display attribute to "Display ON".
[0105] Note that even if the ellipsis display attribute is set to "Show ON" and the CSS text-overflow property of the target element is set to "ellipsis," the ellipsis display may not be performed correctly. For example, a web browser may not support the function of displaying ellipsis for multi-line text. Therefore, if the ellipsis display attribute is set to "Show ON," the image forming apparatus 10 may process the text to be displayed by removing the last character of the display area by the width required to display the ellipsis (for example, "...") and replacing it with the ellipsis, and then display the processed text.
[0106] In this example, the lower limit of the width compression ratio is 0.65 (the reciprocal is 1.53). Therefore, as shown in Figure 13(b), the width of the display area is expanded to 153px (100px * 1.53). The image forming apparatus 10 also obtains the maximum length of text (part of the text) that can be displayed together with ellipses by temporarily drawing text in the expanded display area, and determines the text to be displayed. For example, the image forming apparatus 10 decides to display the text "Abc def ghi...".
[0107] Figure 13(c) shows the final display. As shown in Figure 13(c), the text is abbreviated with ellipsis symbols to fit within the original display area.
[0108] Figure 14 shows an example of operation when no area overflow occurs. The text element shown in Figure 14 has the text "ABC DEF GHI" and a specified font size of 18px.
[0109] Figure 14(a) shows the result of a temporary rendering when text is temporarily drawn in the display area with the specified font size. The text does not extend beyond the display area (not overflowing). Based on this temporary rendering result, attributes such as a font size of 18px (the specified font size) and a width compression ratio of 100% (no width compression) are set for the text element. Figure 14(b) shows the final display. As shown in Figure 14(b), the text is displayed within the display area.
[0110] Figure 15 shows an example of how text works when there is a word wider than the width of the display area, and width compression is used to fit the text within the display area. The text element shown in Figure 15 has the text "ABCDEFGHIJKL MNO" and a specified font size of 18px.
[0111] Figure 15(a) shows the text (temporary rendering result) temporarily drawn in the display area. As shown in Figure 15(a), the text contains words longer than the width of the display area, and the temporary rendering result exceeds the width. Here, we assume that the width of the area where the text is placed is 126px, which is greater than the width of the display area, 100px. In this case, the theoretical value of width compression is calculated to be 0.79 (79%), which is the value obtained by dividing the width of the display area, 100px, by the text width, 126px.
[0112] Based on this preliminary rendering result, attributes such as a font size of 18px and a width compression ratio of the theoretical width compression value (79%) are set for the text element. Figure 15(b) shows the final display. As shown in Figure 15(b), the text is displayed with a width compression ratio of 79%, fitting within the display area.
[0113] Generally, if line breaks in the middle of a word are permitted, long words in the text may be displayed with line breaks, as shown in Figure 15(c). However, considering readability, Figure 15(b), where the words are not split, is clearly preferable. The image forming apparatus 10 of this embodiment can achieve the display shown in Figure 15(b) by setting the line break control attribute of the text to "prohibit line breaks in the middle of a word".
[0114] Figure 16 shows an example of how the text works when there is a word wider than the width of the display area, and the text does not fit within the display area due to width compression, but the text can be made to fit within the display area by forcing a line break for the word. The text element shown in Figure 16 has the text "ABCDEFGHIJKLMNO" and a specified font size of 18px.
[0115] Figure 16(a) shows the result of a preliminary rendering with the specified font size. As shown in Figure 16(a), the text contains words longer than the width of the display area, and the preliminary rendering result exceeds the width. If the width of the area where the text is placed, obtained based on the preliminary rendering result, is 171px, which is greater than the width of the display area of 100px, then the theoretical value of width compression is 0.58 (=100 / 171). 0.58 is below the lower limit of the width compression ratio (65%). In this case, no width compression is performed.
[0116] In this case, a preliminary drawing is performed again, allowing line breaks in the middle of words. Figure 16(b) shows the result of the preliminary drawing. As shown in Figure 16(b), both the height and width of the area where the text is placed fit within the display area. Therefore, the display shown in Figure 16(b) is the final display.
[0117] Figure 16(c) shows an example of text displayed when width compression is applied to prioritize avoiding line breaks in the middle of words. For example, in cases where it is necessary to clearly display each character of a long string such as a telephone number, email address, or URL (Uniform Resource Locator), the display shown in Figure 16(b) is clearly preferable to the display shown in Figure 16(c). In this embodiment, the display shown in Figure 16(b) is achieved by allowing line breaks in the text and rendering the text at a specified character size.
[0118] Figure 17 shows an example of how the text behaves when a word wider than the width of the display area causes a height overflow when the word is forced to wrap to the next line. The text element shown in Figure 17 has the text "ABCDEFGHIJKLMNO PQRS" and a specified font size of 18px.
[0119] Figure 17(a) shows a preliminary rendering result, which exceeds the width limit. In such cases, a width compression ratio is calculated, and it is determined whether or not width compression is possible. Here, assuming that the width of the text area obtained based on the preliminary rendering result is 171px, which is greater than the width of the display area of 100px, the theoretical value for width compression is 0.58 (=100 / 171). Since 0.58 is below the lower limit of the width compression ratio (65%), no width compression is performed.
[0120] Figure 17(b) shows the result of a preliminary rendering at a specified font size with line breaks allowed in the middle of words. As shown in Figure 17(b), the text is displayed on three lines and exceeds the height. In this case, the font size of the text is reduced by 1px and preliminary rendering is performed. This process is repeated, reducing the font size of the text from 17 to 16 to 15px. Now, as shown in Figure 17(c), let's assume that the text fits within the display area when the font size is 15px. In this case, the fit font size is 15px. The compression ratio based on the fit font size is 0.83 (=15 / 18).
[0121] Next, it is determined whether the text will fit within the display area after width compression. Figure 17(d) shows the display area when its width is expanded to 120px, which is the width of the display area (100px) multiplied by the reciprocal of the theoretical width compression value (1.20), and text of the specified font size is temporarily drawn within the expanded display area. As a result of the temporary drawing, the text fits within the display area, so the expanded display area is rendered with a width compression ratio of 83% so that its width becomes the original width (100px). Figure 17(e) shows the final display.
[0122] Figure 18 shows an example of how, when height overflow occurs and width compression is performed, the text can be fitted to the display area by replacing the font size reduction ratio with the width compression ratio. The text element shown in Figure 18 has the text "ABCD EFGHIJK LMNO" and a specified font size of 18px.
[0123] Figure 18(a) shows the result of a preliminary rendering with the specified font size. As shown in Figure 18(a), when preliminary rendering is performed with the specified font size, the height exceeds the limit. In this case, the font size of the text is reduced by 1px, and the preliminary rendering is performed. This process is repeated, and the font size of the text is reduced from 17 → 16 → 15 → 14px. Now, as shown in Figure 18(b), let's assume that the text fits within the display area when the font size is 14px. In this case, the fit font size is 14px. The compression ratio based on the fit font size is 0.78 (=14 / 18). Note that reducing the font size to fit within the display area and using that font size as the font size when displaying the text has been done in the past, and when using the past technology, the display will look like the one shown in Figure 18(b).
[0124] Next, a compression ratio based on the fit font size is calculated. The compression ratio is 0.778 (=14 / 18). Then, the font size is returned to the original 18px, and a preliminary rendering is performed using the calculated compression ratio of 0.78 as the width compression ratio. Specifically, in order to make the width of the display area less than or equal to the original width after width compression, the width of the display area is temporarily set to a value that is the reciprocal of the compression ratio (1 / 0.778, 1.29 times), and a preliminary rendering is performed. Figure 18(c) shows the result of the preliminary rendering. As shown in Figure 18(c), the text is displayed to fit within the display area.
[0125] In this case, a width compression ratio is additionally set for the text element to display it at its original width. For example, a CSS setting such as "transform: scaleX(0.778);" is added to the target element. Figure 18(d) shows the final display. Compared to Figure 18(b), which shows the conventional method, Figure 18(d) displays the text in larger letters.
[0126] Figure 19 shows an example of how text can be fitted to the display area by reducing the font size. The text element shown in Figure 19 has the text "ABC DEF GHI JKLMNOP QRSTU VWXYZ12", a specified font size of 20px, and a specified minimum font size of 12px.
[0127] Figure 19(a) shows the result of a preliminary drawing with the specified font size. As shown in Figure 19, the preliminary drawing result exceeds the height limit. Figure 19(b) shows the preliminary drawing result during the process of redrawing while reducing the font size by 1px at a time, and is the result when the font size is 13px. Even with a font size of 13px, the height limit is still exceeded.
[0128] Figure 19(c) shows a preliminary rendering result when the font size is 12px. In this case, the text fits within the display area. Therefore, the fit font size is 12px. The width compression ratio calculated from the fit font size is 0.60 (=12 / 20). Since a width compression ratio of 0.60 is below the lower limit of width compression ratio of 0.65, it is impossible to replace the text by width compression processing. In this case, the text is not width compressed, and the display shown in Figure 19(c) is the final display.
[0129] Figure 20 shows an example of behavior when text cannot be fitted to the display area even after reducing the font size or compressing the width. The text element shown in Figure 20 has the text "ABC DEF GHI JKLMNOP QRSTU VWXYZ12 3456 7890" and a specified font size of 16px.
[0130] Figure 20(a) shows the result of a preliminary drawing with the specified font size. As shown in Figure 20(a), the preliminary drawing result exceeds the height limit. Figure 20(b) shows the result of a preliminary drawing when the font size is reduced to the system's minimum font size (12px). As shown in Figure 20(b), the height limit is exceeded. Therefore, the system's minimum font size (12px) is used as the font size for the text.
[0131] Furthermore, since the font size is below the minimum width compression limit (15px), no width compression is performed. Therefore, the width compression rate for the text is 100% (no width compression). Because the text does not fit within the display area, the ellipsis display attribute for the text is set to "Display ON". Figure 20(c) shows the final display. The text is displayed at the system's minimum font size (12px) without width compression. Also, the text is displayed in a truncated form.
[0132] Figure 21 shows an example of how text can fit within the display area when the specified minimum font size is not sufficient, but can be made to fit through width compression. The text element shown in Figure 21 has the text "ABC DEF GHI JKLMNOP QRSTU", with a specified font size of 20px and a specified minimum font size of 15px.
[0133] Figure 21(a) shows the preliminary rendering result of the text at the specified font size. As shown in Figure 21(a), the preliminary rendering result exceeds the height limit. Figure 21(b) shows the preliminary rendering result when the font size is reduced to the specified minimum font size (15px). As shown in Figure 21(b), the height limit is exceeded. Therefore, the specified minimum font size (15px) is used as the font size for the text.
[0134] Next, the width compression ratio is determined. Figure 21(c) shows the result of a preliminary drawing when the width of the display area is expanded to a width equivalent to a width compression ratio of 85% (1.17 times). As shown in Figure 21(c), the area is overflowing. Figure 21(d) shows the result of a preliminary drawing when the width of the display area is expanded to a width equivalent to a width compression ratio of 75% (1.33 times). As shown in Figure 21(d), the area is not overflowing. Therefore, 75% is adopted as the width compression ratio. Figure 21(e) shows the final display when a width compression ratio for displaying the text element at its original width is additionally set.
[0135] Figure 22 shows an example of how text behaves when it cannot fit within the display area due to the specified minimum character size and width compression, resulting in text being truncated. The text element shown in Figure 22 has the text "ABC DEF GHI JKLMNOP QRSTU VWXYZ", with a specified character size of 20px and a specified minimum character size of 15px.
[0136] Figure 22(a) shows the preliminary rendering result with the specified font size, which exceeds the height limit. Figure 22(b) shows the preliminary rendering result when the font size is reduced to the specified minimum font size (15px), which also exceeds the height limit. Therefore, the specified minimum font size (15px) is used as the font size for the text.
[0137] Next, the width compression ratio is determined. Here, the width of the display area is expanded to a width equivalent to a width compression ratio of 85% (1.17 times), and a preliminary drawing is performed, resulting in an area overflow. Similarly, area overflows occur when the width compression ratio is 75% and 65%. Figure 22(c) shows the preliminary drawing result when the width of the display area is expanded to a width equivalent to a width compression ratio of 65% (1.53 times), and an area overflow occurs. In this case, the ellipsis display attribute is set to "Display ON", and a width compression ratio of 65% is adopted. Also, the text is displayed in a truncated form. Here, the text displayed with the ellipsis is "ABC DEF GHI JKLMNOP QRSTU V..." as shown in Figure 22(d). Figure 22(e) shows the final display when a width compression ratio for displaying the target element at its original width is additionally set.
[0138] Next, the operation screens for the copy function of the image forming apparatus 10 are shown. Figure 23(a) shows the operation screen W100 with text displayed in English, and Figure 23(b) shows the operation screen W110 with text displayed in Greek.
[0139] Area E100 in Figure 23(a) is the area where a multi-line text element is displayed. Here, the specified font size of the text element is 32px, and the display area height is 60px. In this case, if the text is drawn with the specified font size, it will be two lines due to word wrap (when tentatively drawn, "Punch" will word wrap to the next line), but since the area height is 60px, displaying the text with the specified font size of 32px will result in a height overflow. For this text element, the height overflow processing determines that it can be displayed at 29px (i.e., fit font size = 29px). Furthermore, the width compression processing calculates a theoretical width compression value (width compression ratio) of 0.90 (=29 / 32), and it is determined that the text can be displayed in the display area with width compression while maintaining the specified font size. Therefore, width compression is performed on this text element, and the font size remains the specified font size of 32px, but a width compression ratio of 90% is applied, and it is displayed on one line.
[0140] Area E110 in Figure 23(b) is the area where a text element in a fixed-line area is displayed, with a specified font size of 32px. In this case, when text is placed with the specified font size, the text will exceed the width of the display area, but a width compression ratio of 75% is applied due to the fixed-line area processing.
[0141] Area E112 in Figure 23(b) is the area where a multi-line text element is displayed. The specified font size is 32px, and the display area height is 60px. When text is drawn with the specified font size, it will be two lines due to word wrap, but since the area height is 60px, the specified font size of 32px will exceed the height limit. For this text element, the height overflow processing determines that the font size will be 25px to fit. Furthermore, the width compression processing determines that the text cannot be displayed in the display area at the specified font size, so as a result, the text size is automatically changed to 25px and displayed on two lines without width compression.
[0142] Area E114 in Figure 23(b) is the area where a multi-line text element is displayed. The specified font size is 18px. When text is drawn with the specified font size, no height overflow occurs, only width overflow occurs. The width compression ratio calculated from the width of the area where the text is placed and the width of the display area is 79%. Therefore, the text is displayed with a width compression ratio of 79% applied.
[0143] Thus, the image forming apparatus 10 of this embodiment can display various texts with optimal character representation without having to determine the final display size for each text. Furthermore, even if it is possible to switch between text resources for the displayed text, such as between English and Greek, the image forming apparatus 10 of this embodiment can display the text of each language in the optimal shape using the same display processing, regardless of the language.
[0144] Furthermore, the following modifications may be made to the above-described process. For example, the minimum font size, such as the specified minimum font size or the system minimum font size, may be automatically switched depending on factors such as screen resolution, viewing distance, ambient brightness, and screen contrast. This is because the readability of the text changes depending on these factors.
[0145] Furthermore, in step S400 of the height overload processing shown in Figure 7, the character size was explained as being reduced by 1px at a time, but using 1px as the unit of reduction (control unit) is just one example. The control unit could be 2px, or it doesn't have to be an integer value. Also, the unit can be arbitrarily selected as long as it can be used as a unit to specify the size, such as pt (points) or a percentage from the base size. In addition, the character size does not always have to change by a fixed amount. For example, the control could be set to reduce the size by 2px if the character size is 20px or more, and by 1px if the character size is less than 20px, thus changing the amount of change as appropriate.
[0146] Furthermore, the processing may be switched depending on the language being displayed. For example, the minimum width compression ratio may be changed for each language (font). Generally, kanji characters have many lines and are complex, so when stretched, their readability tends to decrease compared to English letters. Therefore, the minimum width compression ratio may be individually defined for each display language or display font, such as setting the minimum width compression ratio to 75% for Japanese and 65% for English.
[0147] Furthermore, the lower limit threshold for width compression for each font size may be adjustable. Since the readability of complex characters decreases with smaller font sizes, it may not be desirable to apply the same width compression to small font sizes as to large font sizes. In such cases, the lower limit of the width compression ratio may be changed according to the font size.
[0148] Furthermore, while the above-described embodiment states that width compression is achieved by character image deformation processing, variable fonts or condensed fonts may also be used. For example, width compression can be easily and beautifully achieved by applying the calculated width compression ratio as a parameter for the character width of a variable font. Also, if a condensed font is available for the font to be displayed and can be used by the display system, the system may control the font specification to switch to a condensed font corresponding to the calculated width compression ratio for display. If an environment is available where condensed fonts with multiple compression levels can be used, even more beautiful character representation becomes possible.
[0149] Furthermore, the system's minimum font size and other settings (thresholds) may be configured to allow switching between multiple patterns depending on the size and resolution of the display unit 140, and the type and purpose of the screen being displayed. Alternatively, these settings may always be specified by the content provider.
[0150] Furthermore, in the above explanation, when determining whether or not the display area is overflowing in the width compression ratio processing and the width compression processing for height overflow, it was explained that the width of the display area is expanded. However, it is also possible to determine whether or not the display area is overflowing using characters with a changed character shape in relation to the width compression ratio. In this case, the control unit 100 can determine that if the characters with a changed character shape fit within the display area, it is not an overflow, and if the characters with a changed character shape do not fit within the display area, it is an overflow. As a result, the control unit 100 can determine the width compression ratio based on the characters with a changed character shape.
[0151] Furthermore, although it was explained that the attribute value of the auto-reduction attribute is set for each text element, if all text elements are content that can be subjected to the same auto-reduction process, it is not necessary to specify the auto-reduction attribute. In this case, the method of auto-reduction processing to be performed on the text elements is predetermined, and the control unit 100 executes the auto-reduction processing based on that method.
[0152] Furthermore, the width compression ratio lower limit may be set for each element. Also, the specified lower limit font size may be specified as a ratio to the specified font size (e.g., 50%) rather than as a specific value. Additionally, the specified lower limit font size may be merged into the system minimum font size. In this case, the specified lower limit font size is not specified for each text element, and the lower limit of the font size for all text elements becomes the system minimum font size.
[0153] Furthermore, in the width compression ratio processing for height overload shown in Figure 9, three fixed values are used for the trial width compression ratio, but the trial stages and the rate of change can be determined arbitrarily. Also, different types of width compression ratios may be used for each font size of the target element. In addition, the trial width compression ratio may be determined as a ratio to the font size, or it may change in a fixed unit. Furthermore, in the explanation above, the minimum value of the selected width compression ratio was set to 65%, the same as the lower limit of the width compression ratio, but a different value may be adopted.
[0154] Furthermore, although the above-described embodiment explained that the display system is a general-purpose web browser engine that displays content written in HTML / CSS, the display system is not limited to a web browser. The display engine is a rendering system that performs text layout and can perform the actual text display processing without being reflected on the screen, and can obtain the result of said display processing.
[0155] Furthermore, in this embodiment, the image forming apparatus 10 is described as a display device, and the control unit 100 sets the size of the text to be displayed on the display unit 140. However, the display device of this embodiment may be realized by a device other than the image forming apparatus 10. For example, the above-described display device may be realized by an image reading device such as a scanner, or by an automated teller machine or machine tool. In other words, the above-described display device can be realized in a device equipped with a display unit. In addition, the above-described display device may be realized by a device incorporating the processing program and libraries described in Figures 4 to 9.
[0156] As described above, the image forming apparatus of this embodiment can determine the parameters (style information) for text display based on the display results of the display engine. Therefore, content creators of the image forming apparatus of this embodiment do not need to define optimal settings for each display element in advance, and can display text appropriately even if the behavior of the display engine changes due to functional improvements or malfunctions, without having to be aware of differences between display engines. In addition, content creators can appropriately display dynamic text that cannot be determined in advance, and text in content expressions where the layout changes according to the screen size, such as responsive design. In other words, content creators can have easy-to-read text displayed automatically on the image forming apparatus without having to specify the font size to prevent overflow by being aware of the display area size and the number of characters to display for each display element in advance.
[0157] Furthermore, in displaying text, the image forming apparatus of this embodiment not only selects a character size that fits within the display area, but also compresses the width of the characters to the size that eliminates the height overflow issue. As a result, when displaying text or numbers in a predetermined area, the image forming apparatus can improve readability by displaying as many characters as possible in the largest possible character size within the given display area. Moreover, the image forming apparatus can always automatically display text at an appropriate size regardless of whether the text content changes, the display area size changes, or the language is different.
[0158] Furthermore, since the image forming apparatus of this embodiment determines the parameters (style information) for text display based on the display results of the display engine, it can handle any language with the same processing. Therefore, when translating and replacing text to realize a multilingual UI (User Interface), the image forming apparatus can automatically adjust the display method of the text so that it does not overflow the display area, without strictly managing the number of characters (display width of the string), making language expansion easier.
[0159] [2. Second Embodiment] Next, a second embodiment will be described. The second embodiment is an embodiment in which, in the width compression process of the first embodiment, when the text does not fit with width compression when the text character size is set to a specified character size, the text character size is reduced and width compression is performed.
[0160] In the width compression process of the first embodiment, the width compression determination process (steps S504 to S510 in Figure 8) returns the font size of the target element to the specified font size, performs a preliminary drawing, and determines whether or not it exceeds the area. If it exceeds the area, the font size of the target element is set to the fit font size. However, even if it exceeds the area, slightly reducing the font size of the target area may allow the text to fit within the display area through width compression.
[0161] Therefore, in this embodiment, when the control unit 100 determines in step S510 that the area has been exceeded (step S510; Yes), it executes the following process. (1) Reduce the font size by one step (for example, 1px increments), set the width compression ratio to the lower limit of the width compression ratio, and perform a preliminary rendering. (2) Repeat (1) until the area is no longer exceeded. (3) The font size of the target element shall be set to the font size at which it no longer exceeds the area, and the width compression ratio of the target element shall be set to the lower limit of the width compression ratio.
[0162] In this way, the control unit 100 can set the font size of the target element to the largest possible font size, instead of displaying it at the fit font size.
[0163] Note that this processing method increases the number of temporary drawings required to determine the display parameters compared to normal. Therefore, the control unit 100 may execute the above-described process only when the processing load of temporary drawings does not significantly affect the responsiveness of the screen display. In addition, to reduce the processing load of temporary drawings, the control unit 100 may reduce the number of loops by increasing the unit for reducing the character size, or execute the process in (1) only for a predetermined number of loops. In this case, if the processing in (1) is exceeded even after executing the process for a predetermined number of loops, the control unit 100 should execute the process in step S514 of Figure 8.
[0164] Furthermore, when the above-described process is performed, the administrator of the image forming apparatus 10 may adjust the balance between character size and width compression ratio by using a value slightly larger than the value described in the first embodiment as the lower limit of the width compression ratio.
[0165] According to the image forming apparatus of this embodiment, it is possible to handle cases where width compression is possible by slightly reducing the font size of the text.
[0166] [3. Third Embodiment] Next, a third embodiment will be described. The third embodiment is an embodiment in which, as in the first embodiment, multi-line area processing is performed even on text elements in a fixed single-line area.
[0167] In the first embodiment, it was explained that multi-line area processing and single-line fixed area processing are switched according to the auto-shrinking attribute of the text element. However, processing of single-line fixed area text elements may also be performed in multi-line area processing. For example, a content creator can process single-line fixed area display in multi-line area processing by limiting the height of the text area of a text element to the height of one line and specifying a minimum character size that does not exceed the height of two lines. In this case, the content creator does not need to specify the auto-compression processing to be applied by specifying either a single-line fixed area or a multi-line area in the auto-shrinking attribute of the text element.
[0168] In this embodiment, the control unit 100, in the main processing shown in Figure 4, does not perform the processing in step S106 (determining whether the target element is a fixed single-row area or not), but instead executes the multi-row area processing in step S108 for all selected target elements.
[0169] Thus, the image forming apparatus of this embodiment can integrate the automatic reduction process into the multi-row area processing.
[0170] [4. Fourth Embodiment] Next, a fourth embodiment will be described. The fourth embodiment is an embodiment in which the object to which the display size setting is to be set is an object other than the text of the first embodiment, and the object is displayed in the display area at an appropriate size.
[0171] For example, even in the case of an object that includes multiple components contained within a predetermined shape area (e.g., a rectangular area), such as handwritten characters or emojis, where each component can be separated by a line break at any position, the processing described in the first to third embodiments can be applied.
[0172] For example, in step S400 of Figure 7, the control unit 100 reduces the size of the component (height and width of the component) by a predetermined percentage (for example, 5%). This allows the control unit 100 to obtain a size of the component that fits within the height of the display area. Furthermore, by performing a width compression determination process, the control unit 100 determines whether the object can be displayed within the display area by performing width compression on the component, or by reducing the size of the component. Based on the determination result, the control unit 100 determines the size of the component (size of the component, width compression ratio) and can draw it in the display area.
[0173] Thus, according to the image forming apparatus of this embodiment, objects of an appropriate size can be drawn (displayed) within the display area, even for objects other than text.
[0174] [5. Variant] The present invention is not limited to the embodiments described above, and various modifications are possible. That is, embodiments obtained by combining technical means that are appropriately modified without departing from the spirit of the present invention are also included in the technical scope of the present invention.
[0175] Furthermore, although the embodiments described above are explained separately for the sake of explanation, they can, of course, be combined and implemented to the extent that is technically possible. For example, the second and third embodiments may be combined. In this case, the image forming apparatus can perform multi-line area processing on both single-line fixed areas and multi-line areas, and even if the width compression determination process determines that the area is overflowing, the text can be fitted into the display area by reducing the font size.
[0176] Furthermore, in the embodiments, the programs that run in each device are programs that control the CPU and the like (programs that make the computer function) in order to realize the functions of the embodiments described above. The information handled by these devices is temporarily stored in a temporary storage device (for example, RAM) during processing, and then stored in storage devices such as various ROMs (Read Only Memory) and HDDs, and read, modified, and written by the CPU as needed.
[0177] Here, the recording medium for storing the program may be any of the following: semiconductor media (e.g., ROM or non-volatile memory card), optical recording medium / magneto-optical recording medium (e.g., DVD (Digital Versatile Disc), MO (Magneto Optical Disc), MD (Mini Disc), CD (Compact Disc), BD (Blu-ray® Disc), etc.), magnetic recording medium (e.g., magnetic tape, flexible disk, etc.). Furthermore, in addition to realizing the functions of the above-described embodiment by executing the loaded program, the functions of the present invention may also be realized by processing in cooperation with the operating system or other application programs based on the instructions of the program.
[0178] Furthermore, when distributing the program to the market, it can be stored on a portable recording medium and distributed, or transferred to a server computer connected via a network such as the Internet. In this case, the storage device of the server computer is, of course, also included in the present invention. [Explanation of Symbols]
[0179] 10 Image forming apparatus 100 Control Unit 102 Image Processing Unit 120 Image Input Section 130 Image forming unit 140 Display section 150 Operation section 160 Storage section 162 Web browser apps 164 Screen information storage area 166 Configuration Table 190 Communications Department
Claims
1. It comprises a display unit and a control unit, The control unit, An object is temporarily placed in the display area of the aforementioned display unit, The size of the temporarily placed object is compared with the size of the display area, If the object is a multi-line string and exceeds the height of the display area, the system determines whether the multi-line string will fit within the display area by reducing the specified character size of the multi-line string, thereby increasing the number of characters per line and decreasing the number of lines. If it is determined that the multi-line string fits within the display area with the reduced character size, the width compression ratio is calculated based on the ratio of the specified character size to the reduced character size. The display size of the object is determined by applying the width compression ratio to the specified character size. The object is drawn within the display area with the display size determined above. A display device characterized by the following features.
2. The control unit, The display device according to claim 1, characterized in that when the object is temporarily placed in the display area, it is temporarily placed with the attribute of being hidden.
3. The control unit, The display device according to claim 1 or 2, characterized in that the display size of the object is calculated such that either the width or height edge of the object is near the edge of the display area.
4. The control unit, The display size of the object contained within the display area is determined by changing the display size of the multi-line string. The display device according to any one of claims 1 to 3.
5. The control unit, The display device according to claim 4, characterized in that, if the object cannot be included within the display area even after changing the size of the multi-line string, a portion of the multi-line string is omitted and the multi-line string is drawn.
6. A method for controlling a display device, The steps include temporarily placing objects in the display area, The steps include comparing the size of the temporarily placed object with the size of the display area, If the object is a multi-line string and exceeds the height of the display area, the step of determining whether the multi-line string will fit within the display area by reducing the specified character size of the multi-line string, thereby increasing the number of characters per line and decreasing the number of lines. If it is determined that the multi-line string fits within the display area with the reduced character size, the step is to calculate a width compression ratio based on the ratio of the specified character size to the reduced character size. The steps include setting the width compression ratio to the specified character size to determine the display size of the object, The steps include drawing the object within the display area with the determined display size of the object, A control method characterized by including
Citation Information
Patent Citations
Method and device for character output
JP1996137866A
Information processing device, method, and computer control device
JP1997062247A
Multi language support portable communication terminal
JP2006018700A
On-vehicle equipment, and control method and control program of on-vehicle equipment
JP2012137578A