# cell_resizer and the notebook CSS

I'm changing font sizes depending on whether a text area is being edited or not, and the enclosing text area height is being programmatically set wrong somewhere. I'm trying to figure out the right way of fixing this-- do I need to start editing javascript, and how do I do so in a way that doesn't break anything else or make updating Sage a nightmare.

Here's some more detail on the problem:

I've created a notebook.css (inserted at the bottom of this post) to reduce the font size on the input cells, because I want most of the focus on the text cells and result cells. That's a pain when I edit, so I increase the font size when the cell is being edited (I'm realizing it would be best to increase the font under a hover, but first things first).

The problem I'm having is that the font is changing as I'd hoped, but the size of the surrounding textarea is sized to hold the larger font even when the smaller font is displayed. It looks like this is happening because the "height" style is being set explicitly on a cell by cell basis, and it looks like that's happening in some javascript routine.

I've dug a bit into the javascript files, but I'm quickly getting lost. I'm not sure this is where the issue is, but it's my best guess so far. If someone could point me at the right file and where they reside in a Sage.app install, that would be a great help already.

Ideally I'd like a way to adjust this without having to modify the standard install. notebook.css is nice because it's local, but I'm not sure I can overload a javascript function in the same way.

My overall objective:

I'm trying to customize my notebook styling to further my goal of using Sage as a live documentation tool. I'm an engineer, and I want to use Sage to both help develop new designs and to document them-- as such, the math is essentially a means to an end. I want the emphasis on the results, but I want to retain the math/Python both so I can reconstruct my logic later, and to assist in peer review.

Here's my notebook.css:

h1 {font-size:32pt; color:rgb(50,200,200);}

div.text_cell p {font-size:14pt;}

textarea.cell_input {font-size:8pt; color:rgb(75,75,75);}

div.worksheet * {background-color:rgb(240,240,240);}

div.worksheet textarea.cell_input_active {background-color:transparent;}

div.worksheet span.typeset * {background-color:transparent;}

tr {border-color:rgb(240,240,240);}

td {border-left-color: rgb(240,240,240);}

Thanks-- Greg

edit retag close merge delete

Note: if you want to completely hide an input cell, you can just put %hide at the top. Not sure if this is really what you want, but might be handy to know.

( 2011-09-08 15:10:08 -0500 )edit

Sort by » oldest newest most voted

You can override javascript functions by simply redefining them inside an html() block, or in the actual html of the worksheet. I believe the function you are looking for is cell_input_resize() in the Contents/Resources/sage/devel/sagenb/sagenb/data/sage/js/notebook_lib.js file.

Doubtless we could use a prepackaged solution for auto-sized input boxes these days. This is old code.

more

It's been a while since I posted this, but I'm annoyed by my broken formatting again and making another attempt to get this to work. I made a few changes directly to that file to see if I could fix it, and never saw any impact. I then changed the return value of cell_blur to "false" which, according to the comments should be really bad, but it had no effect. Is that the right notebook_lib.js file?

( 2011-12-04 19:27:53 -0500 )edit

I ran into the same problem as G B when modifying the layout of the notebook with notebook.css. Based on Jason Grout's answer, I managed to solve the problem by editing cell_input_resize() in Contents/Resources/sage/devel/sagenb/sagenb/data/sage/js/notebook_lib.js file.

First, paste the getStyle function from http://robertnyman.com/2006/04/24/get-the-rendered-style-of-an-element/ into notebook_lib.js. Second, inside the cell_input_resize function find this line

    resizer.style.width = cell_input.offsetWidth + 'px';


and insert one line before it as shown here

    resizer.style.fontSize = getStyle(cell_input, "font-size");
resizer.style.width = cell_input.offsetWidth + 'px';


The size of the text area should now track the size of the font set in notebook.css. If you don't see any impact after editing notebook_lib.js, you may need to both flush your browser cache (e.g "Reset Safari") and restart SAGE so the new notebook_lib.js is read in.

Note: For me, the SAGE notebook has too large fonts and too much whitespace, especially on a MacBook. Although there are undoubtedly more elegant and more modern solutions, I decided to just hack the javascript and css to get further control. For example, to reduce the size of hidden output cells, I did the following:

• Use Safari's Web Inspector to identify the elements that needed modified classes, in this example they turned out to have classes div.cell_output_div and td.output_cell.
• Create new classes in notebook.css, e.g. div.cell_output_div_hidden and td.output_cell_hidden, that define the desired new height (e.g. "height: 6px") for hidden output cells.
• Paste the upTo function from http://stackoverflow.com/a/11644501 into notebook_lib.js.
• Replace notebook_lib.js function cycle_cell_output_type with modified version:

function cycle_cell_output_type(id) {
/*
When called the cell with given id has its output cycled from one
type to the next.  There are three types: word wrap, no word wrap,
hidden.
INPUT:
id -- integer or string; cell id
*/
var cell_div;
id = toint(id);
cell_div = get_element('cell_div_output_' + id);
parent_div = upTo(cell_div, "div")
parent_td = upTo(cell_div, "td")
if (cell_div.className === 'cell_div_output_hidden' ||
cell_div.className === 'cell_div_output_running') {
cell_output_set_type(id, 'wrap');
parent_div.className = "cell_output_div"
parent_td.className = "output_cell"
return;
}
if (cell_div.className === 'cell_div_output_wrap') {
cell_output_set_type(id, 'nowrap');
} else {
cell_output_set_type(id, 'hidden');
parent_div.className = "cell_output_div_hidden"
parent_td.className = "output_cell_hidden"
}
}


Now when I hide an output cell, it is only 6px high, which creates a more compact notebook.

Note: I have not checked whether this works on browsers other than Safari.

more

1

You might try William's retake on the notebook idea: https://cloud.sagemath.com I'm curious: is this you? http://www.davidhbailey.com/

( 2013-05-10 10:58:26 -0500 )edit

The Cloud notebook has some interesting changes, but haven't tried it out enough to give a fair opinion. It sometimes had a small but noticeable lag, so I'd prefer for now to stay off the cloud. No, I am http://www.physics.utoronto.ca/~dbailey/.

( 2013-05-13 03:43:46 -0500 )edit