FlexDoc: Flexible Document Adaptation through Optimizing both Content and Layout

TL;DR

FlexDoc is introduced, a framework for creating and consuming documents that seamlessly adapt to different devices, author, and viewer preferences and interactions, which eliminates the need to manually create multiple document layouts.

Abstract

Designing adaptive documents that are visually appealing across various devices and for diverse viewers is a challenging task. This is due to the wide variety of devices and different viewer requirements and preferences. Alterations to a document's content, style, or layout often necessitate numerous adjustments, potentially leading to a complete layout redesign. We introduce FlexDoc, a framework for creating and consuming documents that seamlessly adapt to different devices, author, and viewer preferences and interactions. It eliminates the need for manually creating multiple document layouts, as FlexDoc enables authors to define desired document properties using templates and employs both discrete and continuous optimization in a novel comprehensive optimization process, which leverages automatic text summarization and image carving techniques to adapt both layout and content during consumption dynamically. Furthermore, we demonstrate FlexDoc in multiple real-world application scenarios, such as news readers and academic papers.

Figures (8)

• Figure 1: a) FlexDoc adapts a news page on a mobile phone to provide a compact overview with quick access to audio content for each article, based on viewer preferences (sliders below images), which prioritize audio content over images and text here. b) The same news page adapted for a tablet device with a user preference for image content. c) As the viewer 'pins' the COVID article and 'zooms in' on the Mars article, FlexDoc rearranges the layout accordingly, keeping the pinned article in place. d) As the viewer 'zooms in' on the blue text paragraph in the previous image with a preference for avoiding scrolling, FlexDoc extends the paragraph to provide more details and crops the top image, avoiding the need for scrolling.
• Figure 2: Document optimization results: a) The author defines three templates. FlexDoc optimizes tabstop positions based on the objective function. b) Document results when the viewer prefers the first or second template, respectively. c) Results on different devices, which balance both layout structure and the amount of content.
• Figure 3: Examples of image seam carving and content summarization.
• Figure 4: Document optimization results: a) The author defines three templates. FlexDoc optimizes tabstop positions based on the objective function. b) Document results when the viewer prefers the first or second template, respectively. c) Document results on different devices. The results balance both layout structure and the amount of content.
• Figure 5: FlexDocEditor is used for authoring adaptive documents. It allows authors to create templates by specifying tabstops and document elements: a) Horizontal (green) and vertical tabstops (blue) are created by clicking on the canvas. b) Document elements are placed by selecting the surrounding tabstops or layout boundaries (yellow). Authors can then use the +/- buttons to add/delete alternatives for a document element and the up/down arrow buttons to specify their preference ranks.