This application relates to the technical fields of software and/or hardware technology and, in one example embodiment, to system and method to automatically adjust content being layed out into a target area for browser rendering.
Many printed publications, such as magazines, use layouts where text fills a number of pages completely, without gaps or space left at the end. Currently it is done at design time by hand, which is relatively simple because a printed magazine has a well-defined page dimensions and font. When magazine content, e.g., a magazine article, is provided on an electronic display device via a web browser application, the associated text and images are often displayed either without the notion of printed pages (where the article appears continuously and different portions of the article can be viewed by scrolling up and down in the browser window) or in a way that leaves the last page of the electronic version of the article not quite filled to the very end.
Embodiments of the present invention are illustrated by way of example and not limitation in the figures of the accompanying drawings, in which like reference numbers indicate similar elements and in which:
In the following detailed description, numerous specific details are set forth to provide a thorough understanding of claimed subject matter. However, it will be understood by those skilled in the art that claimed subject matter may be practiced without these specific details. In other instances, methods, apparatuses or systems that would be known by one of ordinary skill have not been described in detail so as not to obscure claimed subject matter.
Some portions of the detailed description which follow are presented in terms of algorithms or symbolic representations of operations on binary digital signals stored within a memory of a specific apparatus or special purpose computing device or platform. In the context of this particular specification, the term specific apparatus or the like includes a general purpose computer once it is programmed to perform particular functions pursuant to instructions from program software. Algorithmic descriptions or symbolic representations are examples of techniques used by those of ordinary skill in the signal processing or related arts to convey the substance of their work to others skilled in the art. An algorithm is here, and generally, is considered to be a self-consistent sequence of operations or similar signal processing leading to a desired result. In this context, operations or processing involve physical manipulation of physical quantities. Typically, although not necessarily, such quantities may take the form of electrical or magnetic signals capable of being stored, transferred, combined, compared or otherwise manipulated. It has proven convenient at times, principally for reasons of common usage, to refer to such signals as bits, data, values, elements, symbols, characters, terms, numbers, numerals or the like. It should be understood, however, that all of these or similar terms are to be associated with appropriate physical quantities and are merely convenient labels. Unless specifically stated otherwise, as apparent from the following discussion, it is appreciated that throughout this specification discussions utilizing terms such as “processing,” “computing,” “calculating,” “determining” or the like refer to actions or processes of a specific apparatus, such as a special purpose computer or a similar special purpose electronic computing device. In the context of this specification, therefore, a special purpose computer or a similar special purpose electronic computing device is capable of manipulating or transforming signals, typically represented as physical electronic or magnetic quantities within memories, registers, or other information storage devices, transmission devices, or display devices of the special purpose computer or similar special purpose electronic computing device.
When content from a printed publication needs to be displayed on a wide variety of electronic devices that may have different aspect ratios, orientation, and may also allow for font size selection, it may be too costly to design by hand layouts for all desired combinations of device dimensions and font sizes. Dimensions of the layout elements of a content item (e.g., a magazine article) can be fitted into a shape of particular dimensions by a number of well-known methods (e.g., layout managers in user interface (UI) design). A browser engine provides only a limited set of interfaces to the text layout engine, which makes it challenging to build an efficient browser-based text-fitting algorithm. In addition, many browser-based controls are not very precise: for instance, many parameters are typically rounded to an integer number of pixels. A method and system are provided to automatically adjust content being layed out into a target area for browser rendering. The method and system, also referred to as automatic text fitting, may be utilized beneficially for fitting the text into the available space or target area using a web browser or an application utilizing a browser engine as a rendering platform.
In one embodiment, a text fitting system takes, as input, (1) space to be filled with text—a target area that can be represented by a sequence of rectangles or any other shapes and (2) source text—styled text, which, in the browser context, may be a sequence of document object model (DOM) elements with cascading style sheets (CSS) styling applied to it. The text fitting system modifies styling of the text in such a way that the given text fills up all or almost all of the target area.
The text fitting process may be described as being performed two passes. On the first pass, the source text is layed out in the space provided (e.g., target area represented by shapes) without modifications to its styling. Layout is performed in granular fashion by appending segments of the source text, one by one. As text is being layed out, one text segment at a time, for each point in the layout process, a pair of progress values is being recorded. The first progress value in the pair is the character position. A character position value indicates a specific position in the source text. The other progress value in the pair is total area that has been consumed thus far (consumed area value). The consumed area value, in one embodiment, indicates area consumed by a portion of the source text ending at the specific position in the source text. In general, the consumed area value indicates space (e.g., geometric area) consumed by the source content. If the entire source text did not fit into the target area, an additional temporary shape is allocated to handle overflow.
When the first pass completes, the collected data can be interpolated to determine a consumed area value for each character position in the source text. As no attempt is done during the layout performed during the first pass to fit the text exactly into the target area, the actual area consumed at the completion of the first pass may be termed the crash area. The interpolated consumed area values based on the results of the first pass may be termed consumed crash area values. A text segment may be any portion of the text, e.g., a paragraph, a sentence, a certain number of words, etc. The DOM that may result from performing the first pass may be discarded.
It will be noted, that while references are made in the specification to the source text and to the number of characters that has been layed out, the source content may be other than merely text, but one or more images or a combination of text and one or more images. The text fitting method may thus be applied to source content (that may be in the form of source text), while the first value in a pair of progress values may thus be content position (that may be in the form of a character position).
Once the first pass is completed and the progress data is collected, the second pass is commenced. On the second pass, as the text is being layed out once again, segment by segment, the pairs of progress values (character position and consumed area) are being calculated for each segment of the text again. The data collected on the first path is consulted to determine an adjustment factor for each segment of the source text that is being layed out. The adjustment factor may be used to determine how much the content of the associated segment needs to be stretched or shrunk.
In one embodiment, the adjustment factor is calculated by dividing the value representing the area that currently remains to be consumed after the content has been layed out up to a particular content position by the value representing the area that remained to be consumed on the first pass after the content has been layed out up to the same character position. Once the adjustment factor is determined, the text fitting method calculates the area that was attributed to the next segment of text during the first pass. The text fitting method then multiplies the calculated segment crash area by the adjustment factor to determine how much more or how much less area the next segment of text is expected to cover. The text fitting method then locally adjusts one or more styling parameters for that next segment of text such that the next text segment would take up approximately as much space as is being targeted. Various styling parameters can be adjusted in order to stretch or to shrink the text. Some of the styling parameters are associated with word spacing, letter spacing, font-size, line height, etc.
Thus, for the very first segment to be layed out during the second pass, where the text position value represents the entire source text yet to be layed out, the adjustment factor is calculated by dividing the target area value by the crash area value (the area that was consumed during the first pass). For the next segment to be layed out, the new segment starting at a new character position (representing the next character after the last character of the first segment) is adjusted using a new adjustment factor. The new adjustment factor is calculated by dividing the new area to be consumed (associated with the new character position) by the crash area that remained to be consumed associated with the new character position. As explained above, the crash area consumed (and the associated crash area that remained to be consumed) for every character position in the source text, including the new character position, can be determined by interpolating the pairs of progress values collected during the first pass.
As explained above, for the very first segment to be layed out during the second pass, where the text position value represents the entire source text yet to be layed out (“content position 0” in
Example architecture 300 within which method and system to automatically adjust content being layed out into a target area for browser rendering may be implemented is described with reference to
As shown in
In one embodiment, the second pass module 410 comprises an adjustment factor calculator 412, a content modification module 414, and a layout module 416. The adjustment factor calculator 412 may be configured to calculate an adjustment factor for a segment of the source content utilizing progress data. The adjustment factor calculator 412 is to determine, for each segment of the source content, a content position value for a segment of the source content, a remaining target area value for the segment, the remaining target area value indicative of such portion of the total target area that is unconsumed by any portion of the source content, and a remaining crash area value for the content position. The remaining target area value for the segment may be determined utilizing current progress data collected by the progress data collector 404. The remaining crash area value, that can be determined by interpolating the progress data (collected during the first pass) to determine a consumed crash area value for the content position and subtracting the consumed crash area value from the total crash area, is indicative of such portion of the total crash area that remained unconsumed by any portion of the source content during the first pass. The adjustment factor calculator 412 is to calculate the adjustment factor by dividing the remaining target area value by the remaining crash area value.
The content modification module 414 may be configured to modify a segment of the source content based on the adjustment factor generated by the adjustment factor calculator 412 to produce a modified segment (e.g., by modifying one or more styling parameters for a segment of the source content). The layout module 416 may be configured to append the modified segment to content already layed out into a portion of the total target area. An example method utilizing the system 400 may be described with reference to
As shown in
Table 1 below includes example pseudo code illustrating text fitting process.
The example computer system 600 includes a processor 602 (e.g., a central processing unit (CPU), a graphics processing unit (GPU) or both), a main memory 604 and a static memory 606, which communicate with each other via a bus 608. The computer system 600 may further include a video display unit 610 (e.g., a liquid crystal display (LCD) or a cathode ray tube (CRT)). The computer system 600 also includes an alpha-numeric input device 612 (e.g., a keyboard), a user interface (UI) navigation device 614 (e.g., a cursor control device), a disk drive unit 616, a signal generation device 618 (e.g., a speaker) and a network interface device 620.
The disk drive unit 616 includes a machine-readable medium 622 on which is stored one or more sets of instructions and data structures (e.g., software 624) embodying or utilized by any one or more of the methodologies or functions described herein. The software 624 may also reside, completely or at least partially, within the main memory 604 and/or within the processor 602 during execution thereof by the computer system 600, with the main memory 604 and the processor 602 also constituting machine-readable media.
The software 624 may further be transmitted or received over a network 626 via the network interface device 620 utilizing any one of a number of well-known transfer protocols (e.g., Hyper Text Transfer Protocol (HTTP)).
While the machine-readable medium 622 is shown in an example embodiment to be a single medium, the term “machine-readable medium” should be taken to include a single medium or multiple media (e.g., a centralized or distributed database, and/or associated caches and servers) that store the one or more sets of instructions. The term “machine-readable medium” shall also be taken to include any medium that is capable of storing and encoding a set of instructions for execution by the machine and that cause the machine to perform any one or more of the methodologies of embodiments of the present invention, or that is capable of storing and encoding data structures utilized by or associated with such a set of instructions. The term “machine-readable medium” shall accordingly be taken to include, but not be limited to, solid-state memories, optical and magnetic media. Such media may also include, without limitation, hard disks, floppy disks, flash memory cards, digital video disks, random access memory (RAMs), read only memory (ROMs), and the like.
The embodiments described herein may be implemented in an operating environment comprising software installed on a computer, in hardware, or in a combination of software and hardware. Such embodiments of the inventive subject matter may be referred to herein, individually or collectively, by the term “invention” merely for convenience and without intending to voluntarily limit the scope of this application to any single invention or inventive concept if more than one is, in fact, disclosed.
Thus, a method and system to automatically adjust content being layed out into a target area for browser rendering has been described. Although embodiments have been described with reference to specific example embodiments, it will be evident that various modifications and changes may be made to these embodiments without departing from the broader spirit and scope of the inventive subject matter. Accordingly, the specification and drawings are to be regarded in an illustrative rather than a restrictive sense.
Number | Name | Date | Kind |
---|---|---|---|
6256650 | Cedar et al. | Jul 2001 | B1 |
7743325 | Berker et al. | Jun 2010 | B2 |
20050223320 | Brintzenhofe et al. | Oct 2005 | A1 |
20060117255 | Seeler | Jun 2006 | A1 |
20060156232 | Giannetti et al. | Jul 2006 | A1 |
20080282147 | Schorr | Nov 2008 | A1 |
20090319888 | Oygard | Dec 2009 | A1 |
Number | Date | Country | |
---|---|---|---|
20140040719 A1 | Feb 2014 | US |