User:Ric Sherlock/J Dictionary/CSS Format
My suggestions do not represent a desire to change or edit the content of the J Dictionary in any way, but merely a desire to help the authors and copyright holders improve the experience of J users. My suggestions assume that the current definitive source of the Dictionary is HTML as published on the website - if that is not the case, then most of this page is probably irrelevant!
I was having a bit of a tinker to see if I could re-create a page layout similar to the current J Dictionary using XHTML and CSS, rather than tables.
In general I'm reasonably happy I've come up with a solution that would make future reformatting and conversion of the document much easier. The pages validate fine and look good in IE6, IE7 and Firefox 1.5 - 3.0. Haven't tested it in Safari.
If you are interested in having a look:
- download the five files (choose Literate from the More Actions drop-down at the top of the page to download a zip file containing the files.)
- extract them to a folder e.g. jpath '~temp/jdictcss'
- open egpage0.html in your web browser
- use << and >> to move between the 3 example pages
- compare them with the current versions (JDic:intro JDic:intro01 JDic:d200)
(the javascript function was just me having a fiddle with trying to make dictionary pages a bit clearer - feel free to ignore/delete it!)
The main thing that I wasn't able to duplicate nicely was the numbering of the Exercises. I couldn't re-create the "2.4" type numbering in a clean way using ordered lists. For me the advantages of clean markup outweigh the benefits of being able to uniquely identify exercises across pages, but the authors may feel differently?
I'm no HTML/CSS guru, so I'm sure that there are other, perhaps better, ways of doing this but I thought this might at least be a good starting point for discussion of the best way to go about formatting the Dictionary.
Assuming that an acceptable layout/format was found, what would be the best way to convert it from its present form to the new one?
I remember a forum post a while back suggesting that the xml/loose addon may be useful for converting old html to xml, could it be used in this case? Or perhaps HTML Tidy?
I'm sure there will be a need for some manual tinkering to get things right, but hopefully at least some (preferably most!) of the process could be automated? [{{#file: "egpage0.html"}} Download script: egpage0.html ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example top-level page for J Dictionary</title> <link href="jdict.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" src="titles.js" type="text/javascript"> </script> </head> <body> <div id="Header"> <a href="egpage2.html"><<</a> <a href="egpage1.html">>></a> <a href="../index/a.htm">Ndx</a> <a href="../user/contents.htm">Usr</a> <a href="../primer/contents.htm">Pri</a> <a href="../jforc/contents.htm">JfC</a> <a href="../learning/contents.htm">LJ</a> <a href="../phrases/contents.htm">Phr</a> <a href="../dictionary/contents.htm">Dic</a> <a href="../release/contents.htm">Rel</a> <a href="../dictionary/vocabul.htm">Voc</a> <a href="../dictionary/xmain.htm">!:</a> <a href="../user/win_driver_cmd_ref_overview.htm">wd</a> <a href="../index.htm">Help</a> Dictionary </div> <div id="Content"> <h1>Introduction</h1> <p><b>J</b> is a general-purpose programming language available on a wide variety of computers. Although it has a simple structure and is readily learned by anyone familiar with mathematical notions and notation, its distinctive features may make it difficult for anyone familiar with more conventional programming languages.</p> <p>This introduction is designed to present <b>J</b> in a manner that makes it easily accessible to programmers, by emphasizing those aspects that distinguish it from other languages. These include:</p> <ol> <li>A mnemonic one- or two-character spelling for primitives.</li> <li>No order-of-execution hierarchy among functions.</li> <li>The systematic use of <i>ambivalent</i> functions that, like the minus sign in arithmetic, can denote one function when used with two arguments (<i>subtraction </i>in the case of<tt> <b>-</b></tt>),<tt> </tt>and another when used with one argument (<i>negation</i> in the case of<tt> -</tt>).</li> <li>The adoption of terms from English grammar that better fit the grammar of <b>J</b> than do the terms commonly used in mathematics and in programming languages. Thus, a function such as addition is also called a <i>verb</i> (because it performs an action), and an entity that modifies a verb (not available in most programming languages) is accordingly called an <i>adverb</i>.</li> <li>The systematic use of adverbs and conjunctions to modify verbs, so as to provide a rich set of operations based upon a rather small set of verbs. For example,<tt> +/a </tt>denotes the sum over a list<tt> a</tt> ,<tt> */a </tt>denotes the product over<tt> a</tt> ,<tt> a */ b </tt>is the multiplication table of<tt> a </tt>and<tt> b</tt> .</li> <li>The treatment of vectors, matrices, and other arrays as single entities.</li> <li>The use of <i>functional</i> or <i>tacit</i> programming that requires no explicit mention of the arguments of a function (program) being defined, and the use of assignment to assign names to functions (as in<tt> sum=:+/ </tt>and<tt> mean=:sum % #</tt>).</li> </ol> <p>The following sections are records of actual <b>J</b> sessions, accompanied by commentary that should be read only after studying the corresponding session (and perhaps experimenting with variations on the computer). The sections should be studied with the <b>J</b> system and dictionary at hand, and the exercises should be attempted. The reckless reader may go directly to the sample topics.</p> </div> <div id="Footer"> <a href="egpage2.html"><<</a> <a href="egpage1.html">>></a> <a href="../index/a.htm">Ndx</a> <a href="../user/contents.htm">Usr</a> <a href="../primer/contents.htm">Pri</a> <a href="../jforc/contents.htm">JfC</a> <a href="../learning/contents.htm">LJ</a> <a href="../phrases/contents.htm">Phr</a> <a href="../dictionary/contents.htm">Dic</a> <a href="../release/contents.htm">Rel</a> <a href="../dictionary/vocabul.htm">Voc</a> <a href="../dictionary/xmain.htm">!:</a> <a href="../user/win_driver_cmd_ref_overview.htm">wd</a> <a href="../index.htm">Help</a> Dictionary </div> </body> </html>
[{{#file: "egpage1.html"}} Download script: egpage1.html ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <title>Example 2nd-level page for J Dictionary</title> <link href="jdict.css" rel="stylesheet" type="text/css" /> <script language="JavaScript" src="titles.js" type="text/javascript"> </script> </head> <body> <div id="Header"> <a href="egpage0.html"><<</a> <a href="egpage2.html">>></a> <a href="../index/a.htm">Ndx</a> <a href="../user/contents.htm">Usr</a> <a href="../primer/contents.htm">Pri</a> <a href="../jforc/contents.htm">JfC</a> <a href="../learning/contents.htm">LJ</a> <a href="../phrases/contents.htm">Phr</a> <a href="../dictionary/contents.htm">Dic</a> <a href="../release/contents.htm">Rel</a> <a href="../dictionary/vocabul.htm">Voc</a> <a href="../dictionary/xmain.htm">!:</a> <a href="../user/win_driver_cmd_ref_overview.htm">wd</a> <a href="../index.htm">Help</a> Dictionary </div> <div id="Content"> <h2>1. Mnemonics</h2> <p>The left side of the page shows an actual computer session with the result of each sentence shown at the left margin. First cover the comments at the right, and then attempt to state in English the meaning of each primitive so as to make clear the relations between related symbols. For example, “<tt>< </tt>is <i>less than</i>” and<tt> </tt>“<tt><. </tt>is <i>lesser of</i> (that is, minimum)”. Then uncover the comments and compare with your own.</p> <pre> 7<5 <span class="codeNB">Less than</span> 0 <span class="codeNB">A zero is interpreted as <i>false.</i></span> 7<.5 <span class="codeNB">Lesser of</span> 5 7>5 <span class="codeNB">Greater than</span> 1 <span class="codeNB">A one is <i>true</i> (<i>à la</i> George Boole)</span> 7>.5 <span class="codeNB">Greater of</span> 7 10^3 <span class="codeNB">Power (<i>à la</i> Augustus De Morgan)</span> 1000 10^.1000 <span class="codeNB">Logarithm</span> 3 7=5 <span class="codeNB">Equals</span> 0 b=: 5 <span class="codeNB">Is (<i>assignment</i> or <i>copula</i>)</span> 7<.b 5 Min=: <. <span class="codeNB">Min is <tt><.</tt></span> power=: ^ <span class="codeNB">power is <tt>^</tt></span> gt=: > <span class="codeNB">gt is <tt>></tt></span> 10 power (5 Min 3) 1000
Exercises
- Enter the following sentences on the computer,
observe the results, give suitable names to any new primitives
(such as * and +. and *.),
and comment on their behaviour.
a=:0 1 2 3 b=:3 2 1 0 a+b a*b a-b a%b a^b a^.b a<b a>b (a<b)+(a>b) (a<b)+.(a>b)
Compare your comments with the following:
- Negative 3 is denoted by _3. The underbar _ is part of the representation of a negative number in the same sense that the decimal point is part of the representation of one-half when written in the form 0.5, and the negative sign _ must not be confused with the symbol used to denote subtraction (i.e., -).
- Division (%) by zero yields infinity, denoted by the underbar alone.
- Log of 2 to the base 1 is infinite, and log of 0 to the base 3 is negative infinity (__).
- Since the relation 5<7 is true, and the result of 5<7 is 1, it may be said that true and false are represented by the ordinary integers 1 and 0. George Boole used this same convention, together with the symbol + to represent the boolean function or. We use the distinct representation +. to avoid conflict with the analogous (but different) addition (denoted by +).
- Following the example Min=: <. , invent, assign, and use names for each of the primitives encountered thus far.
</body> </html>
[{{#file: "egpage2.html"}} Download script: egpage2.html ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Example Definition page for J Dictionary</title>
<link href="jdict.css" rel="stylesheet" type="text/css" />
<script language="JavaScript" src="titles.js" type="text/javascript">
</script>
</head>
<body>
<div id="Header">
<a href="egpage1.html"><<</a>
<a href="egpage0.html">>></a>
<a href="../index/a.htm">Ndx</a>
<a href="../user/contents.htm">Usr</a>
<a href="../primer/contents.htm">Pri</a>
<a href="../jforc/contents.htm">JfC</a>
<a href="../learning/contents.htm">LJ</a>
<a href="../phrases/contents.htm">Phr</a>
<a href="../dictionary/contents.htm">Dic</a>
<a href="../release/contents.htm">Rel</a>
<a href="../dictionary/vocabul.htm">Voc</a>
<a href="../dictionary/xmain.htm">!:</a>
<a href="../user/win_driver_cmd_ref_overview.htm">wd</a>
<a href="../index.htm">Help</a>
Dictionary
</div>
<div id="Content">
<div id="Primitive">
<div id="SymbRnk">
<div id="Symbol">^</div>
<div id="Rank">0 0 0</div>
</div>
<div id="Defns">
<div id="Monad">
<div class="pname">Exponential</div>
<div class="defn">
<p><tt>^y </tt>is equivalent to<tt> e^y</tt>,<tt> </tt>where
<tt> e </tt>is <i>Euler’s number</i><tt> ^1 </tt>
(approximately 2.71828). The <i>natural logarithm</i><tt> </tt>
(<tt>^.</tt>)<tt> </tt>is inverse to<tt> ^ </tt>(that is,<tt> y=^.^y </tt>
and <tt>y=^^.y</tt>).</p>
<p>The monad<tt> x&^ </tt>is inverse to the monad <tt>x&^.</tt> .<tt> </tt>
For example:</p>
<pre>
10&^ 10&^. 1 2 3 4 5
1 2 3 4 5
10&^. 10&^ 1 2 3 4 5
1 2 3 4 5
x^2 and x^3 and x^0.5 are the square, cube, and square root of x .
In general, x^y is ^y*^.x, applying for complex numbers as well as real.
For a non-negative integer y, the phrasex ^ y is equivalent to */y # x; in particular, */ on an empty list is 1, and x^0 is 1 for any x, including 0 .
The fit conjunction applies to ^ to yield a stope defined as follows: x^!.k n is */x + k*i. n . In particular, ^!._1 is the falling factorial function.
The last result in the first example below illustrates the
falling factorial function, formed by the fit conjunction.
See <a href="ref.htm#14">Chapter 5 of [14]</a>
for the use of stope functions, stope polynomials,
and Stirling numbers in the difference calculus:
e=: ^ 1 [ x=: 4 [ y=: 0 1 2 3 ,.&.> x (e"_ ; e&^@] ; ^ ; ^@(] * ^.@]) ; (]^]) ; ^!._1) y +-------+-------+--+--+--+--+ |2.71828| 1| 1| _| 1| 1| | |2.71828| 4| 1| 1| 4| | |7.38906|16| 4| 4|12| | |20.0855|64|27|27|24| +-------+-------+--+--+--+--+ S2=: %.@S1=: (^!._1/~ %. ^/~) @ i. @ x: (S1;S2) 8 +---------------------------+-------------------+ |1 0 0 0 0 0 0 0|1 0 0 0 0 0 0 0| |0 1 _1 2 _6 24 _120 720|0 1 1 1 1 1 1 1| |0 0 1 _3 11 _50 274 _1764|0 0 1 3 7 15 31 63| |0 0 0 1 _6 35 _225 1624|0 0 0 1 6 25 90 301| |0 0 0 0 1 _10 85 _735|0 0 0 0 1 10 65 350| |0 0 0 0 0 1 _15 175|0 0 0 0 0 1 15 140| |0 0 0 0 0 0 1 _21|0 0 0 0 0 0 1 21| |0 0 0 0 0 0 0 1|0 0 0 0 0 0 0 1| +---------------------------+-------------------+
S1 gives (signed) Stirling numbers of the first kind
and S2 gives Stirling numbers of the second kind.
They can be used to transform between ordinary and stope polynomials.
Note that <a href="dxco.htm">x:</a> gives
<a href="dictg.htm">extended precision</a>.
</body> </html>
[{{#file: "jdict.css"}} Download script: jdict.css ]
body {
background-color: #ffffff;
color: #000000;
line-height:1.166
}
a:link, a:visited {
color: #0066cc;
text-decoration: none
}
a:hover {
color: #ff0000;
text-decoration: underline
}
h1 {font-size: 25pt} /*named sizes are diff sizes in diff browsers*/
h2 {font-size: 20pt}
h3 {
font-size: 16pt;
margin: 0.5em 0;
}
h4 {font-size: 14pt}
li {padding-top:0.6em}
/* LAYOUT */
#Header {
padding: 0.2em;
border-bottom: solid medium #aaa;
}
#Footer {
border-top: solid medium #aaa;
padding: 0.2em;
}
#Header a,#Footer a {
padding: 0 0.4em 0 0;
}
#Content {
padding:0.5em 0;
}
#SymbRnk {
padding: 0 38%;
min-width: 7.5em;
}
#Symbol {
float: left;
font-family: monospace;
font-size: 25pt;
}
#Rank {
font-family: monospace;
font-size: 25pt;
text-align: right;
}
#Defns {
margin: 0;
min-width: 32em;
}
#Monad {
float: left;
margin: 0;
width: 49%;
/*min-width: 16em;*/
}
#Monad .pname {
padding: 0 0 0.5em 1em;
font-size: x-large;
}
#Monad .defn {
padding: 0 0.5em 0 1em;
}
#Dyad {
margin: 0 0 0 51%;
/*min-width: 16em;*/
}
#Dyad .pname {
text-align: right;
padding: 0 1em 0.5em 0;
}
#Dyad .defn {
padding: 0 1em 0 0.5em;
}
#Examples, #Exercises{
clear: right;
padding: 1em 1em 0em 1em;
}
/* Styles */
pre {background:#FFF8ED; border: 1pt solid #AEBDCC; padding: 5px }
.pname { /*primitive name*/
font-size: x-large;
font-weight: bold;
}
.defn {
background: #EEEEEE;
}
.codeNB {
font-family:Verdana, Arial, Helvetica, sans-serif;
color:#669933;
}
.jsession {/* J session. ??replacement for pre?? */
}
.code {/* inline code. ??replacement for <tt>?? */
}
.term { /* special term. ??replacement for <i>?? )*/
}
#Exercises ol{
list-style:decimal;
padding-top:1em;
}
#Exercises ol ol{
list-style:lower-alpha;
padding-top:0.5em;
}
[{{#file: "titles.js"}} Download script: titles.js ]
function gettitles() {
if (!document.getElementsByTagName) return;
var dvs = document.getElementsByTagName("div");
for (var i=0; i<dvs.length; i++) {
var dv = dvs[i];
switch (dv.getAttribute("id")) {
case "Symbol" :
t = "Primitive symbol";
break;
case "Rank" :
t = "ranks of primitive: Monadic, Dyadic Left, Dyadic right";
break;
case "Monad" :
t = "Monadic form";
break;
case "Dyad" :
t = "Dyadic form";
break;
default :
t = ""
}
dv.title = t
}
}
window.onload = gettitles;