More portable css styles for embedding notebooks in HTML
- Dominant language
- Jupyter Notebook
- Stars
- 13.3k
- Forks
- 5.8k
- Avg merge
- 6d 11h
- Merged PRs (30d)
- 7
Description
I understand how https://github.com/jupyter/notebook/blob/179bb24fbf79d153812858126127a91431da3319/notebook/static/style/style.less is a pretty clean set off styles for notebooks, but the styles are not particularly portable. If you intend on exporting a notebook to (static) HTML to embed it in an arbitrary webpage, and import the styles [from the CDN](https://cdn.jupyter.org/notebook/latest/style/style.min.css), you are pretty likely to import styles that conflict with the rest of the webpage. This is most easily run into if that webpage does not use this version of Bootstrap, but that is not the only conflict. For example, common elements like `body`, `a`, `#header` and `.nav` have styles, all of which would very likely conflict with a surrounding page.
Someone wishing to embed a notebook could alter their site's own styles to not conflict, for example by including more classes (for things like `body`) and adding class / id prefixes (such as `mysite-nav`), or by including many strategic uses of `!important`, but if not already done, those solutions would pose a substantial hurdle to be able to embed a notebook in a pre-existing site.
This repo's own styles could be made more portable (for example by using prefixing), but I'm not sure what can be done about Bootstrap's inclusion. Is there a more portable version of Bootstrap? How much of bootstrap is really used? Even if this repo was more portable without changing the use of Bootstrap's code, that would be a great improvement. I suspect most important conflicting styles are actually in this repo directly anyway.
If the CDN had more portable styles, notebooks could be more easily embedded in arbitrary webpages.
This is motivated by https://github.com/baldwint/lektor-jupyter/issues/2.
------
Two impractical alternatives are to embed the HTML in an iframe by either
1. making the `src` point to the notebook that is it's own page, which requires the ability to author a page like this (which isn't guaranteed if you don't have edit access to the server, e.g. if you're just using a CMS), or
2. putting _the entire notebook_ in a [`srcdoc` string](https://www.w3schools.com/tags/att_iframe_srcdoc.asp), which would probably be horrible, if possible.
Contributor guide
Research direction
Start with notebook/static/style/style.less and compare it with the notebook/latest/style/style.min.css served by the CDN. Review the styles applied to body, a, #header, .nav, and the Bootstrap dependency, then determine a portable scoping approach for embedded notebooks. Done means the exported stylesheet can be used in an arbitrary webpage with substantially fewer conflicts.
Written by the indexing model from the issue text.
Assessment
- Tech stack
- css, jupyter-notebook
- Domain
- frontend, web-dev
- Issue type
- Feature
- Difficulty
- 5/5
- Estimated time
- Over a week
- Activity status
- Stale
- Clarity
- Needs clarification
- Newbie friendliness
- 25/100