Skip to content

Instantly share code, notes, and snippets.

@tonyfast

tonyfast/Theming nbpresent.ipynb

Forked from anonymous/Theming nbpresent.ipynb
Created January 28, 2016 12:40
Show Gist options
  • Save tonyfast/edfaf95e902efeca3ab9 to your computer and use it in GitHub Desktop.
Save tonyfast/edfaf95e902efeca3ab9 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fontpair.co.json
{"pairs": [
[
"Old Standard TT",
"Cabin"
],
[
"Average",
"Fjalla One"
],
[
"Lora",
"Istok Web"
],
[
"Playfair Display",
"Josefin Sans"
],
[
"Merriweather",
"Lato"
],
[
"Cardo",
"Montserrat"
],
[
"Crimson Text",
"Montserrat"
],
[
"Domine",
"Montserrat"
],
[
"Neuton",
"Montserrat"
],
[
"Playfair Display",
"Montserrat"
],
[
"Playfair Display",
"Muli"
],
[
"Alegreya",
"Nunito"
],
[
"Lora",
"Nunito"
],
[
"Gentium Book Basic",
"Open Sans"
],
[
"Libre Baskerville",
"Open Sans"
],
[
"Lora",
"Open Sans"
],
[
"Playfair Display SC",
"Open Sans"
],
[
"Merriweather",
"Oswald"
],
[
"Old Standard TT",
"Oswald"
],
[
"Quattrocento",
"Oswald"
],
[
"PT Serif",
"PT Sans"
],
[
"EB Garamond",
"Quicksand"
],
[
"Merriweather",
"Raleway"
],
[
"Lora",
"Ubuntu"
],
[
"Open Sans",
"Alegreya"
],
[
"Source Sans Pro",
"Alegreya"
],
[
"Raleway",
"Bitter"
],
[
"Open Sans",
"Bree Serif"
],
[
"Imprima",
"Cantata One"
],
[
"Josefin Sans",
"Cardo"
],
[
"ABeeZee",
"Crete Round"
],
[
"Josefin Sans",
"Josefin Slab"
],
[
"Ubuntu",
"Kreon"
],
[
"Montserrat",
"Libre Baskerville"
],
[
"Open Sans",
"Libre Baskerville"
],
[
"Source Sans Pro",
"Lora"
],
[
"Lato",
"Lustria"
],
[
"Open Sans",
"Merriweather"
],
[
"Source Sans Pro",
"Merriweather"
],
[
"Questrial",
"Old Standard TT"
],
[
"Muli",
"Ovo"
],
[
"Open Sans",
"Playfair Display"
],
[
"Open Sans",
"PT Serif"
],
[
"Quattrocento Sans",
"Quattrocento"
],
[
"Open Sans",
"Roboto Slab"
],
[
"Roboto",
"Roboto Slab"
],
[
"Roboto",
"Rokkitt"
],
[
"Ubuntu",
"Rokkitt"
],
[
"Sintony",
"Rufina"
],
[
"Exo",
"Vollkorn"
],
[
"Ubuntu",
"Montserrat"
],
[
"Ubuntu",
"Abel"
],
[
"Open Sans",
"Amaranth"
],
[
"Arimo",
"Didact Gothic"
],
[
"Open Sans",
"Dosis"
],
[
"Cabin",
"Droid Sans"
],
[
"Open Sans",
"Fjalla One"
],
[
"Didact Gothic",
"Francois One"
],
[
"Lato",
"Francois One"
],
[
"Open Sans",
"Francois One"
],
[
"Open Sans",
"Hind"
],
[
"Hind",
"Montserrat"
],
[
"Istok Web",
"Montserrat"
],
[
"Open Sans",
"Nunito"
],
[
"Nunito",
"Open Sans"
],
[
"Oswald",
"Open Sans"
],
[
"Droid Sans",
"Oswald"
],
[
"Open Sans",
"Oswald"
],
[
"Source Sans Pro",
"Oxygen"
],
[
"Muli",
"Philosopher"
],
[
"Cabin",
"PT Sans"
],
[
"Didact Gothic",
"PT Sans"
],
[
"Cabin",
"Raleway"
],
[
"Roboto",
"Raleway"
],
[
"Nunito",
"Roboto"
],
[
"Open Sans",
"Signika"
],
[
"Cabin",
"Ubuntu"
],
[
"Didact Gothic",
"Ubuntu"
],
[
"Hind",
"Ubuntu"
],
[
"Source Sans Pro",
"Ubuntu"
],
[
"Droid Sans",
"Abril Fatface"
],
[
"Josefin Sans",
"Abril Fatface"
],
[
"Lato",
"Abril Fatface"
],
[
"Andika",
"Amatic SC"
],
[
"Josefin Sans",
"Amatic SC"
],
[
"Pontano Sans",
"Bevan"
],
[
"Asap",
"Flamenco"
],
[
"Arimo",
"Lobster"
],
[
"Cabin",
"Lobster"
],
[
"Lato",
"Medula One"
],
[
"Arimo",
"Pacifico"
],
[
"Oswald",
"Patua One"
],
[
"Gudea",
"Rancho"
],
[
"Roboto",
"Shadows Into Light"
],
[
"Allerta",
"Squada One"
],
[
"Pontano Sans",
"Stint Ultra Expanded"
],
[
"Josefin Sans",
"Yeseva One"
],
[
"Gentium Book Basic",
"Alfa Slab One"
],
[
"EB Garamond",
"Clicker Script"
],
[
"Ledger",
"Dancing Script"
],
[
"EB Garamond",
"Dancing Script"
],
[
"Ledger",
"Nixie One"
],
[
"Lora",
"Patua One"
],
[
"Libre Baskerville",
"Nixie One"
],
[
"Alice",
"Sacramento"
],
[
"Kameron",
"Sansita One"
],
[
"Vollkorn",
"Unica One"
],
[
"Kreon",
"Walter Turncoat"
],
[
"Crimson Text",
"Yeseva One"
],
[
"Lora",
"Bree Serif"
],
[
"Alice",
"Playfair Display"
],
[
"Fauna One",
"Playfair Display"
],
[
"Judson",
"Quando"
],
[
"Fanwood Text",
"Quattrocento"
],
[
"Slabo 13px",
"Ultra"
]
]}
Display the source blob
Display the rendered blob
Raw
Theming nbpresent.ipynb
{
"cells": [
{
"cell_type": "markdown",
"metadata": {},
"source": [
"# Theming nbpresent\n",
"## Understanding Base HTML from Markdown\n",
"The Jupyter Notebook is a veritable battlefield of CSS, with the main players being:\n",
"- the notebook's custom LESS tweaks\n",
"- twitter bootstrap\n",
"- anything someone decides to put up in their notebook\n",
"- re-hosting organizations like nbviewer.org, github.com and anaconda.org\n",
"\n",
"As we move from a visual language optimized for publishing hyperlinked [W3C specs](https://www.w3.org/TR/html5/) to a visual language for presented interactive data, we need to embrace the unerlying architecture."
]
},
{
"cell_type": "code",
"execution_count": 68,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"import os\n",
"import math\n",
"import time\n",
"import json\n",
"import tempfile\n",
"from hashlib import sha1\n",
"\n",
"import jinja2\n",
"import mistune\n",
"import requests\n",
"from IPython import display\n",
"from ipywidgets import widgets\n",
"import traitlets"
]
},
{
"cell_type": "code",
"execution_count": 69,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"def mj(text, iframe=False):\n",
" md = jinja2.Template(text).render(**globals())\n",
" if iframe:\n",
" file_name = \"{}.html\".format(sha1(md.encode()).hexdigest())\n",
" if os.path.exists(file_name):\n",
" os.unlink(file_name)\n",
" with open(file_name, \"w+\") as fp:\n",
" fp.write(\n",
" \"<html><head></head><body>{}</body></html>\".format(\n",
" mistune.markdown(md)))\n",
" return display.IFrame(\n",
" src=\"http://127.0.0.1:8080/notebooks/{}\".format(\n",
" file_name),\n",
" width=\"100%\",\n",
" height=300)\n",
" return display.Markdown(md)"
]
},
{
"cell_type": "code",
"execution_count": 70,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"headings = range(1, 7)"
]
},
{
"cell_type": "markdown",
"metadata": {},
"source": [
"This is the `h*` progression, as viewed by this browser right here."
]
},
{
"cell_type": "code",
"execution_count": 71,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"text/html": [
"\n",
" <iframe\n",
" width=\"100%\"\n",
" height=\"300\"\n",
" src=\"http://127.0.0.1:8080/notebooks/75b0a304f9f7478d2b368541721dcde48d8942c9.html\"\n",
" frameborder=\"0\"\n",
" allowfullscreen\n",
" ></iframe>\n",
" "
],
"text/plain": [
"<IPython.lib.display.IFrame at 0x10713c080>"
]
},
"execution_count": 71,
"metadata": {},
"output_type": "execute_result"
}
],
"source": [
"mj(\"\"\"\n",
"{% for i in headings %}\n",
"{{ \"#\" * i }} This is an h{{i}}\n",
"{% endfor %}\n",
"\"\"\", iframe=True)"
]
},
{
"cell_type": "code",
"execution_count": 72,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Droid Sans', 'Droid Serif']\n",
" }\n",
" })\n",
"})"
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"%%javascript\n",
"require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Droid Sans', 'Droid Serif']\n",
" }\n",
" })\n",
"})"
]
},
{
"cell_type": "code",
"execution_count": 73,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": [
"with open(\"fontpair.co.json\") as fp:\n",
" PAIRS = json.load(fp)[\"pairs\"]"
]
},
{
"cell_type": "code",
"execution_count": 74,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"class FontPicker(widgets.Select):\n",
" def __init__(self, options=None, *args, **kwargs):\n",
" if options is None:\n",
" options = sorted(set(sum(PAIRS, [])))\n",
" super(FontPicker, self).__init__(options=options, *args, **kwargs)\n",
" \n",
" def _value_changed(self, name, new):\n",
" display.display(display.Javascript(\"\"\"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['%s']\n",
" }\n",
" })\n",
" })\n",
" \"\"\" % (new,)))"
]
},
{
"cell_type": "code",
"execution_count": 75,
"metadata": {
"collapsed": false
},
"outputs": [],
"source": [
"class FontTester(widgets.Box):\n",
" def __init__(self, children=None, *args, **kwargs):\n",
" self._font = _font = FontPicker()\n",
" self._size = _size = widgets.IntSlider(description=\"size\",\n",
" value=32,\n",
" min=8,\n",
" max=100,\n",
" width=200)\n",
" self._weight = _weight = widgets.IntSlider(description=\"weight\",\n",
" value=400,\n",
" min=100,\n",
" max=900,\n",
" step=100,\n",
" width=200)\n",
" _sample = widgets.Textarea(\n",
" placeholder=\"The quick brown fox jumped over the lazy dog.\",\n",
" border=\"none\"\n",
" )\n",
" \n",
" traitlets.link((_font, \"value\"), (_sample, \"font_family\"))\n",
" traitlets.link((_size, \"value\"), (_sample, \"font_size\"))\n",
" \n",
" @_weight.observe\n",
" def _weight_changed(change):\n",
" _sample.font_weight = \"{}\".format(_weight.value)\n",
" \n",
" super(FontTester, self).__init__(children=[\n",
" widgets.VBox(children=[\n",
" widgets.HBox(children=[_font, widgets.VBox(children=[\n",
" _size,\n",
" _weight\n",
" ])]),\n",
" _sample\n",
" ])\n",
" ], *args, **kwargs)"
]
},
{
"cell_type": "code",
"execution_count": 82,
"metadata": {
"collapsed": false
},
"outputs": [
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['ABeeZee']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['ABeeZee']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Abel']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Ubuntu']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Open Sans']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Alegreya']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Amaranth']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Andika']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Amatic SC']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Gentium Book Basic']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Alfa Slab One']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Andika']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Amatic SC']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Josefin Sans']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Andika']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Josefin Sans']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Exo']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Vollkorn']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Slabo 13px']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Ultra']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Allerta']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Squada One']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Open Sans']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Signika']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Roboto']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Shadows Into Light']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Kameron']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Sansita One']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Alice']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Sacramento']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Sintony']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Rufina']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Roboto']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
},
{
"data": {
"application/javascript": [
"\n",
" require([\"https://cdn.jsdelivr.net/g/webfontloader\"], function(wfl){\n",
" wfl.load({\n",
" google: {\n",
" families: ['Rokkitt']\n",
" }\n",
" })\n",
" })\n",
" "
],
"text/plain": [
"<IPython.core.display.Javascript object>"
]
},
"metadata": {},
"output_type": "display_data"
}
],
"source": [
"class FontPairer(widgets.Box):\n",
" def __init__(self, *args, **kwargs):\n",
" _head = FontTester()\n",
" _body = FontTester()\n",
" \n",
" _head._font.options = sorted(set([h for b, h in PAIRS]))\n",
" _body._font.options = sorted(set([b for b, h in PAIRS]))\n",
" \n",
" @_head._font.observe\n",
" def _head_changed(change):\n",
" _body._font.options = [b for b, h in PAIRS if h == _head._font.value]\n",
" \n",
" super(FontPairer, self).__init__(children=[\n",
" widgets.HBox(children=[_head, _body])\n",
" ], *args, **kwargs)\n",
"fp = FontPairer()\n",
"fp"
]
},
{
"cell_type": "code",
"execution_count": null,
"metadata": {
"collapsed": true
},
"outputs": [],
"source": []
}
],
"metadata": {
"kernelspec": {
"display_name": "Python 3",
"language": "python",
"name": "python3"
},
"language_info": {
"codemirror_mode": {
"name": "ipython",
"version": 3
},
"file_extension": ".py",
"mimetype": "text/x-python",
"name": "python",
"nbconvert_exporter": "python",
"pygments_lexer": "ipython3",
"version": "3.5.1"
}
},
"nbformat": 4,
"nbformat_minor": 0
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment