CSS typos? + worksheet customization questions
Pat LeSmithe
In Sage 3.4 (and 3.2.3), I think there are two typos in the file
$SAGE_ROOT/local/lib/python2.5/site-packages/sage/server/notebook/css.py .
In particular, in Sage 3.4's version of the file:
line 572: "arial monospace" should be "arial, monospace"
line 1072: "zIndex" should be "z-index" .
Disclaimer: I'm not a style sheet expert. I just saved
http://localhost:8000/css/main.css
and fed it to the validator at
http://jigsaw.w3.org/css-validator/
It reported a warning at the first line above and an error at the
second. I assume the other warnings are even less consequential, but I
did want to ask about which parts of the default stylesheet, if any, are
no longer used.
I ask about that, because I'd like to make a relatively low-priority
attempt to alter or supplement css() in css.py with a set of shorter,
more independent functions (a class?) with a sensible number of
additional parameters. If this is acceptable, and it works, I'd like to
update worksheet_conf.py to call these functions and add a pull-down
option to bring up a worksheet settings page. How about serving up an
@interact widget for the settings?
I found a couple of python packages for manipulating css:
* CleverCSS (BSD): http://sandbox.pocoo.org/clevercss/
* cssutils (LGPL3): http://cthedot.de/cssutils/
The latter includes a parser, which also complains twice about main.css,
Client-side introspection, which is cool but well beyond my ability to
implement, could also work in this context. For example, one would fire
up a "What's this?"-like mode and hover over an element of the current
worksheet (e.g., active cell border) to get its CSS properties, or even
click to change a property in place and auto-save the changes. Is this
possible with TinyMCE and/or another JavaScript library?
Thoughts? I'm happy to defer --- and find a different way to contribute
to Sage --- if this is frivolous or already underway at non-negligible
priority. Thanks!
Sincerely,
Pat LeSmithe
William Stein
>
>
> In Sage 3.4 (and 3.2.3), I think there are two typos in the file
>
> $SAGE_ROOT/local/lib/python2.5/site-packages/sage/server/notebook/css.py .
>
> In particular, in Sage 3.4's version of the file:
>
> line 572: "arial monospace" should be "arial, monospace"
> line 1072: "zIndex" should be "z-index" .
>
> Disclaimer: I'm not a style sheet expert. I just saved
patch that fixes the above two problems. Post here and ask for a
review once you do that.
Thanks!
William
William Stein
Associate Professor of Mathematics
University of Washington
http://wstein.org
Jason Grout
>
> In Sage 3.4 (and 3.2.3), I think there are two typos in the file
>
> $SAGE_ROOT/local/lib/python2.5/site-packages/sage/server/notebook/css.py .
>
> In particular, in Sage 3.4's version of the file:
>
> line 572: "arial monospace" should be "arial, monospace"
> line 1072: "zIndex" should be "z-index" .
>
> Disclaimer: I'm not a style sheet expert. I just saved
Neither are we (most of us, including me, anyway). Both of your changes
above sound right.
>
> http://localhost:8000/css/main.css
>
> and fed it to the validator at
>
> http://jigsaw.w3.org/css-validator/
>
> It reported a warning at the first line above and an error at the
> second. I assume the other warnings are even less consequential, but I
> did want to ask about which parts of the default stylesheet, if any, are
> no longer used.
>
> I ask about that, because I'd like to make a relatively low-priority
> attempt to alter or supplement css() in css.py with a set of shorter,
> more independent functions (a class?) with a sensible number of
> additional parameters. If this is acceptable, and it works, I'd like to
> update worksheet_conf.py to call these functions and add a pull-down
> option to bring up a worksheet settings page. How about serving up an
> @interact widget for the settings?
How do you see this working? In other words, what do you see in the
interact widget controls, and how would they affect the notebook, etc.
>
> I found a couple of python packages for manipulating css:
>
> * CleverCSS (BSD): http://sandbox.pocoo.org/clevercss/
> * cssutils (LGPL3): http://cthedot.de/cssutils/
>
> The latter includes a parser, which also complains twice about main.css,
>
> Client-side introspection, which is cool but well beyond my ability to
> implement, could also work in this context. For example, one would fire
> up a "What's this?"-like mode and hover over an element of the current
> worksheet (e.g., active cell border) to get its CSS properties, or even
> click to change a property in place and auto-save the changes. Is this
> possible with TinyMCE and/or another JavaScript library?
I would use the Firefox Firebug extension to do this. Not only can you
inspect and change the CSS of any element on the fly, but it also lets
you inspect and change html, javascript, debug javascript, and lots (and
I mean *lots*) of other things.
Another extension I'd really recommend is the Web Developer extension.
I believe Safari also lets you do things like this, but I don't think
it's nearly as comprehensive as the above two extensions.
See:
http://chrispederick.com/work/web-developer/
>
> Thoughts? I'm happy to defer --- and find a different way to contribute
> to Sage --- if this is frivolous or already underway at non-negligible
> priority. Thanks!
I'm excited that you're working on this. Full speed ahead!
Thanks,
Jason
Pat LeSmithe
> Pat LeSmithe wrote:
>> option to bring up a worksheet settings page. How about serving up an
>> @interact widget for the settings?
>
> How do you see this working? In other words, what do you see in the
> interact widget controls, and how would they affect the notebook, etc.
It may be a while before I can converge on a design and a reasonable
feature-set, but I'm thinking of a "control panel" with buttons,
selectors, etc., for changing a worksheet's background color, input /
output / active cell background / border colors, font family / weight /
size / color, and similar stylistic attributes (see the attached CSS for
a few examples). Preset themes could also be available. A new setting
could take effect immediately or after a "submit" button is pressed.
The latter could simply reload the worksheet. Perhaps similar @interact
panels would suffice for notebook and user-level settings.
By the way, how do I get a pointer to a worksheet from within the same
worksheet? More generally, is it possible to manipulate a worksheet's
contents from within, using the functions in sage.server.notebook.*? Is
it possible (but perhaps not wise) to execute similarly manipulative
JavaScript code? (Of course, saved settings would still need to go back
to the server.) Can one add JavaScript to an @interact object, e.g., to
embed FLOT, a spreadsheet, custom controls, etc.?
Disclaimer: I'm still learning about @interact.
>> Client-side introspection, which is cool but well beyond my ability to
>> implement, could also work in this context. For example, one would fire
>> up a "What's this?"-like mode and hover over an element of the current
>> worksheet (e.g., active cell border) to get its CSS properties, or even
>> click to change a property in place and auto-save the changes. Is this
>> possible with TinyMCE and/or another JavaScript library?
>
> I would use the Firefox Firebug extension to do this. Not only can you
> inspect and change the CSS of any element on the fly, but it also lets
> you inspect and change html, javascript, debug javascript, and lots (and
> I mean *lots*) of other things.
> Another extension I'd really recommend is the Web Developer extension.
> I believe Safari also lets you do things like this, but I don't think
> it's nearly as comprehensive as the above two extensions.
Just to clarify, I'm speculating rather ambitiously, in that anyone
might be able to customize their worksheets in this way, without an
extension, rather than via the @interact panel.
Firebug is indeed steroidal.
Sincerely,
Pat LeSmithe
Pat LeSmithe
Are there any issues/risks with adding
extended_valid_elements: "style",
to the tinyMCE.init object in notebook.py (around line 1810)? I ask
because it seems that TinyMCE "removes" from edited and saved text any
elements not specified in its valid_elements or extended_valid_elements
options:
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/valid_elements
http://wiki.moxiecode.com/index.php/TinyMCE:Configuration/extended_valid_elements
.
For example, I can open an editor, click on the HTML icon to "Edit HTML
Source," and paste, e.g.,
Hello there!<style> div.worksheet {background-color: goldenrod;} </style>
into a textarea. Alternatively, I can use the plain text editor to
place this element outside a cell block. But by default, when I save
the area with TinyMCE, it replaces <style> and </style> with <!-- and
-->. That is, it comments out the style directive. If I don't include
"Hello there!," the style does stay, but I need to remember to leave
that area alone.
It seems the worksheet's first two lines, with the sheet's title and
system, are off-limits to TinyMCE. Another possible workaround is to
add a "field" for custom CSS to this area. I'm not sure if this would
cause compatibility headaches.
Anyway, one advantage to preserving style elements across simple edits
in a browser is that I can use something like (you may need to fix the
indentation)
s = ''
@interact
def _(radius=slider(0.0,1.0,0.05,0.5,'Border radii'), c_in_bord =
Color('blue'), c_in_back = Color('white'), c_ac_bord = Color('blue'),
c_ac_back = Color('white')):
global s
s = ''
s += '<style type="text/css">'
s += 'div.worksheet {-moz-border-radius: %fem;}' % radius
s += 'textarea.cell_input, pre.cell_input, textarea.cell_input_hide,
pre.cell_input_hide {border-color: %s; background-color: %s;
-moz-border-radius: %fem;}' % (c_in_bord.html_color(),
c_in_back.html_color(), radius)
s += 'textarea.cell_input_active, div.cell_input_active
{border-color: %s; background-color: %s; -moz-border-radius: %fem;}' %
(c_ac_bord.html_color(), c_ac_back.html_color(), radius)
s += '</style>'
html(s)
to tune a color scheme --- with instant feedback, thanks to auto
updates! --- and paste the output of "print s" into the plain text
editor to apply it. Of course, a built-in function which returns a more
detailed control panel and other changes to server-side code could
automate this.
Since this panel may take up lots of space, I propose crossing the input
grid and color selector controls, to get a new control similar to that
in the attached screenshot. Here, all I've done is tweaked a Farbtastic
demo,
$SAGE_ROOT/local/notebook/javascript/jquery/plugins/farbtastic/demo2.html ,
so this is still just a concept.
Thoughts?
By the way, I may have missed this in the documentation, but is it
possible to set a transparent background for 2D plots in Sage?
Thanks.
William Stein
>
> Are there any issues/risks with adding
>
> extended_valid_elements: "style",
>
> to the tinyMCE.init object in notebook.py (around line 1810)?
> I ask
> because it seems that TinyMCE "removes" from edited and saved text any
> elements not specified in its valid_elements or extended_valid_elements
> options:
this workaround.
elsewhere? Does png support transparency? (I just don't know.) This
would really be a matplotlib question, I think.
>
> Thanks.
>
>
> Pat LeSmithe wrote:
>> Jason Grout wrote:
>>> Pat LeSmithe wrote:
>>>> option to bring up a worksheet settings page. How about serving up an
>>>> @interact widget for the settings?
>>> How do you see this working? In other words, what do you see in the
>>> interact widget controls, and how would they affect the notebook, etc.
>>
>> It may be a while before I can converge on a design and a reasonable
>> feature-set, but I'm thinking of a "control panel" with buttons,
>> selectors, etc., for changing a worksheet's background color, input /
>> output / active cell background / border colors, font family / weight /
>> size / color, and similar stylistic attributes (see the attached CSS for
>> a few examples). Preset themes could also be available. A new setting
>> could take effect immediately or after a "submit" button is pressed.
>> The latter could simply reload the worksheet. Perhaps similar @interact
>> panels would suffice for notebook and user-level settings.
>
> >
>
Pat LeSmithe
> On Sun, Mar 29, 2009 at 11:26 PM, Pat LeSmithe <qed...@gmail.com> wrote:
>> Are there any issues/risks with adding
>> extended_valid_elements: "style",
>> to the tinyMCE.init object in notebook.py (around line 1810)?
>
> I have no idea. Did you try it? Did it mess anything up?
I should have said that I've tried it and haven't noticed any problems.
I'm worried mainly about security, though maybe unnecessarily, since
this is "just" CSS. In case it matters, it's possible to allow or
disallow specific attributes. I'll investigate further, unless someone
better informed can be more definitive.
>> By the way, I may have missed this in the documentation, but is it
>> possible to set a transparent background for 2D plots in Sage?
>
> Nope. Do you somehow want transparent png's to put in a website or
> elsewhere? Does png support transparency? (I just don't know.) This
> would really be a matplotlib question, I think.
PNG definitely supports transparency. I think http://www.sagemath.org/
has several. Right now, I'm just thinking of plots in published
worksheets with custom background colors. You're right about matplotlib:
http://matplotlib.sourceforge.net/faq/howto_faq.html?highlight=savefig#save-transparent-figures
With multiple z-index'd layers --- one of them opaque --- maybe it's
possible to enable or disable a grid, say, with a click of a button.