Revision history [back]

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

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);} color:rgb(50,200,200);}

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

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

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

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

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

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

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

Thanks-- Greg