RicSherlock/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 (intro intro01 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?

«egpage0.html»= Example of top level page using CSS formatting

<!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">&lt;&lt;</a>
<a href="egpage1.html">&gt;&gt;</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">&lt;&lt;</a>
<a href="egpage1.html">&gt;&gt;</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>

«egpage1.html»= Example 2nd level page using CSS formatting

<!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">&lt;&lt;</a>
<a href="egpage2.html">&gt;&gt;</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, &ldquo;<tt>&lt; </tt>is <i>less than</i>&rdquo; 
and<tt> </tt>&ldquo;<tt>&lt;. </tt>is <i>lesser of</i> (that is, minimum)&rdquo;.  
Then uncover the comments and compare with your own.</p>

<pre>

   7&lt;5                        <span class="codeNB">Less than</span>
0                             <span class="codeNB">A zero is interpreted as <i>false.</i></span>

   7&lt;.5                       <span class="codeNB">Lesser of</span>

5

   7&gt;5                        <span class="codeNB">Greater than</span>

1                             <span class="codeNB">A one is <i>true</i> (<i>&agrave; la</i> George Boole)</span>

   7&gt;.5                       <span class="codeNB">Greater of</span>

7

   10^3                       <span class="codeNB">Power (<i>&agrave; 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&lt;.b
5

   Min=: &lt;.                   <span class="codeNB">Min is <tt>&lt;.</tt></span>
   power=: ^                  <span class="codeNB">power is <tt>^</tt></span>
   gt=: &gt;                     <span class="codeNB">gt is <tt>&gt;</tt></span>

   10 power (5 Min 3)
1000
</pre>
<div id="Exercises">
<h3>Exercises</h3>

<ol>
        <li>Enter the following sentences on the computer, 
observe the results, give suitable names to any new primitives 
(such as<tt> * </tt>and<tt> +. </tt>and<tt> *.</tt>), 
and comment on their behaviour.


<pre>
   a=:0 1 2 3
   b=:3 2 1 0   
   a+b
   a*b
   a-b
   a%b
   a^b 
   a^.b
   a&lt;b
   a&gt;b 
   (a&lt;b)+(a&gt;b)
   (a&lt;b)+.(a&gt;b)
</pre>

Compare your comments with the following: 

<ol>
        <li>Negative<tt> 3 </tt>is denoted by<tt> _3</tt>.<tt> </tt>

The underbar<tt> <b>_</b> </tt>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<tt> 0.5</tt>,<tt> </tt>and the negative 
sign<tt> <b>_</b> </tt>must not be confused with the symbol used 
to denote subtraction (i.e.,<tt> <b>-</b></tt>).
    </li>

        <li>Division (<tt>%</tt>) by zero yields infinity, denoted by the underbar alone.
        </li>

        <li>Log of<tt> 2 </tt>to the base<tt> 1 </tt>is infinite, 
and log of<tt> 0 </tt>to the base<tt> 3 </tt>is negative 
infinity (<tt><b>__</b></tt>).
        </li>

        <li>Since the relation<tt> 5&lt;7 </tt>is true, and the result 
of<tt> 5&lt;7 </tt>is<tt> 1</tt>,<tt> </tt>it may be said that 
true and false are represented by the ordinary 
integers<tt> 1 </tt>and<tt> 0</tt>.<tt> </tt>

George Boole used this same convention, together with the 
symbol<tt> + </tt>to represent the <i>boolean</i> function <i>or</i>.  
We use the distinct representation<tt> +. </tt>
to avoid conflict with the analogous (but different) <i>addition</i> 
(denoted by<tt> +</tt>).
        </li>

</ol>
        </li>
        <li>Following the example<tt> Min=: &lt;.</tt> ,<tt> </tt>invent, assign, and use names for each of the primitives encountered thus far.
        </li>
</ol>
</div>

</div>

<div id="Footer">
<a href="egpage0.html">&lt;&lt;</a>
<a href="egpage2.html">&gt;&gt;</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>

«egpage2.html»= Example of Primitive Definition page using CSS formatting

<!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">&lt;&lt;</a>
<a href="egpage0.html">&gt;&gt;</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&rsquo;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&amp;^ </tt>is inverse to the monad <tt>x&amp;^.</tt> .<tt> </tt>  
    For example:</p>

    <pre>
       10&amp;^ 10&amp;^. 1 2 3 4 5
    1 2 3 4 5
              
       10&amp;^. 10&amp;^ 1 2 3 4 5
    1 2 3 4 5
    </pre>
  </div>
</div>

<div id="Dyad">
  <div class="pname">Power</div>

  <div class="defn">
    <p><tt>x^2 </tt>and<tt> x^3</tt> and<tt> x^0.5</tt> are the <i>square</i>, 
    <i>cube</i>, and <i>square root</i> of<tt> x</tt> .</p>

    
    <p>In general,<tt> x^y </tt>is<tt> ^y*^.x</tt>,<tt> </tt>applying for 
    complex numbers as well as real. </p>
    
    <p>For a non-negative integer<tt> y</tt>,<tt> </tt>the phrase<tt>x ^ y </tt>

    is equivalent to<tt> */y # x</tt>;<tt> </tt>in particular,<tt> */ </tt>on 
    an empty list is<tt> 1</tt>,<tt> </tt>and<tt> x^0 </tt>is<tt> 1 </tt>for 
    any<tt> x</tt>,<tt> </tt>including<tt> 0</tt> .</p>

    
    <p>The fit conjunction applies to<tt> ^ </tt>to yield a stope defined 
    as follows:<tt> x^!.k n </tt>is<tt> */x + k*i. n</tt> .<tt> </tt>
    In particular,<tt> ^!._1 </tt>is the <i>falling factorial</i> function.</p>

  </div>
</div>
</div>
<div id="Examples">
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:<br/>

<pre>
   e=: ^ 1 [ x=: 4 [ y=: 0 1 2 3
   ,.&amp;.&gt; x (e&quot;_ ; e&amp;^@] ; ^ ; ^@(] * ^.@]) ; (]^]) ; ^!._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|
+---------------------------+-------------------+


</pre>

<tt>S1 </tt>gives (signed) Stirling numbers of the first kind 
and<tt> S2 </tt>gives Stirling numbers of the second kind.  
They can be used to transform between ordinary and stope polynomials.  
Note that<tt> <a href="dxco.htm">x:</a> </tt>gives 
<a href="dictg.htm">extended precision</a>.<br/>
</div> <!--end examples -->
</div> <!--end primitive -->

</div> <!--end content -->
<div id="Footer">
<a href="egpage1.html">&lt;&lt;</a>
<a href="egpage0.html">&gt;&gt;</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>

«jdict.css»= CSS formatting rules for XHTML pages above

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;
}

«titles.js»= Javascript function that provides popup descriptions for page regions

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;

CategoryLiterate