SMART RESPONSIVE BEHAVIOR FOR PIXEL-PERFECT DESIGNS

• US 20160179354A1
• Filed: 12/23/2014
• Published: 06/23/2016
• Est. Priority Date: 12/23/2014
• Status: Active Grant

• Current Assignee: Business Objects Incorporated (SAP SE)
• Original Assignee: Cathie Marache-Francisco, Kevin Le Fur
• Inventors: MARACHE-FRANCISCO, Cathie, LE FUR, Kevin
• Granted Patent: US 10,133,463 B2
• Time in Patent Office: Days
• US Class Current: 1/1
• 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, wherein the document includes multiple elements arranged in one or more rows and one or more columns;

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; and

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.

2. The computer-implemented method of claim 1 wherein scaling the document if the size of the device is less than the threshold size further includes not scaling an element that only contains text.

3. The computer-implemented method of claim 1 wherein scaling the document if the size of the device is less than the threshold size further includes, for a single element containing only text, wrapping the text without scaling the text.

4. The computer-implemented method of claim 1 wherein scaling the document if the size of the device is less than the threshold size further comprises:

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

maintaining a ratio between the elements within a row.

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

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

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

8. 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 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 computing device is greater than a threshold size, scale the document as a whole to fit the size of the computing device; and

if the size of the computing device is less than the threshold size, scale the document by maintaining absolute positioning of the elements within a column and maintaining a ratio between the elements within a row.

9. The computer program product of claim 8 wherein if the size of the computing device is less than the threshold size, the instructions include instructions that, when executed by the computing device, are configured to cause the computing device to:

stack the columns containing elements into a single column;

remove empty space from the single column; and

scale the elements in the stacked single column.

10. The computer program product of claim 9 wherein if the size of the device is less than the threshold size, the instructions include instructions that, when executed by the computing device, are configured to cause the computing device to not scale an element that only contains text.

11. The computer program product of claim 9 wherein if the size of the device is less than the threshold size, the instructions include instructions that, when executed by the computing device, are configured to cause the computing device, for a single element containing only text, to wrap the text without scaling the text.

12. The computer program product of claim 9 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.

13. The computer program product of claim 12 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.

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

15. 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 the computing device;

if a size of the computing device is greater than a threshold size, scale the infographic as a whole to fit the size of the computing device; and

if the size of the computing device is less than the threshold size, scale the infographic by maintaining absolute positioning of the elements within a column and maintaining a ratio between the elements within a row.

16. The system of claim 15 wherein if the size of the computing device is less than the threshold size, the responsive infographic module is configured to:

stack the columns containing elements into a single column;

remove empty space from the single column; and

scale the elements in the stacked single column.

17. The system of claim 16 wherein if the size of the device is less than the threshold size the responsive infographic module is configured to not scale an element that only contains text.

18. The system of claim 16 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.

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

20. The system of claim 15 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.