Smart responsive behavior for pixel-perfect designs

• US 10,133,463 B2
• Filed: 12/23/2014
• Issued: 11/20/2018
• Est. Priority Date: 12/23/2014
• Status: Active Grant

• Current Assignee: Business Objects Incorporated (SAP SE)
• Original Assignee: Business Objects Incorporated (SAP SE)
• Inventors: Marache-Francisco, Cathie, Le Fur, Kevin
• Primary Examiner(s): Hailu, Tadesse
• Application Number:
  US14/581,237
• Publication Number:
  US 20160179354A1
• Time in Patent Office: 1,428 Days
• CPC Class Codes: G06F 3/04847 Interaction techniques to control parameter settings, e.g. interaction with sliders or dials
• CPC Class Codes: G06F 40/103 Formatting, i.e. changing of presentation of documents automatic justification G06F40/189; automatic line break hyphenation G06F40/191

Abstract

A computer-implemented method for rendering a document on any size device includes, during runtime, rendering a document for display on a device, where the document includes multiple elements arranged in one or more rows and one or more columns. The method includes if a size of the device is greater than a threshold size, scaling the document as a whole to fit the size of the device. If the size of the device is less than the threshold size, scaling the document by stacking the columns containing elements into a single column, removing empty space from the single column, and scaling the elements in the stacked single column.

Claims

1. A computer-implemented method for rendering a document on any size device including executing instructions stored on a non-transitory computer-readable storage medium, the method comprising:

during runtime, rendering a document for display on a device having a display, wherein the document includes multiple elements arranged in one or more rows and one or more columns;

if a size of the display is greater than a threshold size, scaling the document as a whole to fit the size of the display by setting and using a scale ratio to a page width of the document divided by a width of the display; and

if the size of the display is less than the threshold size, scaling the document by;

setting the scale ratio to the page width of the document divided by a maximum column width;

stacking the columns containing elements into a single column,

removing empty space from the single column,

scaling the elements in the stacked single column,

wrapping text without scaling the text for an element that only contains text,

maintaining absolute positioning of the elements within the single column, and

maintaining a ratio between the elements within a row using the scale ratio.

2. The computer-implemented method of claim 1 further comprising computing the empty space for each of the columns.

3. The computer-implemented method of claim 2 wherein computing the empty space comprises computing an optimal height and an optimal width relative to a size of each of the columns.

4. The computer-implemented method of claim 1 wherein the document is an infographic.

5. A computer program product for rendering a document on any size computing device, the computer program product being tangibly embodied on a non-transitory computer-readable storage medium and comprising instructions that, when executed by at least one computing device, are configured to cause the at least one computing device to:

during runtime, render a document for display on a display of the computing device, wherein the document includes multiple elements arranged in one or more rows and one or more columns;

if a size of the display is greater than a threshold size, scale the document as a whole to fit the size of the display by setting and using a scale ratio to a page width of the document divided by a width of the display; and

if the size of the display is less than the threshold size, scale the document by;

setting the scale ratio to the page width of the document divided by a maximum column width;

stacking the columns containing elements into a single column,

removing empty space from the single column,

scaling the elements in the stacked single column,

wrapping text without scaling the text for an element that only contains text, and

maintaining absolute positioning of the elements within a column and maintaining a ratio between the elements within a row using the scale ratio.

6. The computer program product of claim 5 wherein the instructions include instructions that, when executed by the computing device, are configured to cause the computing device to compute the empty space for each of the columns.

7. The computer program product of claim 6 wherein computing the empty space includes instructions that, when executed by the computing device, are configured to cause the computing device to compute an optimal height and an optimal width relative to a size of each of the columns.

8. The computer program product of claim 5 wherein the document is an infographic.

9. A system for rendering a document on any size computing device, the system comprising:

at least one memory including instructions; and

at least one processor that is operably coupled to the at least one memory and that is arranged and configured to execute the instructions that, when executed, cause the at least one processor to implement a visual editor, a model design application, and a responsive infographic module, wherein;

the visual editor is configured enable a user to create one or more elements;

the model design application is configured to enable the user to create an infographic using the elements and to convert the infographic into an infographic model, wherein the infographic model includes the elements arranged in one or more rows and one or more columns; and

the responsive infographic module is configured to execute within a browser application and to;

during runtime, render the infographic for display on a display of the computing device;

if a size of the display is greater than a threshold size, scale the infographic as a whole to fit the size of the display by setting and using a scale ratio to a page width of the document divided by a width of the display; and

if the size of the display is less than the threshold size, scale the infographic by;

setting the scale ratio to the page width of the document divided by a maximum column width;

stacking the columns containing elements into a single column,

removing empty space from the single column,

scaling the elements in the stacked single column,

wrapping text without scaling the text for an element that only contains text, and

maintaining absolute positioning of the elements within a column and maintaining a ratio between the elements within a row using the scale ratio.

10. The system of claim 9 wherein the at least one processor is further configured to execute the instructions that, when executed, cause the at least one processor to implement a hypertext mark-up language (HTML) generator, wherein the HTML generator is configured to compute the empty space for each of the columns.

11. The system of claim 10 wherein computing the empty space includes computing an optimal height and an optimal width relative to a size of each of the columns.

12. The system of claim 9 wherein the model design application converts the infographic into an infographic model using a grid to identify the rows and the columns that contain elements of the infographic.