2013-01-29 13:58:27 +04:00
<!-- XXX for some reason a doctype kills the layout, need to investigate -->
<!-- DOCTYPE html -->
2013-01-11 18:48:15 +04:00
< html >
< head >
2013-01-30 01:00:58 +04:00
< title > PortableMag< / title >
2013-02-11 02:22:29 +04:00
< meta http-equiv = "Content-Type" content = "text/html; charset=utf-8" >
2013-02-25 22:09:55 +04:00
< meta name = "viewport" content = "width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" >
2013-01-25 17:36:28 +04:00
2013-03-06 23:46:49 +04:00
< link rel = "stylesheet" href = "css/magazine.css" >
< link rel = "stylesheet" href = "css/gear.css" >
< link rel = "stylesheet" href = "css/magazine-themes.css" >
< link rel = "stylesheet" href = "css/magazine-custom.css" >
< link rel = "stylesheet" href = "css/magazine-editor.css" >
2013-02-25 22:09:55 +04:00
< style >
2013-02-26 04:17:29 +04:00
.chrome {
display: block;
width: 100%;
height: 100%;
2013-03-06 17:43:46 +04:00
box-sizing: border-box;
-moz-box-sizing: border-box;
-webkit-box-sizing: border-box;
/*
border: solid 2px black;
*/
/*border-radius: 2px;*/
2013-02-26 04:17:29 +04:00
}
2013-02-25 22:09:55 +04:00
.viewer {
overflow: hidden;
}
.magazine {
left: 150px;
margin-left: 0px;
}
.page {
vertical-align:top;
-webkit-transition: none;
-moz-transition: none;
-o-transition: all 0 ease;
-ms-transition: none;
transition: none;
}
/* vertical */
2013-03-05 03:55:14 +04:00
/* XXX this is not in the direct priorities...
2013-02-25 22:09:55 +04:00
.vertical.magazine,
.vertical.article,
.vertical.group {
vertical-align: top;
}
.vertical .article,
.vertical .group,
.vertical .page {
display: block;
}
2013-03-05 03:55:14 +04:00
*/
2013-02-25 22:09:55 +04:00
2013-03-06 23:19:15 +04:00
.gear {
display: none;
border-color: silver;
}
.editor .gear {
display: inline-block;
opacity: 0.4;
}
.editor .gear .spoke,
.editor .gear .spoke div,
.editor .gear .spoke div:after {
background: silver;
}
2013-02-25 22:09:55 +04:00
< / style >
2013-01-25 17:36:28 +04:00
2013-02-05 17:56:34 +04:00
< script src = "ext-lib/jquery.js" > < / script >
2013-02-26 04:17:29 +04:00
< script src = "ext-lib/spin.js" > < / script >
< script src = "ext-lib/jquery.spin.js" > < / script >
2013-03-04 20:57:35 +04:00
<!-- zip functionality -->
2013-03-11 22:12:37 +04:00
< script src = "ext-lib/jszip.js" > < / script >
2013-03-04 20:57:35 +04:00
< script src = "ext-lib/jszip-load.js" > < / script >
2013-03-11 22:12:37 +04:00
< script src = "ext-lib/jszip-inflate.js" > < / script >
2013-03-04 20:57:35 +04:00
<!-- script src="ext - lib\jszip - deflate.js"></script -->
2013-02-25 22:09:55 +04:00
2013-02-05 17:56:34 +04:00
< script src = "lib/jli.js" > < / script >
2013-02-26 01:52:57 +04:00
< script src = "lib/scroller.js" > < / script >
< script src = "lib/keyboard.js" > < / script >
2013-03-05 00:21:46 +04:00
<!-- CKEditor -->
2013-03-04 23:37:54 +04:00
< script src = "ckeditor/ckeditor.js" > < / script >
< script >
CKEDITOR.disableAutoInline = true
< / script >
2013-02-26 15:44:53 +04:00
<!-- script src="lib/log.js"></script -->
2013-01-22 18:04:33 +04:00
2013-01-23 01:37:39 +04:00
< script src = "magazine.js" > < / script >
2013-02-25 22:09:55 +04:00
< script src = "layout.js" > < / script >
2013-02-26 04:17:29 +04:00
< script src = "navigator.js" > < / script >
2013-03-02 19:57:59 +04:00
< script src = "editor.js" > < / script >
2013-03-09 16:43:19 +04:00
< script src = "templates.js" > < / script >
2013-01-21 05:55:56 +04:00
2013-02-05 20:21:06 +04:00
< script src = "platform.js" > < / script >
2013-01-27 22:41:06 +04:00
2014-02-04 00:23:11 +04:00
<!-- XXX load this as early as possible... -->
< script src = "keybindings.js" > < / script >
2013-01-22 18:39:44 +04:00
< script >
2013-03-05 15:00:20 +04:00
function showInOverlay(text){
$('.overlay').remove()
2013-03-05 15:19:39 +04:00
var overlay = $('< div class = "overlay" > < div > × < / div > < div / > < / div > ')
2013-03-05 15:00:20 +04:00
.css({display: 'none'})
overlay.children().first().click(function(){
2013-03-05 15:19:39 +04:00
removeOverlay()
2013-03-05 15:00:20 +04:00
})
overlay.children().last().append(text)
// add the overlay...
overlay
.appendTo($('.chrome'))
.fadeIn()
}
2013-03-05 15:19:39 +04:00
function removeOverlay(){
$('.overlay').fadeOut()
setTimeout(function(){
$('.overlay').remove()
}, 300)
}
2013-03-05 15:00:20 +04:00
2013-03-05 22:19:48 +04:00
// XXX make this more sensible...
2013-03-05 15:00:20 +04:00
function showInfo(){
showInOverlay($(
'< div > '+
2013-03-05 22:19:48 +04:00
'< h1 > PortableMag< / h1 > '+
2013-03-05 15:00:20 +04:00
'< p > licence and copyright info goes here...< / p > '+
'< / div > '))
}
2013-03-11 22:12:37 +04:00
// setup download link...
var USE_ZIP = true
var USE_DATA_URL = true
function generateMagazineDownload(){
var zip = new JSZip()
var json = JSON.stringify(buildJSON(true, true))
// this is a really odd one, Chrome seems to replace some
// entities with actual chars...
// what is even more odd, this then confuses some unicode
// readers/wwriters...
.replace(/– – ')
if(USE_ZIP){
zip.file('magazine.json', json)
var content = zip.generate()
} else {
var content = btoa(json)
}
if(USE_DATA_URL){
$('#data_download')
.attr('href','data:text/octet-stream;base64,'+content)
.css('display', 'inline')
if(USE_ZIP){
$('#data_download')
.attr('download','magazine.zip')
} else {
$('#data_download')
.attr('download','magazine.json')
}
} else {
location.href="data:application/zip;base64,"+content
}
}
/*
// util...
// from: http://stackoverflow.com/a/11058858
function ab2str(buf) {
return String.fromCharCode.apply(null, new Uint16Array(buf));
}
function str2ab(str) {
var buf = new ArrayBuffer(str.length*2); // 2 bytes for each char
var bufView = new Uint16Array(buf);
for (var i=0, strLen=str.length; i< strLen ; i + + ) {
bufView[i] = str.charCodeAt(i);
}
return buf;
}
*/
// upload...
function handleFileSelect(evt) {
var files = evt.target.files; // FileList object
// Loop through the FileList and render image files as thumbnails.
for (var i = 0, f; f = files[i]; i++) {
var reader = new FileReader();
// Closure to capture the file information.
reader.onload = (function(theFile) {
return function(e) {
console.log('loading...')
var raw_data = e.target.result
window.JSON_DATA = raw_data
if(USE_ZIP){
var zip = new JSZip(raw_data)
console.log('zip loaded...')
var json = zip.file('magazine.json').data
} else {
var json = raw_data
}
loadJSON($.parseJSON(json), true)
console.log('done.')
};
})(f);
// Read in the image file as a data URL.
if(USE_ZIP){
reader.readAsArrayBuffer(f)
} else {
reader.readAsBinaryString(f)
}
//reader.readAsText(f)
}
}
2013-01-22 18:39:44 +04:00
$(document).ready(function(){
2013-03-06 17:34:55 +04:00
// this is to fix some sort of bug baking things align in a wrong
// way at startup...
// XXX make this fix in the CSS -- most likely stray transition somewhere...
setTransitionDuration($('.magazine, .page'), 0)
2013-02-26 14:35:30 +04:00
// general window behavior...
2013-02-26 02:49:18 +04:00
$(window)
.resize(updateView)
.bind('hashchange', hashChangeHandler)
2013-02-25 22:09:55 +04:00
// keyboard...
2013-01-27 22:41:06 +04:00
$(document)
2013-10-03 18:01:59 +04:00
.keydown(makeKeyboardHandler(KEYBOARD_CONFIG,
function(k){console.log(k)}))
2013-01-23 23:17:29 +04:00
2013-02-25 22:09:55 +04:00
window.MagazineScroller = makeScrollHandler($('.viewer'), {
hScroll: true,
vScroll: false,
// XXX still a bit flacky...
2013-02-25 23:37:28 +04:00
preCallback: function(){stopAnimation($('.magazine'))},
2014-02-04 01:29:52 +04:00
// XXX...
//scrollCallback: function(){ updateNavigator() },
2013-02-25 22:09:55 +04:00
//enableMultiClicks: true,
transitionEasing: 'cubic-bezier(0.33,0.66,0.66,1)',
}).start()
2013-01-22 18:39:44 +04:00
2013-02-25 22:09:55 +04:00
$('.viewer')
2013-02-26 13:56:48 +04:00
.on('scrollCancelled', function(){ setCurrentPage() })
2013-03-06 05:32:49 +04:00
.on('shortClick', handleCaption)
2013-02-25 22:09:55 +04:00
.on('shortClick', handleClick)
2013-02-26 00:25:01 +04:00
.on('longClick', handleLongClick)
2013-02-25 22:09:55 +04:00
.on('swipeLeft', handleSwipeLeft)
.on('swipeRight', handleSwipeRight)
2013-02-26 13:56:48 +04:00
.on('swipeUp swipeDown', function(){ togglePageView('off') })
2013-02-25 22:09:55 +04:00
.on('screenReleased', handleScrollRelease)
2013-02-26 04:17:29 +04:00
.on('pageChanged', updatePageNumberIndicator)
.on('magazineDataLoaded', loadMagazineChrome)
2013-03-06 23:19:15 +04:00
$('.settings.button')
.click(function(){
showInOverlay('< h1 > Not Yey Implemented...< / h1 > ')
})
2013-02-26 04:17:29 +04:00
2013-03-02 19:57:59 +04:00
2013-02-26 04:17:29 +04:00
//loadState()
2013-02-25 22:09:55 +04:00
runMagazineTemplates()
2013-02-26 04:17:29 +04:00
// XXX this still depends on touchSwipe...
//setupBookmarkTouchZones()
2013-01-22 18:39:44 +04:00
togglePageView('on')
2013-02-26 04:17:29 +04:00
// XXX this still depends on touchSwipe...
2014-02-04 00:46:36 +04:00
setupNavigator()
2014-02-04 00:36:12 +04:00
loadMagazineChrome()
2014-02-04 00:46:36 +04:00
setCurrentPage(0)
2014-02-04 01:29:52 +04:00
// XXX STUB...
SNAP_TO_PAGES_IN_RIBBON = true
2013-02-26 04:17:29 +04:00
2013-03-05 15:19:39 +04:00
toggleThemes('none')
2013-02-26 04:17:29 +04:00
2013-03-02 20:08:41 +04:00
setupEditor()
2013-02-26 04:17:29 +04:00
// hide the splash...
setTimeout(function(){
2013-03-06 21:18:54 +04:00
//setCurrentPage(0)
2013-02-26 04:17:29 +04:00
$('.splash').fadeOut()
}, 350)
// remove the spinner...
setTimeout(function(){
$('#spinner').spin(false)
}, 500)
2013-01-31 02:46:02 +04:00
})
2013-02-25 22:09:55 +04:00
2013-01-11 18:48:15 +04:00
< / script >
2013-02-25 22:09:55 +04:00
2013-01-11 18:48:15 +04:00
< / head >
< body >
2013-01-21 05:55:56 +04:00
2013-02-26 14:35:30 +04:00
<!-- Magazine Chrome -->
2013-02-26 04:17:29 +04:00
< div class = "chrome" >
2013-03-02 19:57:59 +04:00
2013-02-26 14:35:30 +04:00
<!-- Splash screen -->
< div class = "splash noSwipe" >
<!-- XXX replace this with a background - image logo... -->
< table width = "100%" height = "100%" > < tr > < td align = "center" valign = "middle" >
<!-- h2><div id="spinner" style="position:relative; display:inline - block; width:50px; height:50px; vertical - align:middle;"></div><i>loading...</i></h2 -->
< div id = "spinner" style = "position:relative; display:inline-block; width:50px; height:50px; vertical-align:middle;" > < / div >
< script >
// add a spinner to the splash...
$('#spinner').spin({
lines: 11, // The number of lines to draw
length: 6, // The length of each line
width: 4, // The line thickness
radius: 8, // The radius of the inner circle
corners: 1, // Corner roundness (0..1)
rotate: 0, // The rotation offset
color: $('.splash #spinner').css('color'), // #rgb or #rrggbb
speed: 1, // Rounds per second
trail: 64, // Afterglow percentage
shadow: false, // Whether to render a shadow
hwaccel: true, // Whether to use hardware acceleration
className: 'spinner', // The CSS class to assign to the spinner
zIndex: 2e9, // The z-index (defaults to 2000000000)
top: 'auto', // Top position relative to parent in px
left: 'auto' // Left position relative to parent in px
})
< / script >
< / td > < / tr > < / table >
< / div >
<!-- Toolbars -->
2013-02-26 04:17:29 +04:00
2013-02-26 14:35:30 +04:00
<!-- Top Toolbar -->
< div class = "top-toolbar" >
< div class = "left-set" >
< div class = "button title" > < a href = "#home" class = "magazine-title-text" > Magazine Title< / a > < / div >
2013-03-05 22:19:48 +04:00
<!-- div class="button title magazine - title - text" contenteditable="false">Magazine Title</div -->
2013-02-26 14:35:30 +04:00
< / div >
< div class = "right-set" >
< div class = "button prev-bookmark" >
< a href = "#prevBookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Previous bookmark (S-Left)< / title >
< path transform = "rotate(-180 18.9697 20.1122)" id = "svg_13" stroke = "#ffffff" d = "m20.467497,20.112247l-8.773763,-14.254913l5.778195,0l8.773788,14.254913l-8.773788,14.25491l-5.778195,0l8.773763,-14.25491z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#afafaf" / >
< / g >
< / svg >
< / a >
2013-02-26 04:17:29 +04:00
< / div >
2013-02-26 14:35:30 +04:00
< div class = "button toggle-bookmark" >
< a href = "#bookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Toggle bookmark (B)< / title >
< rect stroke = "#ffffff" id = "svg_1" height = "28.604868" width = "24.052915" y = "5.858955" x = "8.807377" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#afafaf" / >
< path stroke = "#ffffff" id = "svg_4" d = "m21.762226,3.651895l8.416584,0l0,14.510554l-4.124887,-2.792193l-4.291697,2.792193l0,-14.510554l0,0z" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" stroke-width = "0" fill = "#ff0000" / >
< / g >
< / svg >
< / a >
2013-02-26 04:17:29 +04:00
< / div >
2013-02-26 14:35:30 +04:00
< div class = "button next-bookmark" >
< a href = "#nextBookmark" >
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Next bookmark (S-Right)< / title >
< path stroke = "#ffffff" id = "svg_11" d = "m23.175751,20.132858l-8.773797,-14.254913l5.77823,0l8.773788,14.254913l-8.773788,14.254913l-5.77823,0l8.773797,-14.254913z" fill-opacity = "0" stroke-linecap = "null" stroke-linejoin = "null" stroke-dasharray = "null" fill = "#afafaf" / >
< / g >
< / svg >
< / a >
2013-02-26 04:17:29 +04:00
< / div >
2013-02-26 14:35:30 +04:00
< div class = "button info" >
2013-03-05 15:00:20 +04:00
< a href = "javascript:showInfo()" >
2013-02-26 14:35:30 +04:00
< svg width = "40" height = "40" xmlns = "http://www.w3.org/2000/svg" >
< g >
< title > Info< / title >
< g id = "svg_6" >
< circle fill = "#000000" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" fill-opacity = "0" cx = "20.762543" cy = "20.120354" r = "14.302816" id = "svg_2" stroke = "#ffffff" / >
< text fill = "#ffffff" stroke-width = "0" stroke-dasharray = "null" stroke-linejoin = "null" stroke-linecap = "null" x = "21.029904" y = "21.833322" id = "svg_5" font-size = "24" font-family = "Sans-serif" text-anchor = "middle" xml:space = "preserve" stroke-opacity = "0" transform = "matrix(0.894143 0 0 0.894143 1.91526 8.19192)" stroke = "#000000" > i< / text >
< / g >
< / g >
< / svg >
< / a >
2013-02-26 04:17:29 +04:00
< / div >
2013-03-06 23:19:15 +04:00
< div class = "gear button settings" >
< div >
< div class = "spoke" >
< div > < div > < div > < div > < div > < div > < div > < div > < div >
< / div > < / div > < / div > < / div > < / div > < / div > < / div > < / div > < / div >
< / div >
< / div >
< / div >
2013-02-26 04:17:29 +04:00
< / div >
2013-02-26 14:35:30 +04:00
< / div >
<!-- Top Toolbar (end) -->
<!-- Bottom Toolbar -->
< div class = "bottom-toolbar" >
<!-- this is just an example -->
< div class = "controls" >
< a href = "#home" title = "(Home)" > Cover< / a >
< a href = "#prevBookmark" title = "(S-Left)" > < Bookmark< / a >
< a href = "#prevArticle" title = "(C-Left)" > < Article< / a >
< a href = "#prev" title = "Previous page (Left)" > < Pa< / a > < a href = "#next" title = "Next page (Right)" > ge > < / a >
< a href = "#nextArticle" title = "(C-Right)" > Article > < / a >
< a href = "#nextBookmark" title = "(S-Right)" > Bookmark > < / a >
< a href = "#end" title = "(End)" > End< / a >
< / div >
<!-- position indicator -->
< div class = "navigator" >
< div class = "bar" >
< div class = "indicator" > < / div >
< / div >
< / div >
< div class = "page-number" > 0/0< / div >
< / div >
<!-- Bottom Toolbar (end) -->
2013-02-26 04:17:29 +04:00
2013-02-26 14:35:30 +04:00
<!-- Toolbars (end) -->
2013-02-26 04:17:29 +04:00
2013-02-26 14:35:30 +04:00
<!-- Magazine Viewer - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
2013-02-25 22:09:55 +04:00
< div id = "viewer" class = "viewer" >
2013-01-22 00:36:32 +04:00
2013-03-06 23:19:15 +04:00
2013-02-05 21:14:07 +04:00
< div class = "magazine" name = "PortableMag" >
2013-02-25 22:09:55 +04:00
< div class = "cover page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-29 14:41:28 +04:00
< svg width = "800" height = "600" xmlns = "http://www.w3.org/2000/svg" >
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< g >
2013-01-29 15:27:07 +04:00
< title > PortableMag cover< / title >
2013-01-29 14:41:28 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
<!-- if you do not want a page number just do not include it... -->
<!-- div class="page - number - text">[PAGE NUMBER]</div -->
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
<!-- XXX do we need a Magazine Credits page??? -->
< div class = "article" >
< div class = "cover page" >
2013-02-25 22:09:55 +04:00
< div class = "content" style = "" >
< h1 name = "basics" style = "color:gray;font-size:100px;margin-bottom: 0px;" > The Basics...< / h1 >
2013-01-29 23:08:32 +04:00
< big >
< h2 > Main features< / h2 >
< ul >
< li > Magazines, Covers, Articles and Pages, fully navigable
2013-01-29 23:17:52 +04:00
< li > Three main views: < i style = "color:silver" > Magazine (under development)< / i > Page and Ribbon
2013-01-29 23:08:32 +04:00
< li > Fully linkable structure
2013-01-30 16:47:56 +04:00
< li > Full intuitive Gesture, Mouse or Keyboard navigation
< li > Special #URLs enable full link-based navigation and control
2013-01-29 23:08:32 +04:00
< li > Bookmarks and bookmark navigation
< li > Intuitive navigator widget
2013-01-30 16:47:56 +04:00
< 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)
2013-01-29 23:17:52 +04:00
< i style = "color: silver" >
2013-01-29 23:08:32 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
< div style = "position:absolute; bottom:10px; right:30px" >
2013-01-26 15:05:33 +04:00
< a href = "#next" > get started...< / a > < br >
< / div >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-26 15:05:33 +04:00
< / div >
< / div >
< div class = "page" >
< div class = "content" >
2013-02-25 22:09:55 +04:00
< div class = "header" >
< h1 name = "navigation" > PortableMag Navigation and Linking< / h1 >
2013-01-26 15:05:33 +04:00
< / div >
2013-02-25 22:09:55 +04:00
< div class = "body two-column" >
< div class = "no-column-break" >
< 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 class = "no-column-break" >
< 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 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 >
< p >
< a href = "#config" > configuration demo< / a >
< / p >
< / div >
2013-01-26 15:05:33 +04:00
< / div >
2013-02-25 22:09:55 +04:00
< div class = "footer" >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-26 15:05:33 +04:00
< / div >
2013-01-21 18:04:10 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
<!-- XXX do we need an Article Credits page??? -->
< div class = "page" >
2013-01-26 15:05:33 +04:00
< div class = "content" >
2013-01-30 22:44:18 +04:00
2013-01-31 02:51:01 +04:00
< svg width = "800" height = "600" xmlns = "http://www.w3.org/2000/svg" >
2013-01-30 22:44:18 +04:00
<!-- Created with SVG - edit - http://svg - edit.googlecode.com/ -->
< defs >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< / marker >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< / marker >
< / defs >
< title > PortableMag Anatomy< / title >
< g >
< title > Layer 1< / title >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< g id = "svg_30" >
< g id = "svg_2" >
2013-01-31 02:51:01 +04:00
< 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 >
2013-01-30 22:44:18 +04:00
< / g >
< g id = "svg_29" >
< g id = "svg_11" >
2013-01-31 02:51:01 +04:00
< 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 >
2013-01-30 22:44:18 +04:00
< g id = "svg_19" >
2013-01-31 02:51:01 +04:00
< 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 >
2013-01-30 22:44:18 +04:00
< / g >
< / g >
< g id = "svg_28" >
2013-01-31 02:51:01 +04:00
< 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" / >
2013-01-30 22:44:18 +04:00
< / g >
< / g >
< / g >
< / g >
< / svg >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-26 15:05:33 +04:00
< / 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 >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< div class = "page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-23 16:31:30 +04:00
< a name = "page-3-anchor" > < / a >
2013-03-06 21:18:54 +04:00
< img src = "img.jpg" title = "Image caption..." height = "100%" align = "left" style = "margin-right: 15px" / >
2013-01-26 15:05:33 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< div class = "page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-26 15:05:33 +04:00
< 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 >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
< / div >
< div class = "article" >
< div class = "cover page" >
2013-01-23 04:10:05 +04:00
< div class = "content" name = "ArticleAnchorExample" >
2013-02-25 22:09:55 +04:00
< div class = "header" >
< h1 > Page Templates< / h1 >
< / div >
< div class = "body" >
2013-02-02 06:25:27 +04:00
2013-02-25 22:09:55 +04:00
< h2 > Inline basic macros< / h2 >
< p >
This page contains several examples of inline template/macro fields,
these are HTML elements whos content will get replaced depending on
their class.
< / p >
2013-02-02 06:25:27 +04:00
2013-02-25 22:09:55 +04:00
< h3 > Magazine title< / h3 >
< p >
Any element with the class < i > "magazine-title-text"< / i >
will be replaced with the magazine title (example:
< span class = "magazine-title-text" > [MAGAZINE NAME]< / span > )
< / p >
2013-02-02 05:46:31 +04:00
2013-02-25 22:09:55 +04:00
< h3 > Page Numer< / h3 >
< p >
Any element with a class < i > "page-number-text"< / i > will
get replaced with the page number (example:
< span class = "page-number-text" > #< / span > )
< / p >
< p >
NOTE: the selector < i > div.page-number-text< / i > will
put the number at the bottom of the page, this page
number is a good example of this.
< / p >
< h3 > Article Index< / h3 >
< p >
Any element with the class < i > "article-index"< / i > will
be replaced with the links to all the articles in the
current magazine.
< / p >
< p >
Example:< br >
< div class = "article-index" > [ARTICLE INDEX]< / div >
< / p >
< / div >
< div class = "footer" >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-25 22:09:55 +04:00
< div class = "page dark" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-03-04 16:29:41 +04:00
< div class = "header" contenteditable = "false" >
2013-02-25 22:09:55 +04:00
< h1 > Two column< / h1 >
< / div >
2013-03-04 16:29:41 +04:00
< div class = "body two-column" contenteditable = "false" >
2013-02-25 22:09:55 +04:00
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
< / div >
< div class = "footer" >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-31 02:46:02 +04:00
< / div >
2013-02-25 22:09:55 +04:00
< / div >
< / div >
< div class = "page light" >
< div class = "content" >
2013-03-04 16:29:41 +04:00
< div class = "header" contenteditable = "false" >
2013-02-25 22:09:55 +04:00
< h1 > Three column< / h1 >
2013-01-31 02:46:02 +04:00
< / div >
2013-03-04 16:29:41 +04:00
< div class = "body three-column" contenteditable = "false" >
2013-02-02 05:46:31 +04:00
2013-02-25 22:09:55 +04:00
< p >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
< / p >
< p >
NOTE: at this point, even and odd pages are aligned slightly to the right or left respectively, book-style.
< / p >
< / div >
< div class = "footer" >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-25 22:09:55 +04:00
2013-02-27 16:49:47 +04:00
< div class = "page caption-bottom-arrow dark" >
2013-03-04 16:29:41 +04:00
< div class = "content" contenteditable = "false" >
2013-02-27 16:22:17 +04:00
< h2 > Caption Text< / h2 >
< p >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
< / p >
< / div >
< / div >
2013-02-27 15:26:02 +04:00
< div class = "page page-align-left" >
2013-01-28 03:01:20 +04:00
< div class = "content" style = "background:gold" >
2013-02-07 01:13:16 +04:00
Left-aligned page...
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-27 15:26:02 +04:00
< div class = "page page-align-center" >
2013-01-28 03:25:04 +04:00
< div class = "content" style = "background:yellow; width: 600px" >
2013-02-07 01:13:16 +04:00
Center-aligned page...
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-27 15:26:02 +04:00
< div class = "page page-align-right" >
2013-01-28 03:25:04 +04:00
< div class = "content" style = "background:gold; width: 400px" >
2013-02-07 01:13:16 +04:00
Right-aligned page...
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-03-04 16:29:41 +04:00
< div class = "page caption-bottom-arrow light" contenteditable = "false" >
2013-02-27 16:49:47 +04:00
< div class = "content" >
2013-02-27 15:52:12 +04:00
< h2 > Caption Text< / h2 >
< p >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
< / p >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-03-06 04:06:50 +04:00
2013-03-06 17:43:46 +04:00
< div class = "page image-fit dark" >
< div class = "content" style = "background-image: url('img.jpg')" >
2013-03-06 16:47:38 +04:00
< div class = "caption hidden" contenteditable = "false" >
2013-03-06 17:43:46 +04:00
< h3 > Vertical image fit to viewer< / h3 >
2013-03-06 16:47:38 +04:00
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
2013-03-06 17:43:46 +04:00
< div class = "page image-fit light" >
< div class = "content" style = "background-image: url('landscape.jpg')" >
2013-03-06 04:06:50 +04:00
< div class = "caption hidden" contenteditable = "false" >
2013-03-06 17:43:46 +04:00
< h3 > Horizontal image fit to viewer< / h3 >
2013-03-06 04:06:50 +04:00
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
2013-03-06 16:47:38 +04:00
< div class = "page image-fit-height dark" >
2013-03-06 04:06:50 +04:00
< div class = "content" >
2013-03-06 16:47:38 +04:00
< img src = "img.jpg" >
< div class = "caption hidden" contenteditable = "false" >
< h3 > Image fit to height< / h3 >
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
2013-03-06 04:06:50 +04:00
< / div >
2013-03-06 16:47:38 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-03-06 04:06:50 +04:00
< / div >
< / div >
2013-03-06 21:18:54 +04:00
< div class = "page image-fit-height no-resize dark page-align-right" >
2013-03-06 04:06:50 +04:00
< div class = "content" >
2013-03-06 05:32:49 +04:00
< img src = "img.jpg" >
2013-03-06 04:06:50 +04:00
< div class = "caption hidden" contenteditable = "false" >
2013-03-06 16:47:38 +04:00
< h3 > Image fit to height with no-resize< / h3 >
2013-03-06 04:06:50 +04:00
Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tation ullamcorper suscipit lobortis nisl ut aliquip ex ea commodo consequat. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam liber tempor cum soluta nobis eleifend option congue nihil imperdiet doming id quod mazim placerat facer possim assum. Typi non habent claritatem insitam; est usus legentis in iis qui facit eorum claritatem. Investigationes demonstraverunt lectores legere me lius quod ii legunt saepius.
< / div >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-25 22:09:55 +04:00
<!-- div class="article vertical">
2013-01-21 05:55:56 +04:00
< div class = "cover page" >
2013-01-21 20:05:05 +04:00
< div class = "content" >
2013-01-23 04:10:05 +04:00
< h1 > Article Cover< / h1 >
< a href = "#home" > home< / a > < br >
2013-02-02 05:46:31 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-21 05:55:56 +04:00
< / div >
2013-02-25 22:09:55 +04:00
< div class = "group" >
< div class = "page" >
< div class = "content" >
Page
2013-02-02 05:46:31 +04:00
2013-02-25 22:09:55 +04:00
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
2013-01-21 20:05:05 +04:00
< / div >
2013-02-25 22:09:55 +04:00
< div class = "page" >
< div class = "content" >
Page
2013-02-02 05:46:31 +04:00
2013-02-25 22:09:55 +04:00
< 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 >
2013-01-21 20:05:05 +04:00
< / div >
2013-01-11 18:48:15 +04:00
< / div >
2013-02-25 22:09:55 +04:00
< / div-- >
2013-02-06 23:12:10 +04:00
< div class = "article" >
<!-- page set -->
2013-02-08 21:04:00 +04:00
< div class = "group" style = "background: url(img.jpg) no-repeat right top; background-size: 100% auto; color: white;" >
2013-02-07 01:03:36 +04:00
< div class = "page cover no-resize page-align-left" style = "background:transparent" >
2013-02-06 23:12:10 +04:00
< div class = "content" >
< h1 > Page Set Example< / h1 >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
2013-02-07 01:03:36 +04:00
< div class = "page no-resize" style = "background:transparent" >
2013-02-06 23:12:10 +04:00
< div class = "content" >
Page in set< br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
2013-02-07 01:03:36 +04:00
< div class = "page no-resize page-align-right" style = "background:transparent" >
2013-02-06 23:12:10 +04:00
< div class = "content" >
Page in set< br >
< div class = "page-number-text" > [PAGE NUMBER]< / div >
< / div >
< / div >
< / div >
< / div >
2013-03-02 19:57:59 +04:00
2013-01-11 18:48:15 +04:00
< / div >
2013-01-21 05:55:56 +04:00
2013-02-25 22:09:55 +04:00
< / div >
2013-02-26 14:35:30 +04:00
<!-- Magazine Viewer (end) - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -->
2013-02-26 04:17:29 +04:00
< / div >
2013-02-26 14:35:30 +04:00
<!-- Magazine Chrome (end) -->
2013-01-21 05:55:56 +04:00
2013-01-11 18:48:15 +04:00
< / body >
< / html >
2013-01-26 22:48:59 +04:00
<!-- vim:set ts=4 sw=4 nowrap : -->
