Skip to content
Browse files

initial commit

  • Loading branch information...
0 parents commit ee00728f8c9258aac029782025881bc756c5fe1e @jdf committed
11 .project
@@ -0,0 +1,11 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<projectDescription>
+ <name>unicode_for_smarties</name>
+ <comment></comment>
+ <projects>
+ </projects>
+ <buildSpec>
+ </buildSpec>
+ <natures>
+ </natures>
+</projectDescription>
BIN chars-vs-glyphs.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN elements_not_chars.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
400 index.html
@@ -0,0 +1,400 @@
+<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
+ "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
+
+<html xmlns="http://www.w3.org/1999/xhtml">
+
+<head>
+<title>Unicode for Smarties</title>
+<!-- metadata -->
+<meta name="generator" content="S5" />
+<meta name="version" content="S5 1.1" />
+<meta name="presdate" content="20090127" />
+<meta name="author" content="Jonathan Feinberg" />
+<meta name="company" content="IBM Research" />
+<!-- configuration parameters -->
+<meta name="defaultView" content="slideshow" />
+<meta name="controlVis" content="hidden" />
+<!-- style sheet links -->
+<link rel="stylesheet" href="ui/default/slides.css" type="text/css"
+ media="projection" id="slideProj" />
+<link rel="stylesheet" href="ui/default/outline.css" type="text/css"
+ media="screen" id="outlineStyle" />
+<link rel="stylesheet" href="ui/default/print.css" type="text/css"
+ media="print" id="slidePrint" />
+<link rel="stylesheet" href="ui/default/opera.css" type="text/css"
+ media="projection" id="operaFix" />
+<!-- S5 JS -->
+<script src="ui/default/slides.js" type="text/javascript"></script>
+<style type="text/css">
+a {
+ padding-right: 16px;
+ background: right center url(link.png) no-repeat;
+}
+
+.unichar {
+ font-variant: small-caps;
+ border: 1px solid #CCFFCC;
+ padding-left: 4px;
+ padding-right: 4px;
+ margin: 4px;
+}
+
+.f { float: left; }
+.current .unichar { color: black ! important }
+
+.cp {
+ font-family: Consolas, monospace;
+ font-size: 90%;
+ color: #660000;
+}
+</style>
+</head>
+<body>
+
+<div class="layout">
+<div id="controls"><!-- DO NOT EDIT --></div>
+<div id="currentSlide"><!-- DO NOT EDIT --></div>
+<div id="header"></div>
+<div id="footer">
+<h1>CUE/January 27, 2009</h1>
+<h2>Unicode for Smarties</h2>
+</div>
+
+</div>
+
+
+<div class="presentation">
+
+<div class="slide">
+<h1>Unicode for Smarties</h1>
+<h3>Jonathan Feinberg</h3>
+<h4>IBM Research, CUE</h4>
+</div>
+
+<div class="slide">
+<h1>What is Unicode?</h1>
+<p>Unicode is a standard that provides two important things:</p>
+<ol class="incremental">
+ <li>A universal <i>coded character set</i></li>
+ <li>A specification for representing the characters in that set as
+ byte sequences</li>
+</ol>
+<div class="handout"></div>
+</div>
+
+<div class="slide">
+<h1>It is <i>universal</i></h1>
+<div style="text-align: center">
+<p style="text-align: center; margin: auto; font-size: 100px">0x10FFFF</p>
+</div>
+<p class="incremental">There's room for 0x10FFFF (1,114,112) possible characters, of
+which 99,024 are currently used.</p>
+<p class="incremental">(that's about 20 bits)</p>
+<div class="handout">
+<p>There's room for 0x10FFFF (1,114,112) possible characters, of
+which 99,024 are currently used.</p>
+<p>For example, vs. ASCII (127), ISO-8859-1 (256), WINDOWS-1252
+(256), etc.</p>
+</div>
+</div>
+
+<div class="slide">
+<h1>It is <i>unambiguous</i> and <i>efficient</i></h1>
+<p>Unicode text is relatively simple and quick to parse.</p>
+<div class="handout">ISO-2022 requires a stateful parser to detect
+sequences of escape characters, and in which a given octet can mean
+completely different things in different contexts.</div>
+</div>
+
+<div class="slide">
+<h1>The Unicode &ldquo;coded character set&rdquo;</h1>
+<p>What <i>is</i> a &ldquo;coded character set&rdquo;?</p>
+</div>
+
+<div class="slide">
+<h1>The Unicode &ldquo;coded character set&rdquo;</h1>
+<p>What <i>is</i> a &ldquo;character set&rdquo;?</p>
+</div>
+
+<div class="slide">
+<h1>The Unicode &ldquo;coded character set&rdquo;</h1>
+<p>OK, then: what <i>is</i> a &ldquo;character&rdquo;&#8253;</p>
+<ul class="incremental">
+ <li>Characters are entirely <i>abstract</i></li>
+ <li>Characters are <b>not</b> glyphs</li>
+ <li>&ldquo;Characters are the abstract representations of the
+ smallest components of written language that have semantic
+ value.&rdquo;</li>
+</ul>
+</div>
+
+<div class="slide">
+<h1>The Unicode &ldquo;coded character set&rdquo;</h1>
+<p>OK, then: what <i>is</i> a &ldquo;character&rdquo;&#8253;</p>
+<ul>
+ <li>Characters are entirely <i>abstract</i></li>
+ <li>Characters are <b>not</b> glyphs</li>
+ <li>&ldquo;Characters are the abstract representations of the
+ smallest components of written language that have semantic
+ value.&rdquo;</li>
+ <li>Concretely, Unicode characters have a <i>name</i> and many <i>properties</i></li>
+</ul>
+<p>Examples:</p>
+<div class="incremental unichar f">latin&nbsp;capital&nbsp;letter&nbsp;a</div>
+<div class="incremental unichar f">tibetan&nbsp;sign&nbsp;sna&nbsp;ldan</div>
+<div class="incremental unichar f">braille&nbsp;pattern&nbsp;dots-13568</div>
+<div class="incremental unichar f">word&nbsp;joiner</div>
+<div class="incremental unichar f">skull&nbsp;and&nbsp;crossbones&nbsp;</div>
+</div>
+
+<div class="slide" style="clear:both">
+<h1>SKULL AND CROSSBONES, I SAY!</h1>
+<div style="text-align: center">
+<p style="text-align: center; margin: auto; font-size: 300px">&#x2620;</p>
+</div>
+</div>
+
+<div class="slide" style="clear:both">
+<h1>Text elements vs. characters</h1>
+<div style="text-align: center">
+<img src="elements_not_chars.png"/>
+</div>
+</div>
+
+
+<div class="slide">
+<h1>Characters and Glyphs</h1>
+<div style="text-align: center">
+<img src="chars-vs-glyphs.png" alt="Examples of the relationship between characters and glyphs"/>
+</div>
+</div>
+
+
+<div class="slide">
+<h1>The Unicode &ldquo;coded character set&rdquo;</h1>
+<p>What <i>is</i> a &ldquo;character set&rdquo;?</p>
+<p class="incremental">
+ A <i>character set</i> is yet another abstraction: it is a
+ <i>set</i> of <i>characters</i>, an unordered collection
+ of the atoms of written language.
+</p>
+<p class="incremental">
+ It's also known as a <i>character repertoire</i>.
+</p>
+</div>
+
+<div class="slide">
+ <h1>The Unicode &ldquo;coded character set&rdquo;</h1>
+ <p>What <i>is</i> a &ldquo;coded character set&rdquo;?
+ A <i>coded character set</i> assigns a unique
+ integer to each character from a <i>character set</i>.
+ </p>
+ <p class="incremental">
+ The range of numbers used to code the abstract characters
+ is called the <i>codespace</i>.
+ </p>
+ <p class="incremental">
+ A particular integer from the codespace is a <i>code point</i>.
+ </p>
+ <p class="incremental">
+ Once a character is <i>assigned</i> to a a code point,
+ it is an <i>encoded character</i>.
+ </p>
+</div>
+
+<div class="slide">
+ <h1>The Unicode &ldquo;coded character set&rdquo;</h1>
+ <p>What <i>is</i> a &ldquo;coded character set&rdquo;?
+ A <i>coded character set</i> assigns a unique
+ integer to each character from a <i>character set</i>.
+ </p>
+ <p>Examples:</p>
+ <p><span class="unichar"><span class="cp">U+0041</span>&nbsp;latin&nbsp;capital&nbsp;letter&nbsp;a</span></p>
+ <p><span class="unichar"><span class="cp">U+0F83</span>&nbsp;tibetan&nbsp;sign&nbsp;sna&nbsp;ldan</span></p>
+ <p><span class="unichar"><span class="cp">U+28B5</span>&nbsp;braille&nbsp;pattern&nbsp;dots-13568</span></p>
+ <p><span class="unichar"><span class="cp">U+2060</span>&nbsp;word&nbsp;joiner</span></p>
+ <p><span class="unichar"><span class="cp">U+2620</span>&nbsp;skull&nbsp;and&nbsp;crossbones&nbsp;</span></p>
+</div>
+
+<div class="slide">
+ <h1>Text Elements</h1>
+ <p>A Unicode <i>text element</i> is a sequence of encoded characters.</p>
+</div>
+
+<div class="slide">
+ <h1>From a text to some pixels</h1>
+ <div style="text-align:center"><img src="text-to-glyphs.png" alt="How a unicode text might be rendered"/></div>
+</div>
+
+<div class="slide">
+ <h1>Allocation of Code Points</h1>
+ <p>
+ Divided into 16 64K <i>planes</i>.
+ </p>
+ <ul class="incremental">
+ <li>Plane 0: BMP</li>
+ <li>Plane 1: SMP</li>
+ <li>Plane 2: SIP</li>
+ <li>Plane 3-13: reserved</li>
+ <li>Plane 14: SSP</li>
+ <li>Planes 15 &amp; 16: Private Use Planes</li>
+ </ul>
+ <div class="handout">
+ <p>BMP: basic multilingual - comon-use chars for all modern scripts, many historical and rare</p>
+ <p>SMP: supplementary multilingual - historic, invented, e.g., Gothic, musical symbols.
+ Many future scripts will wind up here.</p>
+ <p>SIP: supplementary ideographic - for CJK mostly rare, historic, some cantonese</p>
+ <p>SSP: supplementary special purpose - spillover for format control characters that don't fit in BMP</p>
+ </div>
+</div>
+
+<div class="slide">
+ <h1>The BMP</h1>
+ <div style="text-align: center">
+ <img src="unicode-viz.png" alt="Map of unicode blocks"/>
+ <p>The Basic Multilingual Plane</p>
+ </div>
+</div>
+
+
+<div class="slide">
+<h1>What is Unicode? (Reprise)</h1>
+<p>Unicode is a standard that provides two important things:</p>
+<ol class="incremental">
+ <li>A universal <i>coded character set</i></li>
+ <li>A specification for representing the characters in that set as
+ byte sequences</li>
+</ol>
+<div class="handout"></div>
+</div>
+
+<div class="slide">
+<h1>What is Unicode? (Reprise)</h1>
+<p>Unicode is a standard that provides two important things:</p>
+<ol>
+ <li>A universal <i>coded character set</i></li>
+ <li><b>Three specifications</b> for representing the characters in that set as
+ byte sequences: the <i>encoding forms</i> UTF-32, UTF-16, and UTF-8</li>
+</ol>
+</div>
+
+<div class="slide">
+<h1>The Encoding Forms: Code Units</h1>
+<p>A Unicode <i>string</i> is a sequence of <i>code units</i>. The number
+following the &ldquo;UTF&rdquo; refers to the width, in bits, of
+a code unit for that encoding form.</p>
+</div>
+
+<div class="slide">
+<h1>The Encoding Forms: Non-overlap</h1>
+<p><i>Non-overlap</i> is the top-priority design
+constraint on Unicode encoding forms. It means two things:</p>
+<ol class="incremental">
+ <li>none of the ranges of values for lead, trail, or single code units overlap</li>
+ <li>characters have determinate boundaries (self-synchronization; corruption resistance)</li>
+</ol>
+</div>
+
+<div class="slide">
+<h1>Why non-overlap is desirable</h1>
+ <p>Real-world example: Windows CP-932 encoding</p>
+ <div style="text-align: center">
+ <img style="margin-bottom:24px" src="windows-932-1.png" alt="Characters with overlapping code units"/>
+ <br/>
+ <img src="windows-932-2.png" alt="illustration of inefficiencies in decoding same"/>
+ </div>
+</div>
+
+<div class="slide">
+<h1>Unicode Transformation Formats</h1>
+<ul>
+ <li>UTF-32: simple; fat</li>
+ <li>UTF-16: optimized for BMP; balanced in efficiency and simplicity; sorts wrong</li>
+ <li>UTF-8: optimized for Latin; ASCII transparent; sorts correctly</li>
+</ul>
+</div>
+
+<div class="slide">
+ <h1>Pragmatic Unicode</h1>
+ <p>
+ Deal with text as an abstract sequence of Unicode code points.
+ Do not think about bytes, chars, or unsigned integers.
+ </p>
+ <p class="incremental">
+ Excellent Unicode support: Python 3, Perl 5.8.x
+ </p>
+ <p class="incremental">
+ Good enough Unicode support: Java, C#, C, C++, Python 2, Perl 5.6.x, O&apos;Caml, Haskell
+ </p>
+ <p class="incremental">
+ Not impossible: O&apos;Caml
+ </p>
+ <p class="incremental">
+ Feh: Ruby, Erlang
+ </p>
+</div>
+
+<div class="slide">
+<h1>Pragmatic Encoding for the Java Wonk</h1>
+<p>
+ Briefly:
+</p>
+<ul class="incremental">
+ <li>
+ <code>InputStream</code>/<code>OutputStream</code> are <i>plumbing</i>.
+ Don't use them for reading and writing <i>text</i>.
+ </li>
+ <li>
+ Use the <code>Reader</code>/<code>Writer</code> classes.
+ </li>
+ <li>
+ Be explicit about the encoding you wish to use, or else you'll get
+ the default (windows-1252 on my box).
+ </li>
+</ul>
+</div>
+
+<div class="slide">
+<h1>How Not To Write Text</h1>
+<h2>No.</h2>
+<pre><code class="bad">final String someThaiText = "Thai: \u0e01\u0e02\u0e03";
+PrintStream out =
+ new PrintStream(new FileOutputStream("garbage.txt"));
+out.println(someThaiText);
+out.close();</code></pre>
+<h2>Result:</h2>
+<pre>54 68 61 69 3A 20 3F 3F 3F 0D 0A</pre>
+<pre> T h a i : _ ? ? ? cr lf</pre>
+</div>
+
+<div class="slide">
+<h1>How Not To Write Text, Part &#xFFFD;</h1>
+<h2>No.</h2>
+<pre><code class="bad">final String someThaiText = "Thai: \u0e01\u0e02\u0e03";
+PrintWriter out = new PrintWriter(
+ new OutputStreamWriter(new FileOutputStream("thai.txt")));
+out.println(someThaiText);
+out.close();</code></pre>
+<h2>Result:</h2>
+<pre>54 68 61 69 3A 20 3F 3F 3F 0D 0A</pre>
+<pre> T h a i : _ ? ? ? cr lf</pre>
+</div>
+
+<div class="slide">
+<h1>How To Write Text</h1>
+<h2>Yes.</h2>
+<pre><code >final String someThaiText = "Thai: \u0e01\u0e02\u0e03";
+PrintWriter out = new PrintWriter(
+ new OutputStreamWriter(
+ new FileOutputStream("thai.txt")<span style="color:orange">, "UTF-8"</span>));
+out.println(someThaiText);
+out.close();</code></pre>
+<h2>Result:</h2>
+<pre>54 68 61 69 3A 20 E0 B8 81 E0 B8 82 E0 B8 83 0D 0A</pre>
+<pre> T h a i : _ ก ข ฃ cr lf</pre>
+</div>
+
+</div>
+
+</body>
+</html>
BIN link.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN text-to-glyphs.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN ui/default/blank.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN ui/default/bodybg.gif
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
23 ui/default/framing.css
@@ -0,0 +1,23 @@
+/* The following styles size, place, and layer the slide components.
+ Edit these if you want to change the overall slide layout.
+ The commented lines can be uncommented (and modified, if necessary)
+ to help you with the rearrangement process. */
+
+/* target = 1024x768 */
+
+div#header, div#footer, .slide {width: 100%; top: 0; left: 0;}
+div#header {top: 0; height: 3em; z-index: 1;}
+div#footer {top: auto; bottom: 0; height: 2.5em; z-index: 5;}
+.slide {top: 0; width: 92%; padding: 3.5em 4% 4%; z-index: 2; list-style: none;}
+div#controls {left: 50%; bottom: 0; width: 50%; z-index: 100;}
+div#controls form {position: absolute; bottom: 0; right: 0; width: 100%;
+ margin: 0;}
+#currentSlide {position: absolute; width: 10%; left: 45%; bottom: 1em; z-index: 10;}
+html>body #currentSlide {position: fixed;}
+
+/*
+div#header {background: #FCC;}
+div#footer {background: #CCF;}
+div#controls {background: #BBD;}
+div#currentSlide {background: #FFC;}
+*/
42 ui/default/iepngfix.htc
@@ -0,0 +1,42 @@
+<public:component>
+<public:attach event="onpropertychange" onevent="doFix()" />
+
+<script>
+
+// IE5.5+ PNG Alpha Fix v1.0 by Angus Turnbull http://www.twinhelix.com
+// Free usage permitted as long as this notice remains intact.
+
+// This must be a path to a blank image. That's all the configuration you need here.
+var blankImg = 'ui/default/blank.gif';
+
+var f = 'DXImageTransform.Microsoft.AlphaImageLoader';
+
+function filt(s, m) {
+ if (filters[f]) {
+ filters[f].enabled = s ? true : false;
+ if (s) with (filters[f]) { src = s; sizingMethod = m }
+ } else if (s) style.filter = 'progid:'+f+'(src="'+s+'",sizingMethod="'+m+'")';
+}
+
+function doFix() {
+ if ((parseFloat(navigator.userAgent.match(/MSIE (\S+)/)[1]) < 5.5) ||
+ (event && !/(background|src)/.test(event.propertyName))) return;
+
+ if (tagName == 'IMG') {
+ if ((/\.png$/i).test(src)) {
+ filt(src, 'image'); // was 'scale'
+ src = blankImg;
+ } else if (src.indexOf(blankImg) < 0) filt();
+ } else if (style.backgroundImage) {
+ if (style.backgroundImage.match(/^url[("']+(.*\.png)[)"']+$/i)) {
+ var s = RegExp.$1;
+ style.backgroundImage = '';
+ filt(s, 'crop');
+ } else filt();
+ }
+}
+
+doFix();
+
+</script>
+</public:component>
7 ui/default/opera.css
@@ -0,0 +1,7 @@
+/* DO NOT CHANGE THESE unless you really want to break Opera Show */
+.slide {
+ visibility: visible !important;
+ position: static !important;
+ page-break-before: always;
+}
+#slide0 {page-break-before: avoid;}
15 ui/default/outline.css
@@ -0,0 +1,15 @@
+/* don't change this unless you want the layout stuff to show up in the outline view! */
+
+.layout div, #footer *, #controlForm * {display: none;}
+#footer, #controls, #controlForm, #navLinks, #toggle {
+ display: block; visibility: visible; margin: 0; padding: 0;}
+#toggle {float: right; padding: 0.5em;}
+html>body #toggle {position: fixed; top: 0; right: 0;}
+
+/* making the outline look pretty-ish */
+
+#slide0 h1, #slide0 h2, #slide0 h3, #slide0 h4 {border: none; margin: 0;}
+#slide0 h1 {padding-top: 1.5em;}
+.slide h1 {margin: 1.5em 0 0; padding-top: 0.25em;
+ border-top: 1px solid #888; border-bottom: 1px solid #AAA;}
+#toggle {border: 1px solid; border-width: 0 0 1px 1px; background: #FFF;}
314 ui/default/pretty.css
@@ -0,0 +1,314 @@
+/* Following are the presentation styles -- edit away! */
+body {
+ background: #FFF;
+ color: #000;
+ font-size: 2em;
+ font-family: Calibri
+}
+
+p {
+ display: block;
+ }
+
+:link,:visited {
+ text-decoration: none;
+ color: #00C;
+}
+
+#controls :active {
+ color: #88A !important;
+}
+
+#controls :focus {
+ outline: 1px dotted #227;
+}
+
+h1,h2,h3,h4 {
+ font-size: 100%;
+ margin: 0;
+ padding: 0;
+ font-weight: inherit;
+}
+
+ul,pre {
+ margin: 0;
+ line-height: 1em;
+}
+
+html,body {
+ margin: 0;
+ padding: 0;
+}
+
+blockquote,q {
+ font-style: italic;
+}
+
+blockquote {
+ padding: 0 2em 0.5em;
+ margin: 0 1.5em 0.5em;
+ text-align: center;
+ font-size: 1em;
+}
+
+blockquote p {
+ margin: 0;
+}
+
+blockquote i {
+ font-style: normal;
+}
+
+blockquote b {
+ display: block;
+ margin-top: 0.5em;
+ font-weight: normal;
+ font-size: smaller;
+ font-style: normal;
+}
+
+blockquote b i {
+ font-style: italic;
+}
+
+kbd {
+ font-weight: bold;
+ font-size: 1em;
+}
+
+sup {
+ font-size: smaller;
+ line-height: 1px;
+}
+
+.slide code {
+ padding: 2px 0.25em;
+ font-weight: bold;
+ color: #533;
+ font-family: Consolas, monospace;
+}
+
+.slide code.bad,code del {
+ color: red;
+}
+
+.slide code.old {
+ color: silver;
+}
+
+.slide pre {
+ padding: 0;
+ margin: 0.25em 0 0.5em 0.5em;
+ color: #533;
+ font-size: 90%;
+ font-family: Consolas, monospace;
+}
+
+.slide pre code {
+ display: block;
+}
+
+.slide ul {
+ margin-left: 5%;
+ margin-right: 7%;
+ list-style: disc;
+}
+
+.slide li {
+ margin-top: 0.75em;
+ margin-right: 0;
+}
+
+.slide ul ul {
+ line-height: 1;
+}
+
+.slide ul ul li {
+ margin: .2em;
+ font-size: 85%;
+ list-style: square;
+}
+
+.slide img.leader {
+ display: block;
+ margin: 0 auto;
+}
+
+div#header,div#footer {
+ background: #005;
+ color: #AAB;
+ font-family: Calibri, sans-serif;
+}
+
+div#header {
+ background: #005;
+ line-height: 1px;
+}
+
+div#footer {
+ font-size: 0.5em;
+ font-weight: bold;
+ padding: 1em 0;
+}
+
+#footer h1,#footer h2 {
+ display: block;
+ padding: 0 1em;
+}
+
+#footer h2 {
+ font-style: italic;
+}
+
+div.long {
+ font-size: 0.75em;
+}
+
+.slide h1 {
+ position: absolute;
+ top: 0.5em;
+ left: 0px;/*87px;*/
+ z-index: 1;
+ margin: 0;
+ padding: 0.3em 0 0 20px;
+ white-space: nowrap;
+ font: bold 150%/ 1em Calibri, sans-serif;
+ text-transform: capitalize;
+ color: #DDE;
+ background: #005;
+}
+
+.slide h3 {
+ font-size: 130%;
+}
+
+h1 abbr {
+ font-variant: small-caps;
+}
+
+div#controls {
+ position: absolute;
+ left: 50%;
+ bottom: 0;
+ width: 50%;
+ text-align: right;
+ font: bold 0.9em Calibri, sans-serif;
+}
+
+html>body div#controls {
+ position: fixed;
+ padding: 0 0 1em 0;
+ top: auto;
+}
+
+div#controls form {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ width: 100%;
+ margin: 0;
+ padding: 0;
+}
+
+#controls #navLinks a {
+ padding: 0;
+ margin: 0 0.5em;
+ background: #005;
+ border: none;
+ color: #779;
+ cursor: pointer;
+}
+
+#controls #navList {
+ height: 1em;
+}
+
+#controls #navList #jumplist {
+ position: absolute;
+ bottom: 0;
+ right: 0;
+ background: #DDD;
+ color: #227;
+}
+
+#currentSlide {
+ text-align: center;
+ font-size: 0.5em;
+ color: #449;
+}
+
+#slide0 {
+ padding-top: 3.5em;
+ font-size: 90%;
+}
+
+#slide0 h1 {
+ position: static;
+ margin: 1em 0 0;
+ padding: 0;
+ font: bold 2em Calibri, sans-serif;
+ white-space: normal;
+ color: #000;
+ background: transparent;
+}
+
+#slide0 h2 {
+ font: bold italic 1em Calibri, sans-serif;
+ margin: 0.25em;
+}
+
+#slide0 h3 {
+ margin-top: 1.5em;
+ font-size: 1.5em;
+}
+
+#slide0 h4 {
+ margin-top: 0;
+ font-size: 1em;
+}
+
+ul.urls {
+ list-style: none;
+ display: inline;
+ margin: 0;
+}
+
+.urls li {
+ display: inline;
+ margin: 0;
+}
+
+.note {
+ display: none;
+}
+
+.external {
+ border-bottom: 1px dotted gray;
+}
+
+html>body .external {
+ border-bottom: none;
+}
+
+.external:after {
+ content: " \274F";
+ font-size: smaller;
+ color: #77B;
+}
+
+.incremental,.incremental *,.incremental * :after {
+ color: #DDE !important;
+ visibility: visible;
+}
+
+img.incremental {
+ visibility: hidden;
+}
+
+.slide .current {
+ color: #B02;
+}
+/* diagnostics
+
+li:after {content: " [" attr(class) "]"; color: #F88;}
+ */
1 ui/default/print.css
@@ -0,0 +1 @@
+/* The following rule is necessary to have all slides appear in print! DO NOT REMOVE IT! */
9 ui/default/s5-core.css
@@ -0,0 +1,9 @@
+/* Do not edit or override these styles! The system will likely break if you do. */
+
+div#header, div#footer, div#controls, .slide {position: absolute;}
+html>body div#header, html>body div#footer,
+ html>body div#controls, html>body .slide {position: fixed;}
+.handout {display: none;}
+.layout {display: block;}
+.slide, .hideme, .incremental {visibility: hidden;}
+#slide0 {visibility: visible;}
3 ui/default/slides.css
@@ -0,0 +1,3 @@
+@import url(s5-core.css); /* required to make the slide show run at all */
+@import url(framing.css); /* sets basic placement and size of slide components */
+@import url(pretty.css); /* stuff that makes the slides look better than blah */
553 ui/default/slides.js
@@ -0,0 +1,553 @@
+// S5 v1.1 slides.js -- released into the Public Domain
+//
+// Please see http://www.meyerweb.com/eric/tools/s5/credits.html for information
+// about all the wonderful and talented contributors to this code!
+
+var undef;
+var slideCSS = '';
+var snum = 0;
+var smax = 1;
+var incpos = 0;
+var number = undef;
+var s5mode = true;
+var defaultView = 'slideshow';
+var controlVis = 'visible';
+
+var isIE = navigator.appName == 'Microsoft Internet Explorer' && navigator.userAgent.indexOf('Opera') < 1 ? 1 : 0;
+var isOp = navigator.userAgent.indexOf('Opera') > -1 ? 1 : 0;
+var isGe = navigator.userAgent.indexOf('Gecko') > -1 && navigator.userAgent.indexOf('Safari') < 1 ? 1 : 0;
+
+function hasClass(object, className) {
+ if (!object.className) return false;
+ return (object.className.search('(^|\\s)' + className + '(\\s|$)') != -1);
+}
+
+function hasValue(object, value) {
+ if (!object) return false;
+ return (object.search('(^|\\s)' + value + '(\\s|$)') != -1);
+}
+
+function removeClass(object,className) {
+ if (!object) return;
+ object.className = object.className.replace(new RegExp('(^|\\s)'+className+'(\\s|$)'), RegExp.$1+RegExp.$2);
+}
+
+function addClass(object,className) {
+ if (!object || hasClass(object, className)) return;
+ if (object.className) {
+ object.className += ' '+className;
+ } else {
+ object.className = className;
+ }
+}
+
+function GetElementsWithClassName(elementName,className) {
+ var allElements = document.getElementsByTagName(elementName);
+ var elemColl = new Array();
+ for (var i = 0; i< allElements.length; i++) {
+ if (hasClass(allElements[i], className)) {
+ elemColl[elemColl.length] = allElements[i];
+ }
+ }
+ return elemColl;
+}
+
+function isParentOrSelf(element, id) {
+ if (element == null || element.nodeName=='BODY') return false;
+ else if (element.id == id) return true;
+ else return isParentOrSelf(element.parentNode, id);
+}
+
+function nodeValue(node) {
+ var result = "";
+ if (node.nodeType == 1) {
+ var children = node.childNodes;
+ for (var i = 0; i < children.length; ++i) {
+ result += nodeValue(children[i]);
+ }
+ }
+ else if (node.nodeType == 3) {
+ result = node.nodeValue;
+ }
+ return(result);
+}
+
+function slideLabel() {
+ var slideColl = GetElementsWithClassName('*','slide');
+ var list = document.getElementById('jumplist');
+ smax = slideColl.length;
+ for (var n = 0; n < smax; n++) {
+ var obj = slideColl[n];
+
+ var did = 'slide' + n.toString();
+ obj.setAttribute('id',did);
+ if (isOp) continue;
+
+ var otext = '';
+ var menu = obj.firstChild;
+ if (!menu) continue; // to cope with empty slides
+ while (menu && menu.nodeType == 3) {
+ menu = menu.nextSibling;
+ }
+ if (!menu) continue; // to cope with slides with only text nodes
+
+ var menunodes = menu.childNodes;
+ for (var o = 0; o < menunodes.length; o++) {
+ otext += nodeValue(menunodes[o]);
+ }
+ list.options[list.length] = new Option(n + ' : ' + otext, n);
+ }
+}
+
+function currentSlide() {
+ var cs;
+ if (document.getElementById) {
+ cs = document.getElementById('currentSlide');
+ } else {
+ cs = document.currentSlide;
+ }
+ cs.innerHTML = '<span id="csHere">' + snum + '<\/span> ' +
+ '<span id="csSep">\/<\/span> ' +
+ '<span id="csTotal">' + (smax-1) + '<\/span>';
+ if (snum == 0) {
+ cs.style.visibility = 'hidden';
+ } else {
+ cs.style.visibility = 'visible';
+ }
+}
+
+function go(step) {
+ if (document.getElementById('slideProj').disabled || step == 0) return;
+ var jl = document.getElementById('jumplist');
+ var cid = 'slide' + snum;
+ var ce = document.getElementById(cid);
+ if (incrementals[snum].length > 0) {
+ for (var i = 0; i < incrementals[snum].length; i++) {
+ removeClass(incrementals[snum][i], 'current');
+ removeClass(incrementals[snum][i], 'incremental');
+ }
+ }
+ if (step != 'j') {
+ snum += step;
+ lmax = smax - 1;
+ if (snum > lmax) snum = lmax;
+ if (snum < 0) snum = 0;
+ } else
+ snum = parseInt(jl.value);
+ var nid = 'slide' + snum;
+ var ne = document.getElementById(nid);
+ if (!ne) {
+ ne = document.getElementById('slide0');
+ snum = 0;
+ }
+ if (step < 0) {incpos = incrementals[snum].length} else {incpos = 0;}
+ if (incrementals[snum].length > 0 && incpos == 0) {
+ for (var i = 0; i < incrementals[snum].length; i++) {
+ if (hasClass(incrementals[snum][i], 'current'))
+ incpos = i + 1;
+ else
+ addClass(incrementals[snum][i], 'incremental');
+ }
+ }
+ if (incrementals[snum].length > 0 && incpos > 0)
+ addClass(incrementals[snum][incpos - 1], 'current');
+ ce.style.visibility = 'hidden';
+ ne.style.visibility = 'visible';
+ jl.selectedIndex = snum;
+ currentSlide();
+ number = 0;
+}
+
+function goTo(target) {
+ if (target >= smax || target == snum) return;
+ go(target - snum);
+}
+
+function subgo(step) {
+ if (step > 0) {
+ removeClass(incrementals[snum][incpos - 1],'current');
+ removeClass(incrementals[snum][incpos], 'incremental');
+ addClass(incrementals[snum][incpos],'current');
+ incpos++;
+ } else {
+ incpos--;
+ removeClass(incrementals[snum][incpos],'current');
+ addClass(incrementals[snum][incpos], 'incremental');
+ addClass(incrementals[snum][incpos - 1],'current');
+ }
+}
+
+function toggle() {
+ var slideColl = GetElementsWithClassName('*','slide');
+ var slides = document.getElementById('slideProj');
+ var outline = document.getElementById('outlineStyle');
+ if (!slides.disabled) {
+ slides.disabled = true;
+ outline.disabled = false;
+ s5mode = false;
+ fontSize('1em');
+ for (var n = 0; n < smax; n++) {
+ var slide = slideColl[n];
+ slide.style.visibility = 'visible';
+ }
+ } else {
+ slides.disabled = false;
+ outline.disabled = true;
+ s5mode = true;
+ fontScale();
+ for (var n = 0; n < smax; n++) {
+ var slide = slideColl[n];
+ slide.style.visibility = 'hidden';
+ }
+ slideColl[snum].style.visibility = 'visible';
+ }
+}
+
+function showHide(action) {
+ var obj = GetElementsWithClassName('*','hideme')[0];
+ switch (action) {
+ case 's': obj.style.visibility = 'visible'; break;
+ case 'h': obj.style.visibility = 'hidden'; break;
+ case 'k':
+ if (obj.style.visibility != 'visible') {
+ obj.style.visibility = 'visible';
+ } else {
+ obj.style.visibility = 'hidden';
+ }
+ break;
+ }
+}
+
+// 'keys' code adapted from MozPoint (http://mozpoint.mozdev.org/)
+function keys(key) {
+ if (!key) {
+ key = event;
+ key.which = key.keyCode;
+ }
+ if (key.which == 84) {
+ toggle();
+ return;
+ }
+ if (s5mode) {
+ switch (key.which) {
+ case 10: // return
+ case 13: // enter
+ if (window.event && isParentOrSelf(window.event.srcElement, 'controls')) return;
+ if (key.target && isParentOrSelf(key.target, 'controls')) return;
+ if(number != undef) {
+ goTo(number);
+ break;
+ }
+ case 32: // spacebar
+ case 34: // page down
+ case 39: // rightkey
+ case 40: // downkey
+ if(number != undef) {
+ go(number);
+ } else if (!incrementals[snum] || incpos >= incrementals[snum].length) {
+ go(1);
+ } else {
+ subgo(1);
+ }
+ break;
+ case 33: // page up
+ case 37: // leftkey
+ case 38: // upkey
+ if(number != undef) {
+ go(-1 * number);
+ } else if (!incrementals[snum] || incpos <= 0) {
+ go(-1);
+ } else {
+ subgo(-1);
+ }
+ break;
+ case 36: // home
+ goTo(0);
+ break;
+ case 35: // end
+ goTo(smax-1);
+ break;
+ case 67: // c
+ showHide('k');
+ break;
+ }
+ if (key.which < 48 || key.which > 57) {
+ number = undef;
+ } else {
+ if (window.event && isParentOrSelf(window.event.srcElement, 'controls')) return;
+ if (key.target && isParentOrSelf(key.target, 'controls')) return;
+ number = (((number != undef) ? number : 0) * 10) + (key.which - 48);
+ }
+ }
+ return false;
+}
+
+function clicker(e) {
+ number = undef;
+ var target;
+ if (window.event) {
+ target = window.event.srcElement;
+ e = window.event;
+ } else target = e.target;
+ if (target.getAttribute('href') != null || hasValue(target.rel, 'external') || isParentOrSelf(target, 'controls') || isParentOrSelf(target,'embed') || isParentOrSelf(target,'object')) return true;
+ if (!e.which || e.which == 1) {
+ if (!incrementals[snum] || incpos >= incrementals[snum].length) {
+ go(1);
+ } else {
+ subgo(1);
+ }
+ }
+}
+
+function findSlide(hash) {
+ var target = null;
+ var slides = GetElementsWithClassName('*','slide');
+ for (var i = 0; i < slides.length; i++) {
+ var targetSlide = slides[i];
+ if ( (targetSlide.name && targetSlide.name == hash)
+ || (targetSlide.id && targetSlide.id == hash) ) {
+ target = targetSlide;
+ break;
+ }
+ }
+ while(target != null && target.nodeName != 'BODY') {
+ if (hasClass(target, 'slide')) {
+ return parseInt(target.id.slice(5));
+ }
+ target = target.parentNode;
+ }
+ return null;
+}
+
+function slideJump() {
+ if (window.location.hash == null) return;
+ var sregex = /^#slide(\d+)$/;
+ var matches = sregex.exec(window.location.hash);
+ var dest = null;
+ if (matches != null) {
+ dest = parseInt(matches[1]);
+ } else {
+ dest = findSlide(window.location.hash.slice(1));
+ }
+ if (dest != null)
+ go(dest - snum);
+}
+
+function fixLinks() {
+ var thisUri = window.location.href;
+ thisUri = thisUri.slice(0, thisUri.length - window.location.hash.length);
+ var aelements = document.getElementsByTagName('A');
+ for (var i = 0; i < aelements.length; i++) {
+ var a = aelements[i].href;
+ var slideID = a.match('\#slide[0-9]{1,2}');
+ if ((slideID) && (slideID[0].slice(0,1) == '#')) {
+ var dest = findSlide(slideID[0].slice(1));
+ if (dest != null) {
+ if (aelements[i].addEventListener) {
+ aelements[i].addEventListener("click", new Function("e",
+ "if (document.getElementById('slideProj').disabled) return;" +
+ "go("+dest+" - snum); " +
+ "if (e.preventDefault) e.preventDefault();"), true);
+ } else if (aelements[i].attachEvent) {
+ aelements[i].attachEvent("onclick", new Function("",
+ "if (document.getElementById('slideProj').disabled) return;" +
+ "go("+dest+" - snum); " +
+ "event.returnValue = false;"));
+ }
+ }
+ }
+ }
+}
+
+function externalLinks() {
+ if (!document.getElementsByTagName) return;
+ var anchors = document.getElementsByTagName('a');
+ for (var i=0; i<anchors.length; i++) {
+ var anchor = anchors[i];
+ if (anchor.getAttribute('href') && hasValue(anchor.rel, 'external')) {
+ anchor.target = '_blank';
+ addClass(anchor,'external');
+ }
+ }
+}
+
+function createControls() {
+ var controlsDiv = document.getElementById("controls");
+ if (!controlsDiv) return;
+ var hider = ' onmouseover="showHide(\'s\');" onmouseout="showHide(\'h\');"';
+ var hideDiv, hideList = '';
+ if (controlVis == 'hidden') {
+ hideDiv = hider;
+ } else {
+ hideList = hider;
+ }
+ controlsDiv.innerHTML = '<form action="#" id="controlForm"' + hideDiv + '>' +
+ '<div id="navLinks">' +
+ '<a accesskey="t" id="toggle" href="javascript:toggle();">&#216;<\/a>' +
+ '<a accesskey="z" id="prev" href="javascript:go(-1);">&laquo;<\/a>' +
+ '<a accesskey="x" id="next" href="javascript:go(1);">&raquo;<\/a>' +
+ '<div id="navList"' + hideList + '><select id="jumplist" onchange="go(\'j\');"><\/select><\/div>' +
+ '<\/div><\/form>';
+ if (controlVis == 'hidden') {
+ var hidden = document.getElementById('navLinks');
+ } else {
+ var hidden = document.getElementById('jumplist');
+ }
+ addClass(hidden,'hideme');
+}
+
+function fontScale() { // causes layout problems in FireFox that get fixed if browser's Reload is used; same may be true of other Gecko-based browsers
+ if (!s5mode) return false;
+ var vScale = 22; // both yield 32 (after rounding) at 1024x768
+ var hScale = 32; // perhaps should auto-calculate based on theme's declared value?
+ if (window.innerHeight) {
+ var vSize = window.innerHeight;
+ var hSize = window.innerWidth;
+ } else if (document.documentElement.clientHeight) {
+ var vSize = document.documentElement.clientHeight;
+ var hSize = document.documentElement.clientWidth;
+ } else if (document.body.clientHeight) {
+ var vSize = document.body.clientHeight;
+ var hSize = document.body.clientWidth;
+ } else {
+ var vSize = 700; // assuming 1024x768, minus chrome and such
+ var hSize = 1024; // these do not account for kiosk mode or Opera Show
+ }
+ var newSize = Math.min(Math.round(vSize/vScale),Math.round(hSize/hScale));
+ fontSize(newSize + 'px');
+ if (isGe) { // hack to counter incremental reflow bugs
+ var obj = document.getElementsByTagName('body')[0];
+ obj.style.display = 'none';
+ obj.style.display = 'block';
+ }
+}
+
+function fontSize(value) {
+ if (!(s5ss = document.getElementById('s5ss'))) {
+ if (!isIE) {
+ document.getElementsByTagName('head')[0].appendChild(s5ss = document.createElement('style'));
+ s5ss.setAttribute('media','screen, projection');
+ s5ss.setAttribute('id','s5ss');
+ } else {
+ document.createStyleSheet();
+ document.s5ss = document.styleSheets[document.styleSheets.length - 1];
+ }
+ }
+ if (!isIE) {
+ while (s5ss.lastChild) s5ss.removeChild(s5ss.lastChild);
+ s5ss.appendChild(document.createTextNode('body {font-size: ' + value + ' !important;}'));
+ } else {
+ document.s5ss.addRule('body','font-size: ' + value + ' !important;');
+ }
+}
+
+function notOperaFix() {
+ slideCSS = document.getElementById('slideProj').href;
+ var slides = document.getElementById('slideProj');
+ var outline = document.getElementById('outlineStyle');
+ slides.setAttribute('media','screen');
+ outline.disabled = true;
+ if (isGe) {
+ slides.setAttribute('href','null'); // Gecko fix
+ slides.setAttribute('href',slideCSS); // Gecko fix
+ }
+ if (isIE && document.styleSheets && document.styleSheets[0]) {
+ document.styleSheets[0].addRule('img', 'behavior: url(ui/default/iepngfix.htc)');
+ document.styleSheets[0].addRule('div', 'behavior: url(ui/default/iepngfix.htc)');
+ document.styleSheets[0].addRule('.slide', 'behavior: url(ui/default/iepngfix.htc)');
+ }
+}
+
+function getIncrementals(obj) {
+ var incrementals = new Array();
+ if (!obj)
+ return incrementals;
+ var children = obj.childNodes;
+ for (var i = 0; i < children.length; i++) {
+ var child = children[i];
+ if (hasClass(child, 'incremental')) {
+ if (child.nodeName == 'OL' || child.nodeName == 'UL') {
+ removeClass(child, 'incremental');
+ for (var j = 0; j < child.childNodes.length; j++) {
+ if (child.childNodes[j].nodeType == 1) {
+ addClass(child.childNodes[j], 'incremental');
+ }
+ }
+ } else {
+ incrementals[incrementals.length] = child;
+ removeClass(child,'incremental');
+ }
+ }
+ if (hasClass(child, 'show-first')) {
+ if (child.nodeName == 'OL' || child.nodeName == 'UL') {
+ removeClass(child, 'show-first');
+ if (child.childNodes[isGe].nodeType == 1) {
+ removeClass(child.childNodes[isGe], 'incremental');
+ }
+ } else {
+ incrementals[incrementals.length] = child;
+ }
+ }
+ incrementals = incrementals.concat(getIncrementals(child));
+ }
+ return incrementals;
+}
+
+function createIncrementals() {
+ var incrementals = new Array();
+ for (var i = 0; i < smax; i++) {
+ incrementals[i] = getIncrementals(document.getElementById('slide'+i));
+ }
+ return incrementals;
+}
+
+function defaultCheck() {
+ var allMetas = document.getElementsByTagName('meta');
+ for (var i = 0; i< allMetas.length; i++) {
+ if (allMetas[i].name == 'defaultView') {
+ defaultView = allMetas[i].content;
+ }
+ if (allMetas[i].name == 'controlVis') {
+ controlVis = allMetas[i].content;
+ }
+ }
+}
+
+// Key trap fix, new function body for trap()
+function trap(e) {
+ if (!e) {
+ e = event;
+ e.which = e.keyCode;
+ }
+ try {
+ modifierKey = e.ctrlKey || e.altKey || e.metaKey;
+ }
+ catch(e) {
+ modifierKey = false;
+ }
+ return modifierKey || e.which == 0;
+}
+
+function startup() {
+ defaultCheck();
+ if (!isOp)
+ createControls();
+ slideLabel();
+ fixLinks();
+ externalLinks();
+ fontScale();
+ if (!isOp) {
+ notOperaFix();
+ incrementals = createIncrementals();
+ slideJump();
+ if (defaultView == 'outline') {
+ toggle();
+ }
+ document.onkeyup = keys;
+ document.onkeypress = trap;
+ document.onclick = clicker;
+ }
+}
+
+window.onload = startup;
+window.onresize = function(){setTimeout('fontScale()', 50);}
BIN unicode-viz.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN utfs.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN windows-932-1.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
BIN windows-932-2.png
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.

0 comments on commit ee00728

Please sign in to comment.
Something went wrong with that request. Please try again.