Refactoring of the output and display system.

* LaTeX rendering now works.
* Font's are reworked in the css style sheet.
* Testing on FF and Chrome.

IPython/frontend/html/notebook/static/css/notebook.css

@@ -29,7 +29,7 time, mark, audio, video {
   margin: 0;
   padding: 0;
   border: 0;
-  font-size: 100%;
+/*  font-size: 100%;*/
   font: inherit;
   vertical-align: baseline;
 }
@@ -62,12 +62,16 input, select { vertical-align: middle; }
    en.wikipedia.org/wiki/MediaWiki_talk:Common.css/Archive_11#Teletype_style_fix_for_Chrome */
 pre, code, kbd, samp { font-family: monospace, sans-serif; }
 
-
+pre {
+    text-align: left;
+    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
+    font-size: 12pt;
+}
 
 body {
     background-color: white;
-    font-size: 11pt;
-
+    /* This won't propagate to all children so we also set it below */
+    font-size: 12pt;
     /* This makes sure that the body covers the entire window and needs to
        be in a different element than the display: box in wrapper below */
     position: absolute;
@@ -79,12 +83,11 body {
 
 div#wrapper {
     display: box;
-    box-orient: vertical;
-
     display: -webkit-box;
-    -webkit-box-orient: vertical;
-
     display: -moz-box;
+
+    box-orient: vertical;
+    -webkit-box-orient: vertical;
     -moz-box-orient: vertical;
 
     /* This is needed to make sure the wrapper fills the body */
@@ -104,7 +107,7 span#ipython_notebook h1 {
 }
 
 div#tools {
-    font-size: 10pt;
+    font-size: 11pt;
 }
 
 span#kernel_status {
