Creating a 'Book' Like Web Page

[TDC]

Hello

Thanks for taking a look at this. I want to create an html file which, when viewed in a Browser, appears like a book. I have no Angular knowledge but have a suspicion that it may be a very good approach to this problem.

Ideally I would like a single html page to define a multi-page document which could be considered a book. Each 'page' would have its content individually laid out and media, such as movies, illustrations, photographs, positioned. There would be scope to make the pages responsive to different devices viewing the book. Simple 'next page, previous page' navigation would be displayed.

Page design is important to us and we want the user experience to be similar to leafing through a beautifully designed book rather than scrolling through a web page.

It could be considered as an alternative to an Apple iBook without being locked into Apple's authoring tools.

Any thoughts would be much appreciated.

Chris

[Pedro Fernando Marquez Soto]

AngularJS would be great for the page controls, but he book-like styling is pure CSS3. 

Two CSS properties are the base of this: column-count and overflow: paged-x.

Create an HTML document with a lot of text and add the following in the CSS:

body{

-webkit-column-count: 3; /* Chrome, Safari, Opera */

        -moz-column-count: 3; /* Firefox */

        column-count: 3;

height: 100%;

overflow: paged-x;

overflow-y: hidden;

}

That will create columns like in a book, expanding the text through the X axis, and will change the scrolling from the Y axis to the X axis.

Now, this will give you the base for a web  page with the look and feel of a book. Then you can use AngularJS to add controls or to catch keypress events, and play with the overflow property in order to change the page displayed.

[Pedro Fernando Marquez Soto]

As a comment, this will not work on IE (if you care about that)

[1955.mille.miglia]

Thanks Pedro

We do have to consider IE as our principal client currently has IE8 but is moving to either IE10 or IE11 later this year so we will be developing targeting their new version.

Currently the way we create our 'book' like documents is to have a single html file contain many Divs, one for each 'page', and our Flash navigation control simply shows and hides the Divs as you click Next or Previous. Despite its simplicity it works really well but (there had to be a but!) recent documents need to contain more pages and the flaw in this approach is that the browser has to load all of the pages before displaying the first and with all of the pictures in a 70 page document this can be far too slow.

What had crossed my mind was to continue to develop a base html file with Divs separating 'pages' and use this for creating the pages and laying out the content (we use Dreamweaver) as it is quick to navigate through the document rather than have 60 or 70 html pages per document, each having to be individually opened and closed when developing the content. Then have an accompanying 'book' html file which has no content but does have some Angular code. This would load very quickly. The Angular code could then look in the content file and get the first Div (they are numbered for ease of navigation) and display it. Navigating would simply instruct the Angular code to replace one Div with another.

Does this sound possible?

Chris

--
You received this message because you are subscribed to a topic in the Google Groups "AngularJS" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/angular/6B2lGoSWjz4/unsubscribe.
To unsubscribe from this group and all its topics, send an email to angular+u...@googlegroups.com.
To post to this group, send email to ang...@googlegroups.com.
Visit this group at http://groups.google.com/group/angular.
For more options, visit https://groups.google.com/d/optout.