Skip to content

GitLab

T
tools.html2print
Switch branch/tag
Find file Normal viewHistoryPermalink
index.html 3.96 KB
Newer Older
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
1 
<!DOCTYPE HTML>
svilayphiou's avatar
A "Debug" button to show/hide elements boxes.  
svilayphiou committed
2 
<html>
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
3 4 5 6 
<head>
    <meta http-equiv="content-type" content="text/html; charset=utf-8">
    <title>HTML to Print Boilerplate</title>
svilayphiou's avatar
Reorganize project structure.  
svilayphiou committed
7 
    <link rel="stylesheet" type="text/css" href="lib/reset.css" />
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
8 
    <link rel="stylesheet" href="print.less" type="text/less" media="all" charset="utf-8">
svilayphiou's avatar
Reorganize project structure.  
svilayphiou committed
9 
    <link rel="stylesheet" href="lib/jquery-ui-1.10.3/css/smoothness/jquery-ui-1.10.3.custom.min.css" type="text/css" media="all" charset="utf-8">
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
10 11 12 13 14 
</head>
<body>
    <!-- PRINT MARKS -->
    <div id="print-marks">
        <div id="master-page" class="preview-page">
svilayphiou's avatar
Crop marks seem ok.  
svilayphiou committed
15 
            <!--<img src="page-height.png" />-->
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 
            <div class="crop-top-left">
                <div class="crop-right" style="top: 0; right: 0;"></div>
                <div class="crop-bottom" style="bottom: 0cm; left: 0;"></div>
            </div>
            <div class="crop-top-right">
                <div class="crop-left" style="top: 0; left: 0;"></div>
                <div class="crop-bottom" style="bottom: 0; right: 0;"></div>
            </div>
            <div class="crop-bottom-right">
                <div class="crop-left" style="left: 0; bottom: 0;"></div>
                <div class="crop-top" style="right: 0cm; top: 0;"></div>
            </div>
            <div class="crop-bottom-left">
                <div class="crop-right" style="bottom: 0cm; right: 0;"></div>
                <div class="crop-top" style="left: 0cm; top: 0"></div>
            </div>
svilayphiou's avatar
Simplified structure of the document. Now the container of the regions  
svilayphiou committed
32 33 34 35 

            <section id="master-region" class="page">
            </section>
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
36 37 38 39 
            <div class="folio">
            </div>
        </div>
    </div>
svilayphiou's avatar
A class `.moveable` to position absolute objects on the page.  
svilayphiou committed
40
svilayphiou's avatar
A "Debug" button to show/hide elements boxes.  
svilayphiou committed
41 42 43 44 
    <div id="interface">
        <a id="debug" class="button" href="#">Debug</a>
        <a id="preview" class="button" href="#">Preview</a>
    </div>
svilayphiou's avatar
A "Preview" button adding a class "export" to <html> and to see images in high...  
svilayphiou committed
45
svilayphiou's avatar
Content is written in a separate HTML file to simplify editing.  
svilayphiou committed
46 47 48 
    <section id="container">
        <!-- Content will be loaded here with Jquery. -->
    </section>
svilayphiou's avatar
Simplified structure of the document. Now the container of the regions  
svilayphiou committed
49
svilayphiou's avatar
Example of different possible usage of moveable elements combined  
svilayphiou committed
50 51 
    
    <!-- MOVEABLE ELEMENTS -->
svilayphiou's avatar
Moving moveable elements on its own example page.  
svilayphiou committed
52 
    <div class="moveable"  style="top: 7186.65625px; left: 98.9375px; width: 300px; height: 80px; font-size: 2em; font-family: sans-serif;">
svilayphiou's avatar
Example of different possible usage of moveable elements combined  
svilayphiou committed
53 54 55 
        I'm a moveable element.
    </div>
svilayphiou's avatar
Moving moveable elements on its own example page.  
svilayphiou committed
56 
    <div class="moveable"  style="top: 7309.47314453125px; left: 103.95795440673828px; width: 488px; height: 386px; font-size: 2em; font-family: sans-serif;">
svilayphiou's avatar
Example of different possible usage of moveable elements combined  
svilayphiou committed
57 58 59 60 
        <p style="position: absolute;">I'm a moveable image with no scaling. I behave like this by default. Use negative margins on my &lt;img&gt; tag to see another part of my body.</p>
        <img class="" style="margin-top: -150px; margin-left: -100px;" src="collaborative-plotting.png" />
    </div>
svilayphiou's avatar
Moving moveable elements on its own example page.  
svilayphiou committed
61 
    <div class="moveable"  style="top: 8036.11865234375px; left: 85.98197937011719px; width: 492px; height: 126px; font-size: 2em; font-family: sans-serif;">
svilayphiou's avatar
Example of different possible usage of moveable elements combined  
svilayphiou committed
62 63 64 65 
        <p style="position: absolute;">I'm a moveable image fitting my height. Give me the class "fit-height".</p>
        <img class="fit-height" src="collaborative-plotting.png" />
    </div>
svilayphiou's avatar
Moving moveable elements on its own example page.  
svilayphiou committed
66 
    <div class="moveable"  style="top: 8187.71875px; left: 87.9375px; width: 204px; height: 582px; font-size: 2em; font-family: sans-serif;">
svilayphiou's avatar
Example of different possible usage of moveable elements combined  
svilayphiou committed
67 68 69 70 
        <p style="position: absolute;">I'm a moveable image fitting my width. Give me the class "fit-width".</p>
        <img class="fit-width" src="collaborative-plotting.png" />
    </div>
svilayphiou's avatar
Moving moveable elements on its own example page.  
svilayphiou committed
71 
    <div class="moveable"  style="top: 8189.92724609375px; left: 312.8723449707031px; width: 270px; height: 578px; font-size: 2em; font-family: sans-serif;">
svilayphiou's avatar
Example of different possible usage of moveable elements combined  
svilayphiou committed
72 73 74 
        <p style="position: absolute;">I'm a moveable image fitting in my frame. Give me the classes "fit-wdith fit-height".</p>
        <img class="fit-width fit-height" src="collaborative-plotting.png" />
    </div>
svilayphiou's avatar
Page breaks  
svilayphiou committed
75
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
76 
    <!-- JAVASCRIPT -->
svilayphiou's avatar
Reorganize project structure.  
svilayphiou committed
77 78 79 80 
    <script type="text/javascript" src="lib/jquery.min.js"></script>
    <script type="text/javascript" src="lib/jquery-ui-1.10.3/js/jquery-ui-1.10.3.custom.min.js"></script>
    <script type="text/javascript" src="lib/popelt-v1.0.min.js"></script>
    <script type="text/javascript" src="lib/less-1.3.0.min.js"></script>
svilayphiou's avatar
Start of the boilerplate in a TGV, back to its roots.  
svilayphiou committed
81 82 83 
    <script type="text/javascript" src="print.js"></script>
</body>
</html>