2013-02-14 18:27:01 +04:00
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
<!-- DOCTYPE html -->
< html >
< head >
< title > PortableMag< / title >
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" >
< link rel = "stylesheet" href = "magazine.css" >
< link rel = "stylesheet" href = "magazine-themes.css" >
< link rel = "stylesheet" href = "magazine-custom.css" >
< style >
.viewer {
overflow: auto;
}
.magazine {
left: 150px;
margin-left: 0px;
}
.current.page {
z-index: 9000;
box-shadow: 10px 10px 150px -50px black;
}
/*
.page:hover {
z-index: 9000;
box-shadow: 10px 10px 150px 0px black;
}
*/
.page {
-webkit-transition: none;
-moz-transition: none;
-o-transition: all 0 ease;
-ms-transition: none;
transition: none;
}
.scroller {
position: relative;
display: inline-block;
text-align: center;
width: auto;
height: 100%;
overflow: hidden;
}
/* vertical */
.vertical.magazine,
.vertical.article,
.vertical.group {
vertical-align: top;
}
.vertical .article,
.vertical .group,
.vertical .page {
display: block;
}
< / style >
< script src = "ext-lib/jquery.js" > < / script >
< script src = "ext-lib/jquery.scrollto.js" > < / script >
< script src = "ext-lib/jquery.scrollstop.js" > < / script >
< script src = "ext-lib/iscroll.js" > < / script >
< script src = "lib/jli.js" > < / script >
< script src = "magazine.js" > < / script >
< script src = "layout.js" > < / script >
< script src = "platform.js" > < / script >
< script >
$(document).ready(function(){
// keyboard...
$(document)
.keydown(makeKeyboardHandler({
'*': {
title: 'Global',
doc: '',
36: firstPage, // Home
35: lastPage, // End
37: prevPage, // Left
39: nextPage, // Right
32: {
'default': nextPage, // Space
'shift': prevPage // shift-Space
},
70: function(){ // F
togglePageFitMode()
}
}
},
function(k){console.log(k)}))
2013-02-14 19:06:18 +04:00
logger = Logger()
2013-02-14 18:27:01 +04:00
var scrolling = false
var _x = null
2013-02-18 18:27:17 +04:00
var _t = null
2013-02-18 18:43:18 +04:00
USE_TRANSFORM = false
2013-02-14 18:27:01 +04:00
$('.viewer')
2013-02-18 18:27:17 +04:00
2013-02-14 18:27:01 +04:00
.on('mousedown touchstart', function(){
2013-02-14 19:06:18 +04:00
logger.log('[touchstart]')
2013-02-18 18:27:17 +04:00
//_t = evt.timeStamp || Date.now();
2013-02-14 18:27:01 +04:00
scrolling = true
togglePageDragging('on')
})
2013-02-18 18:27:17 +04:00
2013-02-18 19:17:04 +04:00
.on('touchmove', function(evt){
2013-02-18 18:59:52 +04:00
evt.preventDefault()
2013-02-18 19:33:31 +04:00
var pos_x = event.touches[0].pageX
console.log(event.touches[0].pageX)
2013-02-18 19:28:01 +04:00
2013-02-18 19:17:04 +04:00
if(_x == null){
_x = pos_x
}
var x = pos_x
if(scrolling){
var s = getMagazineShift()
shiftMagazineTo(s + (x - _x))
2013-02-18 18:59:52 +04:00
}
2013-02-18 19:17:04 +04:00
_x = x
})
/*
.on('mousemove', function(evt){
//var t = evt.timeStamp || Date.now();
evt.preventDefault()
var pos_x = evt.clientX
2013-02-18 18:59:52 +04:00
2013-02-14 18:27:01 +04:00
if(_x == null){
2013-02-18 18:59:52 +04:00
_x = pos_x
2013-02-14 18:27:01 +04:00
}
2013-02-18 18:59:52 +04:00
var x = pos_x
2013-02-18 19:07:41 +04:00
//console.log(pos_x)
2013-02-18 19:02:57 +04:00
if(scrolling){
2013-02-18 18:43:18 +04:00
var s = getMagazineShift()
shiftMagazineTo(s + (x - _x))
2013-02-14 18:27:01 +04:00
}
_x = x
})
2013-02-18 19:17:04 +04:00
*/
2013-02-18 18:27:17 +04:00
2013-02-14 18:27:01 +04:00
.on('mouseup touchend', function(){
2013-02-14 19:06:18 +04:00
logger.log('[touchend]')
2013-02-14 18:27:01 +04:00
scrolling = false
togglePageDragging('off')
})
2013-02-16 17:27:17 +04:00
// XXX need to setup style for android to work...
2013-02-14 19:08:58 +04:00
$('.viewer').css({overflow: 'hidden'})
2013-02-14 18:27:01 +04:00
2013-02-16 17:27:17 +04:00
2013-02-14 18:27:01 +04:00
// expand the templates...
runMagazineTemplates()
//setCurrentPage(0)
//limit_scroll()
})
var SCROLL_LIMIT = 800 * 1.5
function setup_scroll_limiter(){
$('.magazine').wrapAll($('< div class = "scroller" > '))
limit_scroll()
}
// XXX set the limit to next/prev page alignment...
function limit_scroll(){
var W = $('.viewer').width()
var ml = parseFloat($('.scroller').css('margin-left')) || 0
var pos = $('.viewer').scrollLeft()
var c = -ml + pos + W/2
$('.scroller').css({
'margin-left': -(c-SCROLL_LIMIT),
'width': c+SCROLL_LIMIT
})
$('.viewer').scrollLeft(pos-ml-(c-SCROLL_LIMIT))
}
function clear_limits(){
var pos = $('.viewer').scrollLeft()
var l = parseFloat($('.scroller').css('margin-left'))
$('.scroller').css({
'margin-left': '',
'width': ''
})
$('.viewer').scrollLeft(pos - l)
}
< / script >
< / head >
< body >
< div id = "viewer" class = "viewer" >
< div class = "magazine" name = "PortableMag" >
< div class = "cover page" >
< div class = "content" >
<!-- h1 style="color:gray;font - size:125px;margin - bottom: - 35px; margin - top: 160px">PortableMag</h1>
< h1 style = "color:silver; font-size: 20px; margin-left:10px" > A suit for publishing portable periodic magazines on mobile platforms.< / h1-- >
< svg width = "800" height = "600" xmlns = "http://www.w3.org/2000/svg" >
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< g >
< title > PortableMag cover< / title >
< defs >
< path id = "circle_path" d = "m177.720383,238.333344c0,-82.290771 66.655533,-148.946304 148.946304,-148.946304c82.290771,0 148.946289,66.655533 148.946289,148.946304c0,82.290771 -66.655518,148.946289 -148.946289,148.946289c-82.290771,0 -148.946304,-66.655518 -148.946304,-148.946289z" / >
< / defs >
< text fill = "#7f7f7f" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "306" y = "434.33334" id = "svg_2" font-size = "15" font-family = "Arial" text-anchor = "middle" xml:space = "preserve" / >
< g id = "svg_1" >
< g id = "svg_8" >
< text stroke = "#000000" fill = "#7f7f7f" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "224.898504" y = "309.870464" id = "svg_6" font-size = "24" font-family = "Arial" text-anchor = "middle" xml:space = "preserve" font-weight = "bold" transform = "matrix(5.71749 0 0 5.71749 -632.211 -1442.56)" > Mag< / text >
< text stroke = "#000000" fill = "#a8a8a8" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "156.581224" y = "309.650884" id = "svg_7" font-size = "24" font-family = "Arial" text-anchor = "middle" xml:space = "preserve" transform = "matrix(5.71749 0 0 5.71749 -632.211 -1442.56)" > Portable< / text >
< / g >
< text stroke = "#000000" fill = "#afafaf" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "261.526111" y = "338.824173" id = "svg_4" font-size = "15" font-family = "Arial" text-anchor = "middle" xml:space = "preserve" transform = "matrix(1.53525 0 0 1.53525 -34.4106 -167.936)" font-weight = "normal" font-style = "normal" > A suit for publishing portable periodic magazines on mobile platforms.< / text >
< / g >
< / g >
< / svg >
<!-- if you do not want a page number just do not include it... -->
<!-- div class="page - number - text">[PAGE NUMBER]</div -->
< / div >
< / div >
<!-- XXX do we need a Magazine Credits page??? -->
< div class = "article" >
< div class = "cover page" >
< div class = "content" >
< h1 name = "basics" style = "color:gray;font-size:100px;" > The Basics...< / h1 >
< big >
< h2 > Main features< / h2 >
< ul >
< li > Magazines, Covers, Articles and Pages, fully navigable
< li > Three main views: < i style = "color:silver" > Magazine (under development)< / i > Page and Ribbon
< li > Fully linkable structure
< li > Full intuitive Gesture, Mouse or Keyboard navigation
< li > Special #URLs enable full link-based navigation and control
< li > Bookmarks and bookmark navigation
< li > Intuitive navigator widget
< li > Portable to most mobile platforms including: Apple iOS, Android, Windows Phone 7/8, BlackBery, HP webOS and more.
< li > Standalone on main desktop operating systems, including Apple MacOS X and Microsoft Windows
< li > Based on popular, open and easy to learn and use standards (HTML5 layout, SVG vector graphics)
< i style = "color: silver" >
< li > Usable from the web (support for engines other than WebKit not here yet)
< li > Integrated Editor (under development)
< li > Integrated publishing framework (under development)
< / i >
< / ul >
< / big >
< div style = "position:absolute; bottom:10px; right:30px" >
< a href = "#next" > get started...< / a > < br >
< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
< h1 name = "navigation" > PortableMag Navigation and Linking< / h1 >
< div style = "float:left; width: 40%; height: 100%; margin: 10px;" >
< h2 > Finger controls< / h2 >
< ul >
< li > Single finger swipe left/right – prev/next page.
< li > Two finger swipe left/right – prev/next article.
< li > Single finger swipe up/down – toggle thumbnail view.
< li > Pinch in/out – go in/out of thumbnail view.
< / ul >
< h2 > Navigation via #URLs< / h2 >
< h3 > The basics< / h3 >
< a href = "#1" > Page #1< / a > < br >
< a href = "#ArticleAnchorExample" > Named page< / a > < br >
< p >
< s > < a href = "#page-3-anchor" style = "pointer-events:none" > Anchor on page #3< / a > < / s > < br >
< i > currently navigation via existing anchors
will break the layout, so use the name attribute
on any other tags (see example).
< / i >
< / p >
< / div >
< div style = "float:left; width: 40%; height: 100%; padding: 10px;" >
< h3 > Special anchors< / h3 >
< p > These show up in the page URL< / p >
< a href = "#home" > Magazine cover< / a > < br >
< a href = "#end" > Last page< / a > < br >
< a href = "#thumbnails" > Thumbnail view< / a > < br >
< a href = "#example-layer" > Toggle a hidden layer< / a > < br >
< span name = "example-layer" class = "hidden" >
< a href = "#hideLayers" > Hide all layers< / a > < br >
< / span >
< a href = "#bookmark" > Toggle bookmark< / a > < br >
< h3 > Relative special anchors< / h3 >
< p > These will get replaced by corresponding page numbers in the URL< / p >
< a href = "#next" > Next page< / a > < br >
< a href = "#prev" > Previous page< / a > < br >
< a href = "#nextArticle" > Next article< / a > < br >
< a href = "#prevArticle" > Previous article< / a > < br >
< h3 > History support< / h3 >
< i > NOTE: this is still a bit flaky...< / i > < br >
< a href = "#back" > Go back< / a > < br >
< a href = "#forward" > Go forward< / a > < br >
< / div >
< div style = "position:absolute; right: 30px; bottom:10px;" >
< a href = "#config" > configuration demo< / a > < a href = "#next" > next page...< / a > < br >
< / div >
< div name = "example-layer" class = "hidden" onclick = "window.location='#example-layer'" style = "position:absolute; left:450px; top:250px; width: 300px; height:50px; text-align: center; padding: 15px; border: solid gray 5px; background: white; color: gray; cursor: hand; opacity: 0.8" >
< h3 > This is an example layer< / h3 >
< i > click or tap to hide< / i >
< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
<!-- XXX do we need an Article Credits page??? -->
< div class = "page" >
< div class = "content" >
< svg width = "800" height = "600" xmlns = "http://www.w3.org/2000/svg" >
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< defs >
< marker refY = "50" refX = "50" markerHeight = "5" markerWidth = "5" viewBox = "0 0 100 100" orient = "auto" markerUnits = "strokeWidth" id = "se_marker_start_svg_36" >
< path stroke-width = "10" stroke = "#000000" fill = "#000000" d = "m0,50l100,40l-30,-40l30,-40l-100,40z" id = "svg_3" / >
< / marker >
< marker refY = "50" refX = "50" markerHeight = "5" markerWidth = "5" viewBox = "0 0 100 100" orient = "auto" markerUnits = "strokeWidth" id = "se_marker_start_svg_37" >
< path stroke-width = "10" stroke = "#000000" fill = "#000000" d = "m0,50l100,40l-30,-40l30,-40l-100,40z" id = "svg_8" / >
< / marker >
< / defs >
< title > PortableMag Anatomy< / title >
< g >
< title > Layer 1< / title >
< text fill = "#000000" stroke = "#000000" stroke-width = "0" x = "199" y = "56.33334" id = "svg_1" font-size = "32" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" font-weight = "bold" > PortableMag Anatomy< / text >
< path id = "svg_34" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "2" stroke = "#000000" fill = "none" / >
< g id = "svg_30" >
< g id = "svg_2" >
< path stroke = "#000000" fill = "#000000" fill-opacity = "0" d = "m78.166656,117.166718l675.000092,0l0,123.000031l-675.000092,0" transform = "rotate(180 415.667 178.667)" id = "svg_12" / >
< rect fill = "#ffffff" stroke-width = "2" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "87" y = "132" width = "130" height = "100" stroke = "#000000" id = "svg_13" / >
< rect stroke = "#000000" fill = "#000000" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" x = "223" y = "132" width = "415.00001" height = "100" id = "svg_14" / >
< text stroke-opacity = "0" fill = "#000000" stroke = "#000000" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "152" y = "187.5" id = "svg_24" font-size = "14" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" > Magazine cover< / text >
< rect stroke = "#000000" id = "svg_7" fill = "#ffffff" stroke-width = "2" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "229.66666" y = "138.66667" width = "130" height = "86" / >
< text stroke-opacity = "0" xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "14" id = "svg_4" y = "187" x = "294.83334" stroke-width = "0" stroke = "#000000" fill = "#000000" > Article Cover< / text >
< rect id = "svg_15" stroke = "#000000" fill = "#e5e5e5" stroke-width = "2" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "365.66667" y = "138.66668" width = "130" height = "86" / >
< text stroke-opacity = "0" xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "14" id = "svg_5" y = "187.00003" x = "430.83337" stroke-width = "0" stroke = "#000000" fill = "#000000" > Page< / text >
< rect id = "svg_16" stroke = "#000000" fill = "#e5e5e5" stroke-width = "2" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "501.66665" y = "138.66666" width = "130" height = "86" / >
< text id = "svg_6" stroke-opacity = "0" xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "14" y = "186.66667" x = "567.00001" stroke-width = "0" stroke = "#000000" fill = "#000000" > Page< / text >
< path stroke = "#000000" id = "svg_17" fill = "#bfbfbf" d = "m646.167236,132.167267l105,0l0,99.000031l-105,0" transform = "rotate(180 698.667 181.667)" / >
< text stroke-opacity = "0" xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "14" id = "svg_25" y = "187.00063" x = "709.66669" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" stroke = "#000000" fill = "#000000" > Next Article< / text >
< text xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "10" id = "svg_26" y = "113.33334" x = "98.66669" stroke-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" stroke = "#000000" fill = "#000000" > Magazine< / text >
< text xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "9" id = "svg_27" y = "129.33334" x = "236.16669" stroke-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" stroke = "#000000" fill = "#000000" > Article< / text >
< / g >
< g id = "svg_29" >
< g id = "svg_11" >
< rect stroke = "#000000" fill = "#cccccc" stroke-width = "2" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "273" y = "295" width = "322.99999" height = "180" id = "svg_20" / >
< rect stroke = "#000000" fill = "#ffffff" stroke-width = "2" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "324.5" y = "300.38461" width = "220" height = "169.23077" id = "svg_21" / >
< text xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "18" id = "svg_10" y = "289.33334" x = "292.66669" stroke-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" stroke = "#000000" fill = "#000000" > Page< / text >
< g id = "svg_19" >
< text stroke-opacity = "0" xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "18" id = "svg_9" y = "381.83334" x = "434.16669" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" stroke = "#000000" fill = "#000000" > Page Content< / text >
< text xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "14" id = "svg_18" y = "400.83334" x = "433.66669" stroke-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" stroke = "#000000" fill = "#000000" > (safe area)< / text >
< / g >
< / g >
< g id = "svg_28" >
< line id = "svg_32" y2 = "275.33334" x2 = "305.66669" y1 = "227.33334" x1 = "362.66669" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke = "#000000" fill = "none" / >
< line stroke = "#000000" id = "svg_33" y2 = "228.33334" x2 = "497.66669" y1 = "289.33334" x1 = "587.66669" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "none" / >
< / g >
< g id = "svg_23" >
< text stroke-opacity = "0" xml:space = "preserve" text-anchor = "middle" font-family = "Sans-serif" font-size = "10" id = "svg_22" y = "532.33334" x = "446.66669" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" stroke = "#000000" fill = "#000000" > This area might get clipped< / text >
< path marker-start = "url(#se_marker_start_svg_36)" stroke = "#000000" id = "svg_36" d = "m301.666687,464.333344c1,39 84,28 112,55.000031" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "none" / >
< path id = "svg_37" marker-start = "url(#se_marker_start_svg_37)" stroke = "#000000" d = "m577.666687,461.666687c1,39 -71,31 -98,56" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "none" / >
< / g >
< / g >
< / g >
< / g >
< / svg >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page" >
< div class = "content" style = "background: black; color: gray; padding-left: 20px; padding-right: 20px;" >
< h1 > The Page < i > content< / i > has a fixed size...< / h1 >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
< a name = "page-3-anchor" > < / a >
< img src = "img.jpg" height = "100%" align = "left" style = "margin-right: 15px" / >
< h1 > Using the content block...< / h1 >
< p >
The content block can contain any HTML.
< / p >
< p >
The contents will allways fit the screen, the aspect ratio
of the content block is fixed regardless of the viewer.
< / p >
< p >
Contents will not get clipped as long as they are within the block.
< / p >
< p >
NOTE: by default the overflow is visible (see < a href = "#next" > next page< / a > ), so be carefull.
< / p >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
< img src = "img.jpg" width = "200%" style = "position: absolute; left: -50%; top: -20%" / >
< div style = "position:absolute; width:100%; height: 100%; color: white;" >
< h1 > You can still use the full page area...< / h1 >
< p >
Though anything outside the content block can and will get clipped,
depending on viewer aspect ratio...
< / p >
< p >
You can see this by resizing the page in browser or rotating the device.
< / p >
< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< / div >
< div class = "article" >
< div class = "cover page" >
< div class = "content" name = "ArticleAnchorExample" >
< h1 > Page Templates< / h1 >
< p >
This page contains several examples of template fields,
the first one is the simplest, the magazine name
(< span class = "magazine-title-text" > [MAGAZINE NAME]< / span > ),
then we'll have the index (see next) and in the bottom-right
corner is the page number...
< / p >
< div class = "article-index" > [ARTICLE INDEX]< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page" style = "background: black; color: white;" >
< div class = "content" >
< h1 > Two column< / h1 >
< div style = "float:left; width: 45%; height: 100%; margin: 10px;" >
Column 1
< / div >
< div style = "float:left; width: 45%; height: 100%; padding: 10px;" >
Column 2
< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page no-resize page-align-left" >
< div class = "content" style = "background:gold" >
Left-aligned page...
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page no-resize page-align-center" >
< div class = "content" style = "background:yellow; width: 600px" >
Center-aligned page...
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page no-resize page-align-right" >
< div class = "content" style = "background:gold; width: 400px" >
Right-aligned page...
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page no-resize page-align-right" >
< div class = "content" style = "background:orange; width: 200px" >
Right-aligned page...
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< / div >
<!-- div class="article vertical">
< div class = "cover page" >
< div class = "content" >
< h1 > Article Cover< / h1 >
< a href = "#home" > home< / a > < br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "group" >
< div class = "page" >
< div class = "content" >
Page
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
Page
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page" >
< div class = "content" >
Page< br >
< a href = "#home" > home< / a > < br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< / div >
< / div-- >
< div class = "article" >
<!-- page set -->
< div class = "group" style = "background: url(img.jpg) no-repeat right top; background-size: 100% auto; color: white;" >
< div class = "page cover no-resize page-align-left" style = "background:transparent" >
< div class = "content" >
< h1 > Page Set Example< / h1 >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page no-resize" style = "background:transparent" >
< div class = "content" >
Page in set< br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< div class = "page no-resize page-align-right" style = "background:transparent" >
< div class = "content" >
Page in set< br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / div >
< / body >
< / html >
<!-- vim:set ts=4 sw=4 nowrap : -->