@@ -134,9 +137,8 div.notebook {
     overflow-y: auto;
     overflow-x: hidden;
     padding: 5px;
-/*    padding-top: 5px;*/
-/*    padding-bottom: 5px;*/
     background-color: white;
+    font-size: 12pt;
 
     /* Allow the notebook div to take up the rest of the vertical space */
     box-flex: 1;
@@ -152,10 +154,18 div.cell {
     width: 100%;
     padding: 5px;
     position: relative;
-    display: table;
+
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
+
+    display: box;
+    display: -webkit-box;
+    display: -moz-box;
+
+    box-orient: vertical;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
 }
 
 div.code_cell {
@@ -163,24 +173,19 div.code_cell {
 }
 
 div.prompt {
-    vertical-align: top;
-    display: table-cell;
-    width: 80px;
+    width: 90px;
     padding: 0px;
     margin: 0px;
     font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-    font-weight: normal;
-    font-style: normal;
 }
 
 div.input {
     display: box;
-    box-orient: horizontal;
-
     display: -webkit-box;
-    -webkit-box-orient: horizontal;
-
     display: -moz-box;
+
+    box-orient: horizontal;
+    -webkit-box-orient: horizontal;
     -moz-box-orient: horizontal;
 }
 
@@ -192,6 +197,7 div.input_area {
     box-flex: 1;
     -webkit-box-flex: 1;
     -moz-box-flex: 1;
+
     box-sizing: border-box;
     -moz-box-sizing: border-box;
     -webkit-box-sizing: border-box;
@@ -201,9 +207,8 textarea.input_textarea {
     width: 100%;
     text-align: left;
     font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-    font-size: inherit;
+    font-size: 12pt;
     border-style: none;
-    display: table-cell;
     padding: 0px;
     margin: 0px;
     overflow: auto;
@@ -213,12 +218,21 textarea.input_textarea {
 
 div.output {
     display: box;
-    box-orient: horizontal;
-
     display: -webkit-box;
-    -webkit-box-orient: horizontal;
+    display: -moz-box;
 
+    box-orient: vertical;
+    -webkit-box-orient: vertical;
+    -moz-box-orient: vertical;
+}
+
+div.output_pyout {
+    display: box;
+    display: -webkit-box;
     display: -moz-box;
+    
+    box-orient: horizontal;
+    -webkit-box-orient: horizontal;
     -moz-box-orient: horizontal;
 }
 
@@ -228,8 +242,19 div.output_prompt {
 
 div.output_area {
     text-align: left;
+    color: black;
     font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
-    display: table-cell;
+    font-size: 12pt;
+}
+
+div.output_latex {
+    font-size: 13pt;
+}
+
+.box_flex1 {
+    box-flex: 1;
+    -webkit-box-flex: 1;
+    -moz-box-flex: 1;
 }
 
 div.text_cell {
@@ -237,8 +262,10 div.text_cell {
 }
 
 textarea.text_cell_input {
-    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
-    font-size: 12pt;
+    font-family: Monaco, Consolas, "DejaVu Sans Mono", "Bitstream Vera Sans Mono", "Courier New", monospace;
+/*    font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;*/
+    /* Slightly bigger than the rest of the notebook */
+    font-size: 13pt;
     outline: none;
     resize: none;
     width:  inherit;
@@ -250,7 +277,8 textarea.text_cell_input {
 
 div.text_cell_render {
     font-family: "Helvetica Neue", Arial, Helvetica, Geneva, sans-serif;
-    font-size: 12pt;
+    /* Slightly bigger than the rest of the notebook */
+    font-size: 13pt;
     outline: none;
     resize: none;
     width:  inherit;

IPython/frontend/html/notebook/static/js/notebook.js

@@ -103,7 +103,6 Notebook.prototype.bind_events = function () {
             if (cell instanceof CodeCell) {
                 event.preventDefault();
                 cell.clear_output();
-                cell.hide_output_prompt();
                 var code = cell.get_code();
                 if (that.notebook_load_re.test(code)) {
                     var code_parts = code.split(' ');
@@ -442,7 +441,7 Notebook.prototype._kernel_started = function () {
         var msg_type = reply.msg_type;
         var cell = that.cell_for_msg(reply.parent_header.msg_id);
         if (msg_type === "execute_reply") {
-            cell.set_prompt(reply.content.execution_count);
+            cell.set_input_prompt(reply.content.execution_count);
         };
     };
 
@@ -454,10 +453,12 Notebook.prototype._kernel_started = function () {
         if (msg_type === "stream") {
             cell.expand();
             cell.append_stream(reply.content.data + "\n");
-        } else if (msg_type === "pyout" || msg_type === "display_data") {
-            cell.show_output_prompt();
+        } else if (msg_type === "display_data") {
             cell.expand();
             cell.append_display_data(reply.content.data);
+        } else if (msg_type === "pyout") {
+            cell.expand();
+            cell.append_pyout(reply.content.data, reply.content.execution_count)
         } else if (msg_type === "status") {
             if (reply.content.execution_state === "busy") {
                 that.kernel.status_busy();
@@ -469,11 +470,6 Notebook.prototype._kernel_started = function () {
 };
 
 
-Notebook.prototype._handle_execute_reply = function (reply, cell) {
-    cell.set_prompt(reply.content.execution_count);
-};
-
-
 // Persistance and loading
 
 
@@ -624,7 +620,6 Cell.prototype.create_element = function () {};
 var CodeCell = function (notebook) {
     Cell.apply(this, arguments);
     this.input_prompt_number = ' ';
-    this.output_prompt_number = ' ';
 };
 
 
@@ -638,46 +633,77 CodeCell.prototype.create_element = function () {
     var input_textarea = $('<textarea/>').addClass('input_textarea').attr('rows',1).attr('wrap','hard').autogrow();
     input.append($('<div/>').addClass('input_area').append(input_textarea));
     var output = $('<div></div>').addClass('output');
-    output.append($('<div/>').addClass('prompt output_prompt'));
-    output.append($('<div/>').addClass('output_area'));
     cell.append(input).append(output);
     this.element = cell;
     this.collapse()
 };
 
 
-CodeCell.prototype.append_stream = function (data) {
-    var data_list = data.split("\n");
-    console.log(data_list);
-    if (data_list.length > 0) {
-        for (var i=0; i<data_list.length; i++) {
-            console.log(i, data_list[i]);
-            var toinsert = $("<div/>").
-                append(
-                    $("<pre/>").append(fixConsole(data_list[i]))
-                );
-            this.element.find("div.output_area").append(toinsert);
-        };
-    }
+CodeCell.prototype.append_pyout = function (data, n) {
+    var toinsert = $("<div/>").addClass("output_area output_pyout");
+    toinsert.append($('<div/>').
+        addClass('prompt output_prompt').
+        html('Out[' + n + ']:')
+    );
+    this.append_display_data(data, toinsert);
+    toinsert.children().last().addClass("box_flex1");
+    this.element.find("div.output").append(toinsert);
+    // If we just output latex, typeset it.
+    if (data["text/latex"] !== undefined) {
+        MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+    };
 };
 
 
-CodeCell.prototype.append_display_data = function (data) {
-    if (data["image/svg+xml"] !== undefined) {
-        this.append_svg(data["image/svg+xml"]);
+CodeCell.prototype.append_display_data = function (data, element) {
+    if (data["text/latex"] !== undefined) {
+        this.append_latex(data["text/latex"], element);
+        // If it is undefined, then we just appended to div.output, which
+        // makes the latex visible and we can typeset it. The typesetting
+        // has to be done after the latex is on the page.
+        if (element === undefined) {
+            MathJax.Hub.Queue(["Typeset",MathJax.Hub]);
+        };
+    } else if (data["image/svg+xml"] !== undefined) {
+        this.append_svg(data["image/svg+xml"], element);
     } else if (data["text/plain"] !== undefined) {
-        console.log(data["text/plain"]);
-        this.append_stream(data["text/plain"]);
+        this.append_stream(data["text/plain"], element);
     };
+    return element;
 };
 
-CodeCell.prototype.append_svg = function (svg) {
-    this.element.find("div.output_area").append(svg);
+
+CodeCell.prototype.append_stream = function (data, element) {
+    element = element || this.element.find("div.output");
+    var toinsert = $("<div/>").addClass("output_area output_stream");
+    toinsert.append($("<pre/>").html(fixConsole(data)));
+    element.append(toinsert);
+    return element;
 };
 
 
+CodeCell.prototype.append_svg = function (svg, element) {
+    element = element || this.element.find("div.output");
+    var toinsert = $("<div/>").addClass("output_area output_svg");
+    toinsert.append(svg);
+    element.append(toinsert);
+    return element;
+};
+
+
+CodeCell.prototype.append_latex = function (latex, element) {
+    // This method cannot do the typesetting because the latex first has to
+    // be on the page.
+    element = element || this.element.find("div.output");
+    var toinsert = $("<div/>").addClass("output_area output_latex");
+    toinsert.append(latex);
+    element.append(toinsert);
+    return element;
+}
+
+
 CodeCell.prototype.clear_output = function () {
-    this.element.find("div.output_area").html("");
+    this.element.find("div.output").html("");
 };
 
 
@@ -691,11 +717,6 CodeCell.prototype.expand = function () {
 };
 
 
-CodeCell.prototype.set_prompt = function (number) {
-    this.set_input_prompt(number);
-    this.set_output_prompt(number);
-};
-
 CodeCell.prototype.set_input_prompt = function (number) {
     var n = number || ' ';
     this.input_prompt_number = n
@@ -703,23 +724,6 CodeCell.prototype.set_input_prompt = function (number) {
 };
 
 
-CodeCell.prototype.set_output_prompt = function (number) {
-    var n = number || ' ';
-    this.output_prompt_number = n
-    this.element.find('div.output_prompt').html('Out[' + n + ']:');
-};
-
-
-CodeCell.prototype.hide_output_prompt = function () {
-    this.element.find('div.output_prompt').hide();
-};
-
-
-CodeCell.prototype.show_output_prompt = function () {
-    this.element.find('div.output_prompt').show();
-};
-
-
 CodeCell.prototype.get_code = function () {
     return this.element.find("textarea.input_textarea").val();
 };
@@ -962,7 +966,8 $(document).ready(function () {
         tex2jax: {
             inlineMath: [ ['$','$'], ["\\(","\\)"] ],
             displayMath: [ ['$$','$$'], ["\\[","\\]"] ],
-        }
+        },
+        displayAlign: 'left' // Change this to 'center' to center equations.
     });
 
     IPYTHON.notebook = new Notebook('div.notebook');