anaconda / nbpresent

next generation slides for Jupyter Notebooks
BSD 3-Clause "New" or "Revised" License
164 stars 24 forks source link

bug: no way to express font fallbacks in SCSS themes? #81

Open jason-s opened 8 years ago

jason-s commented 8 years ago

There appears to be no way to express font fallbacks in the SCSS themes. The normal CSS is

 body { font-family: Arial, Tahoma; }

but if you use this in the SCSS it tries to find a font-family of "Arial, Tahoma"; I've tried using an array but it fails and gives me the error nbpresent.deps.min.js:55 Uncaught TypeError: n[e].split is not a function

here are notebooks demonstrating this:

fallback-fonts-fail.zip

bollwyvl commented 8 years ago

Sorry, to which themes are you referring? The nbpresent build chain is based on less...

Also, instead of attaching notebooks as zips, please consider publishing them as gists and using nbviewer :) This lets us conveniently reference them. Actually, for this purpose, an anonymous gist is ideal, as it is immutable, and links will always work :)

jason-s commented 8 years ago

oh -- ok, I'll do that. Coming up....

jason-s commented 8 years ago

here you go

https://gist.github.com/jason-s/a3c00bcaa362359c7c87ea48f7fe986d

It doesn't show the slideshow in nbviewer, however. You have to run them from a Jupyter instance to use the slideshow features.

These are themes based on reveal.js "Simple" theme (using the "import from reveal.js" ipython notebook) and tweaked by hand to change the main font-family.

jason-s commented 8 years ago

one of them looks like this:

    "theme": {
     "simple-by-revealjs-3.3.0": {
      "backgrounds": {
       "backgroundColor": {
        "background-color": "backgroundColor",
        "id": "backgroundColor"
       }
      },
      "id": "simple-by-revealjs-3.3.0",
      "palette": {
       "backgroundColor": {
        "id": "backgroundColor",
        "rgb": [
         255,
         255,
         255
        ]
       },
       "headingColor": {
        "id": "headingColor",
        "rgb": [
         0,
         0,
         0
        ]
       },
       "linkColor": {
        "id": "linkColor",
        "rgb": [
         0,
         0,
         139
        ]
       },
       "mainColor": {
        "id": "mainColor",
        "rgb": [
         0,
         0,
         0
        ]
       }
      },
      "rules": {
       "a": {
        "color": "linkColor"
       },
       "h1": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 7
       },
       "h2": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 5
       },
       "h3": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 3.75
       },
       "h4": {
        "color": "headingColor",
        "font-family": "News Cycle",
        "font-size": 3
       },
       "h5": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "h6": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "h7": {
        "color": "headingColor",
        "font-family": "News Cycle"
       },
       "li": {
        "color": "mainColor",
        "font-family": "Tahoma, Arial",
        "font-size": 5
       },
       "p": {
        "color": "mainColor",
        "font-family": "Tahoma, Arial",
        "font-size": 5
       }
      },
      "text-base": {
       "color": "mainColor",
       "font-family": "Tahoma, Arial",
       "font-size": 5
      }
     }
    },
jason-s commented 8 years ago

The other one contains

      "text-base": {
       "color": "mainColor",
       "font-family": ["Tahoma", "Arial"],
       "font-size": 5
      }

in a vain attempt to figure out how to get font fallbacks to work.

bollwyvl commented 8 years ago

Ok, that makes more sense.

nbpresent doesn't presently handle font fallback chains. Indeed, we're considering how to embed actual fonts, again on the archival output goal.

Again, if you are already very comfortable with these kinds of concepts, you may have more success working directly with the reveal.js/RISE approach!