CSS for cell output in notebook

[Kyle Rawlins]

Hi all,
Main question: Is there a good / standard / accepted way to deal with adjusting CSS for the outputs of _repr_html_/display.HTML, viewed in Jupyter notebook? 

I'm using HTML to render relatively involved structures with tables/divs, basically elaborate proof trees for a specific application in linguistics.  There's examples of the sort of thing I mean here, if you scroll; tons of mathjax so wait for it to finish: http://nbviewer.jupyter.org/github/rawlins/lambda-notebook/blob/master/notebooks/Lambda%20Notebook%20Demo%20(executed).ipynb

Two ways that work, but aren't ideal:
* inline css properties.  This can get pretty tedious and inelegant, especially when you want to do something different than .rendered_html.  But it seems to basically always work, and maybe I shouldn't think so hard about this since my html is generated automatically anyways.
* insert a <style> block at the beginning of the HTML output.  Can result in much cleaner styling, but is a bit fiddly about loading and css precedence, and seems pretty dubious standards-wise.  (There used to be something called "<style scoped>" in HTML5 that did this, but it didn't get picked up by most browsers and has been dropped altogether from the standard earlier this year.)

Thinks I've considered but I can't tell if they're a good idea:
* something more involved with display.Javascript or the like.
* I'm distributing this project as basically a kernel that is a light wrapper around the IPython kernel plus a domain specific language, so as I understand it I could include as part of the kernelspec a file "kernel.js" that I could then use to dynamically set up the necessary styles.  However, I can't really find much documentation about this file, even to know if this is something that will stick around or if I'm understanding what this file does correctly.  There's no "kernel.css", right?

Things that won't work:
* user-specific custom css.  This is a software package centered around a kernel, aimed at a fairly non-technical audience, and I don't want to mess with user settings or require that they be edited as part of installation.
* running a setup cell in each notebook that injects the relevant styles.  (I really want to do this on load if possible.)
* I don't see how nbextensions would solve my particular case, e.g. the ultimate solution here for nice custom table formatting https://github.com/jupyter/notebook/issues/1182 (though maybe I'm wrong).
* display complex stuff in some other format, svg or something.  Maybe in the long run, but html is _much_ easier in the short term and I'm using mathjax in the html quite heavily.

I found an open IPython issue that seems like the same problem, but it's a bit inconclusive and hasn't been updated lately: https://github.com/ipython/ipython/issues/7036

Thanks for any feedback,
-kyle

[Kyle Kelley]

Since I noticed deep within you mentioned nice custom table formatting -- would you consider exporting a custom mimetype that uses http://specs.frictionlessdata.io/json-table-schema/ for the table spec? We can then write CSS to match tables and their output types directly.

The difficulty with adjusting CSS is that it's not something specced at the same degree as the notebook format and message protocol are. We can always provide a "solution" that interoperates with some amount of CSS, but it's not a good long term solution.

-- Kyle

P.S. I totally use `<style>` outputs in HTML cells that later outputs can rely on for classes. The problem with that is the settings must be in context globally with CSS, which prevents any version of the notebook from using iframes and interoperating with this kind of setup.

--
You received this message because you are subscribed to the Google Groups "Project Jupyter" group.
To unsubscribe from this group and stop receiving emails from it, send an email to jupyter+unsubscribe@googlegroups.com.
To post to this group, send email to jup...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/jupyter/acc69db0-760c-4600-88d7-81fae88c12eb%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

--

Kyle Kelley (@rgbkrk; lambdaops.com)

[Brian Granger]

Kyle,

Thanks for posting about the JSON table schema here. I do think it
would be great to start building support for that...

Cheers,

Brian

>> email to jupyter+u...@googlegroups.com.

>> To post to this group, send email to jup...@googlegroups.com.
>> To view this discussion on the web visit
>> https://groups.google.com/d/msgid/jupyter/acc69db0-760c-4600-88d7-81fae88c12eb%40googlegroups.com.
>> For more options, visit https://groups.google.com/d/optout.
>
>
>
>
> --
> Kyle Kelley (@rgbkrk; lambdaops.com)
>

> --
> You received this message because you are subscribed to the Google Groups
> "Project Jupyter" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to jupyter+u...@googlegroups.com.

> To post to this group, send email to jup...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/jupyter/CA%2BtbMaWmpZPunaiDmcmoKnWD9OHrP7R9LL5Y5ePnfLcfbZes7g%40mail.gmail.com.

>
> For more options, visit https://groups.google.com/d/optout.



--

Brian E. Granger
Associate Professor of Physics and Data Science
Cal Poly State University, San Luis Obispo
@ellisonbg on Twitter and GitHub
bgra...@calpoly.edu and elli...@gmail.com