regionjs/index.html at master · robinmessage/regionjs · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
<!DOCTYPE html>
<html>
<head>
  <meta charset='utf-8'>

  <title>RegionJS by Robin Message</title>

  <style type="text/css">
    body {
      margin-top: 1.0em;
      background-color: #ddd;
      font-family: Helvetica, Arial, FreeSans, san-serif;
      color: #000000;
    }
    #container {
      margin: 0 auto;
      width: 700px;
    }
    h1 { font-size: 3.8em; color: #558e9a; margin-bottom: 3px; }
    h1 .small { font-size: 0.4em; }
    h1 a { text-decoration: none }
    h2 { font-size: 1.5em; color: #558e9a; }
    h3 { text-align: center; color: #558e9a; }
    a { color: #558e9a; }
    .description { font-size: 1.2em; margin-bottom: 30px; margin-top: 30px; font-style: italic;}
    .download { float: right; }
    pre { background: #000; color: #fff; padding: 15px;}
    hr { border: 0; width: 80%; border-bottom: 1px solid #aaa}
    .footer { text-align:center; padding-top:30px; font-style: italic; }
  </style>
</head>

<body>
  <a href="http://github.com/robinmessage/regionjs"><img style="position: absolute; top: 0; right: 0; border: 0;" src="http://s3.amazonaws.com/github/ribbons/forkme_right_darkblue_121621.png" alt="Fork me on GitHub" /></a>

  <div id="container">

    <div class="download">
      <a href="http://github.com/robinmessage/regionjs/zipball/master">
        <img border="0" width="90" src="http://github.com/images/modules/download/zip.png"></a>
      <a href="http://github.com/robinmessage/regionjs/tarball/master">
        <img border="0" width="90" src="http://github.com/images/modules/download/tar.png"></a>
    </div>

    <h1><a href="http://github.com/robinmessage/regionjs">RegionJS</a>
      <span class="small">by <a href="http://github.com/robinmessage">robinmessage</a></span></h1>

    <div class="description">
      A simple javascript implementation of CSS3 Regions.
    </div>

    <h2>Authors</h2>
<p>Robin Message (Robin.Message@cl.cam.ac.uk)</p>

	<h2>Demo</h2>
	<p>
	View our implementation of the original Adobe demos <a href="samples/viewer.html">here</a>.
	</p>

<p>N.B. This is an incomplete, buggy, trial implementation that doesn't even obey the spec, but does demonstrate the concept.</p>

<h2>Introduction</h2>

<p>When I saw Adobe's CSS regions prototype, I thought, "surely you don't need a whole browser fork to implement that."
It turns out, you do. But, I have implemented the story threading part, which you can see in Adobe's own demonstrations: <a href="samples/simple_single_thread.html">single thread</a>, <a href="samples/simple_multiple_threads.html">multiple threads</a> and <a href="samples/advanced_multi-column-artice.html">multi column article</a>.</p>

<p>The next step for this project is to implement the exclusions module, as these modules work quite well together for advanced print-style layouts.</p>

<p>With the approach I've taken, special styling rules are not needed — just set styles within the regions as you would normally.</p>

<h2>Performance</h2>

<p>Slightly laggy on resizing, but not particularly noticable. Could be improved by only reflowing after a resize is finished (easy) or reflowing incrementally (hard).</p>

<h2>Implementation</h2>

<p>The implementation uses jquery (although only a little, it avoids working around browser bugs.) The Adobe examples are manually soft-hyphenated; a real solution would maybe use hyphenator or something similar, or do hyphenation on the server-side. As long as you hyphenate first, it'll work fine.
The actual process is simple: we fill each region until it overflows, then we cut the HTML up until it fits, then we continue into the next region and so on. The last region is allowed to overflow, so set overflow: hidden if that will look bad.</p>

<p>One feature we couldn't support is custom CSS attributes for reflowing, so instead, you mark a story to be flowed with the CSS class "regioned" and add the custom attribute "region" to name the flow. Regions that can have flow go into them are labelled with the CSS class "region", immediately followed by the name of the region (e.g. A div with class regioned and region main-story will flow into all elements with a class that contains "region main-flow".) Obviously, this is a little hacky — any better suggestions appreciated.</p>

<h2>Todo</h2>

<ul>

<li>Tidy everything up a little.</li>
<li>Add support for exclusions.</li>
<li>Check browser support.</li>
</ul>

    <h2>Download</h2>
    <p>
      You can download this project in either
      <a href="http://github.com/robinmessage/regionjs/zipball/master">zip</a> or
      <a href="http://github.com/robinmessage/regionjs/tarball/master">tar</a> formats.
    </p>
    <p>You can also clone the project with <a href="http://git-scm.com">Git</a>
      by running:
      <pre>$ git clone git://github.com/robinmessage/regionjs</pre>
    </p>

    <div class="footer">
      get the source code on GitHub : <a href="http://github.com/robinmessage/regionjs">robinmessage/regionjs</a>
    </div>

  </div>

  <script type="text/javascript">
var gaJsHost = (("https:" == document.location.protocol) ? "https://ssl." : "http://www.");
document.write(unescape("%3Cscript src='" + gaJsHost + "google-analytics.com/ga.js' type='text/javascript'%3E%3C/script%3E"));
</script>
<script type="text/javascript">
try {
var pageTracker = _gat._getTracker("UA-1890094-3");
pageTracker._trackPageview();
} catch(err) {}</script>
</body>
</html>