docs.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "# ipymarkup"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Collection of NLP vizualizations for NER and syntax tree markup. Similar to Spacy <a href=\"https://explosion.ai/demos/displacy\">displaCy</a> and <a href=\"https://explosion.ai/demos/displacy-ent\">displaCy ENT</a>."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<table><tr style=\"background: none\"><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_span_box_markup</div></td><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_span_line_markup</div></td><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_span_ascii_markup</div></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a a a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c c c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span></div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a a a</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">b b</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">c c c</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a a a b b c c c\n",
       "a──── b── c────</pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a a a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">e<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">e</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">d d d<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #ffb74d;\">d</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">f f<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">f</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">g g<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">g</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">h<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">h</span></span></div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a a a</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">b b</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">c</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 8px\">e</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">e</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">d d d</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">d</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #bcaaa4; padding-bottom: 8px\">f f</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">f</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">g g</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">g</span></span><span style=\"display: inline-block; vertical-align: top\"> </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">h</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">h</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a a a b b c e d d d f f g g h\n",
       "a──── b── c e d──── f── g── h</pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a d a b a a a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">d a b a a a b c c c f d<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #ffb74d;\">d</span></span><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b a a a b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c c c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">f<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">f</span></span> d</div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">d a </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">d</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 30px\">b a a a</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 30px\"> b</span></span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">c c c</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #bcaaa4; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">f</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">f</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"> d</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a d a b a a a b c c c f d\n",
       "a────────────   c──── f  \n",
       "  d──────────────────────\n",
       "      b────────          </pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">a b b c c d e f g h h i i a<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">a</span></span><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">b b<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">c c<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">d<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #ffb74d;\">d</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">e<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">e</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">f<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">f</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">g<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">g</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">h h<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">h</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">i i<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">i</span></span> a</div></td><td style=\"width: 20%\"><div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">a </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">a</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 19px\">b b</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">b</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">c c</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">d</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">d</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 19px\">e</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">e</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #bcaaa4; padding-bottom: 19px\">f</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">f</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">g</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">g</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 19px\">h h</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">h</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">i i</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">i</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> a</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div></td><td style=\"width: 20%\"><pre>a b b c c d e f g h h i i a\n",
       "a──────────────────────────\n",
       "  b── c── d e f g h── i──  </pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_dep_markup</div></td><td style=\"width: 20%\"><div style=\"margin-top: 2em\">show_dep_ascii_markup</div></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 85%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">30</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 71%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 57%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">20</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 42%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 28%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">10</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 14%\"></span></span><span style=\"display: block\">aaaaa</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 57%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">31</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 42%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 28%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 28%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">21</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 14%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">01</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 14%\"></span></span><span style=\"display: block\">bbbbb</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 57%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 42%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">02</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 28%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 28%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">32</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 14%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">12</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 14%\"></span></span><span style=\"display: block\">ccccc</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 90px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 80px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 85%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 70px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 71%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">03</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 57%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 42%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">13</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 28%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 14%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">23</span></span></span><span style=\"display: block\">ddddd</span></span></div></td><td style=\"width: 20%\"><pre>┌►┌─────┌►┌─────┌►┌─ aaaaa 10\n",
       "│ │ ┌►┌─│ │ ┌►┌─└─└► bbbbb 01\n",
       "│ │ │ │ └─└►└─└──►┌─ ccccc 12\n",
       "└─└►└─└──►└───────└► ddddd 23</pre></td></tr><tr style=\"background: none\"><td style=\"width: 20%\"><div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 80%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 60%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">ea</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 20%\"></span></span><span style=\"display: block\">aaa</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">ab</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">cb</span></span></span><span style=\"display: block\">bbb</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">dc</span></span></span><span style=\"display: block\">ccc</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">ad</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span></span><span style=\"display: block\">ddd</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">ge</span></span></span><span style=\"display: block\">eee</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">gf</span></span></span><span style=\"display: block\">fff</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 75%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">ag</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 25%\"></span></span><span style=\"display: block\">ggg</span></span></div></td><td style=\"width: 20%\"><pre>┌─┌►┌───┌─ aaa ea\n",
       "│ │ │ ┌►└► bbb ab\n",
       "│ │ │ └─┌► ccc dc\n",
       "│ │ └──►└─ ddd ad\n",
       "│ └───┌──► eee ge\n",
       "│     │ ┌► fff gf\n",
       "└────►└─└─ ggg ag</pre></td></tr></table>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipymarkup.demo import show_table\n",
    "show_table()"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## NER"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "All NER markup visualization functions have two arguments as input: `text` and `spans`. `spans` are tuples of `start`, `stop` and optional `type`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `show_span_ascii_markup`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 2,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "В мероприятии примут участие не только российские учёные, но и \n",
      "зарубежные исследователи, в том числе, Крис Хелмбрехт - управляющий \n",
      "                                       PER───────────               \n",
      "директор и совладелец креативного агентства Kollektiv (Германия, США),\n",
      "                                                       LOC─────  LOC  \n",
      " Ннека Угбома - руководитель проекта Mushroom works (Великобритания), \n",
      " PER─────────                                        LOC───────────   \n",
      "Гергей Ковач - политик и лидер субкультурной партии «Dog with two \n",
      "PER─────────                                         ORG──────────\n",
      "tails» (Венгрия), Георг Жено - немецкий режиссёр, один из создателей \n",
      "─────   LOC────   PER───────                                         \n",
      "экспериментального театра «Театр.doc», Театра им. Йозефа Бойса \n",
      "                                       ORG─────── PER───────── \n",
      "(Германия).\n",
      " LOC─────  \n"
     ]
    }
   ],
   "source": [
    "from ipymarkup import show_span_ascii_markup\n",
    "\n",
    "text = 'В мероприятии примут участие не только российские учёные, но и зарубежные исследователи, в том числе, Крис Хелмбрехт - управляющий директор и совладелец креативного агентства Kollektiv (Германия, США), Ннека Угбома - руководитель проекта Mushroom works (Великобритания), Гергей Ковач - политик и лидер субкультурной партии «Dog with two tails» (Венгрия), Георг Жено - немецкий режиссёр, один из создателей экспериментального театра «Театр.doc», Театра им. Йозефа Бойса (Германия).'\n",
    "spans = [(102, 116, 'PER'), (186, 194, 'LOC'), (196, 199, 'LOC'), (202, 214, 'PER'), (254, 268, 'LOC'), (271, 283, 'PER'), (324, 342, 'ORG'), (345, 352, 'LOC'), (355, 365, 'PER'), (445, 455, 'ORG'), (456, 468, 'PER'), (470, 478, 'LOC')]\n",
    "\n",
    "show_span_ascii_markup(text, spans)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `show_span_box_markup`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">В мероприятии примут участие не только российские учёные, но и зарубежные исследователи, в том числе, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Крис Хелмбрехт<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - управляющий директор и совладелец креативного агентства Kollektiv (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">США<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Ннека Угбома<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - руководитель проекта Mushroom works (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Великобритания<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Гергей Ковач<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - политик и лидер субкультурной партии «<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Dog with two tails<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">ORG</span></span>» (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Венгрия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Георг Жено<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> - немецкий режиссёр, один из создателей экспериментального театра «Театр.doc», <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Театра им.<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">ORG</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">Йозефа Бойса<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span> (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d7ccc8; background: #efebe9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #a1887f;\">LOC</span></span>).</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipymarkup import show_span_box_markup\n",
    "\n",
    "show_span_box_markup(text, spans)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To assign specific colors use `ipymarkup.palette`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">В мероприятии примут участие не только российские учёные, но и зарубежные исследователи, в том числе, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Крис Хелмбрехт<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - управляющий директор и совладелец креативного агентства Kollektiv (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>, <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">США<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Ннека Угбома<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - руководитель проекта Mushroom works (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Великобритания<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Гергей Ковач<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - политик и лидер субкультурной партии «<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">Dog with two tails<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">ORG</span></span>» (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Венгрия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>), <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Георг Жено<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> - немецкий режиссёр, один из создателей экспериментального театра «Театр.doc», <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">Театра им.<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">ORG</span></span> <span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">Йозефа Бойса<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span> (<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">Германия<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">LOC</span></span>).</div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipymarkup.palette import palette, BLUE, RED, GREEN\n",
    "\n",
    "show_span_box_markup(text, spans, palette=palette(PER=BLUE, ORG=RED, LOC=GREEN))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `show_span_line_markup`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 5,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\">В мероприятии примут участие не только российские учёные, но и зарубежные </span></div><div><span style=\"display: inline-block; vertical-align: top\">исследователи, в том числе, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">Крис Хелмбрехт - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">управляющий директор</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"> и </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">совладелец </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\">креативного агентства Kollektiv (</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 41px\">Германия</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\">, </span></span></span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 41px\">США</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 30px\">)</span></span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">Ннека Угбома - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">руководитель </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">проекта Mushroom works</span></span></span><span style=\"display: inline-block; vertical-align: top\"> (</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 8px\">Великобритания</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\">), Гергей Ковач - политик и </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">лидер </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">субкультурной партии «Dog with two tails» (</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 30px\">Венгрия</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 19px\">)</span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">Георг Жено - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">немецкий </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 19px\">режиссёр</span></span></span><span style=\"display: inline-block; vertical-align: top\">, один из создателей </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">экспериментального театра «Театр.doc»</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">Театра им. </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">Йозефа Бойса (</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #b39ddb; padding-bottom: 19px\">Германия</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">)</span></span><span style=\"display: inline-block; vertical-align: top\">.</span></div></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipymarkup import show_span_line_markup\n",
    "\n",
    "spans = [(102, 200, 'PERSON'), (119, 139, 'PERSONPROPERTY'), (142, 200, 'PERSONPROPERTY'), (153, 200, 'ORGANIZATION'), (186, 194, 'GEO'), (196, 199, 'GEO'), (202, 252, 'PERSON'), (217, 252, 'PERSONPROPERTY'), (254, 268, 'GEO'), (296, 353, 'PERSONPROPERTY'), (302, 353, 'ORGANIZATION'), (345, 352, 'GEO'), (355, 385, 'PERSON'), (368, 385, 'PERSONPROPERTY'), (406, 443, 'ORGANIZATION'), (445, 479, 'ORGANIZATION'), (470, 478, 'GEO')]\n",
    "show_span_line_markup(text, spans)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To make all colors blue, initialize palette with single color:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 6,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\">В мероприятии примут участие не только российские учёные, но и зарубежные </span></div><div><span style=\"display: inline-block; vertical-align: top\">исследователи, в том числе, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Крис Хелмбрехт - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">управляющий директор</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"> и </span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">совладелец </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">креативного агентства Kollektiv (</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 41px\">Германия</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">, </span></span></span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 44px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 41px\">США</span></span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -41px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">)</span></span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Ннека Угбома - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">руководитель </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">проекта Mushroom works</span></span></span><span style=\"display: inline-block; vertical-align: top\"> (</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Великобритания</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\">), Гергей Ковач - политик и </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">лидер </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">субкультурной партии «Dog with two tails» (</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 33px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 30px\">Венгрия</span></span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -30px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">)</span></span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Георг Жено - </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">PERSON</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">немецкий </span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">PERSONPROPERTY</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">режиссёр</span></span></span><span style=\"display: inline-block; vertical-align: top\">, один из создателей </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">экспериментального театра «Театр.doc»</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\">, </span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Театра им. </span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">ORGANIZATION</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div><div><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">Йозефа Бойса (</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 22px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 19px\">Германия</span></span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -19px\">GEO</span></span><span style=\"display: inline-block; vertical-align: top\"></span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #90caf9; padding-bottom: 8px\">)</span></span><span style=\"display: inline-block; vertical-align: top\">.</span></div></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "show_span_line_markup(text, spans, palette=palette(BLUE))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## `show_span_ascii_markup`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 7,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "В мероприятии примут участие не только российские учёные, но и \n",
      "зарубежные исследователи, в том числе, Крис Хелмбрехт - управляющий \n",
      "                                       PERSON───────────────────────\n",
      "                                                        PERSONPROPER\n",
      "директор и совладелец креативного агентства Kollektiv (Германия, США),\n",
      "───────────────────────────────────────────────────────────────────── \n",
      "────────   PERSONPROPERTY──────────────────────────────────────────── \n",
      "                      ORGANIZATION─────────────────────────────────── \n",
      "                                                       GEO─────  GEO  \n",
      " Ннека Угбома - руководитель проекта Mushroom works (Великобритания), \n",
      " PERSON────────────────────────────────────────────  GEO───────────   \n",
      "                PERSONPROPERTY─────────────────────                   \n",
      "Гергей Ковач - политик и лидер субкультурной партии «Dog with two \n",
      "                         PERSONPROPERTY───────────────────────────\n",
      "                               ORGANIZATION───────────────────────\n",
      "tails» (Венгрия), Георг Жено - немецкий режиссёр, один из создателей \n",
      "────────────────  PERSON────────────────────────                     \n",
      "────────────────               PERSONPROPERTY───                     \n",
      "        GEO────                                                      \n",
      "экспериментального театра «Театр.doc», Театра им. Йозефа Бойса \n",
      "ORGANIZATION─────────────────────────  ORGANIZATION────────────\n",
      "(Германия).\n",
      "────────── \n",
      " GEO─────  \n"
     ]
    }
   ],
   "source": [
    "show_span_ascii_markup(text, spans)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `spans`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For convenience `span` objects can be tuples, dicts or objects:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">0<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">1</span>2<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">3<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">b</span></span>4<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">5</span>6<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">7</span>8<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">9<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">c</span></span></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><div><span style=\"display: inline-block; vertical-align: top\">0</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">1</span></span><span style=\"display: inline-block; vertical-align: top\">2</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #a5d6a7; padding-bottom: 8px\">3</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">b</span></span><span style=\"display: inline-block; vertical-align: top\">4</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">5</span></span><span style=\"display: inline-block; vertical-align: top\">6</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ffcc80; padding-bottom: 8px\">7</span></span><span style=\"display: inline-block; vertical-align: top\">8</span><span style=\"display: inline-block; vertical-align: top; position: relative; margin-bottom: 11px\"><span style=\"border-bottom: 3px solid #ef9a9a; padding-bottom: 8px\">9</span><span style=\"font-size: 11px; line-height: 1; white-space: nowrap; text-shadow: 1px 1px 0px white; position: absolute; left: 0; bottom: -8px\">c</span></span><span style=\"display: inline-block; vertical-align: top\"></span></div></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "0123456789\n",
      " ─ b ─ ─ c\n"
     ]
    }
   ],
   "source": [
    "class C(object):\n",
    "    def __init__(self, start, stop, type=None):\n",
    "        self.start = start\n",
    "        self.stop = stop\n",
    "        self.type = type\n",
    "        \n",
    "        \n",
    "text = '0123456789'\n",
    "spans = [\n",
    "    (1, 2),  # tuple/list (int, int)\n",
    "    (3, 4, 'b'), # tuple/list (int, int, str)\n",
    "    [5, 6],\n",
    "    C(7, 8),\n",
    "    C(9, 10, 'c')  # object with start, stop, type attributes\n",
    "]\n",
    "show_span_box_markup(text, spans)\n",
    "show_span_line_markup(text, spans)\n",
    "show_span_ascii_markup(text, spans)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Syntax tree"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Syntax tree visualization functions have two arguments as input: `words` and `deps`. `words` are strings, `deps` — list of tuples `source`, `target` and optional `type`."
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `show_dep_markup`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">case</span></span></span><span style=\"display: block\">В</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">amod</span></span></span><span style=\"display: block\">советский</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 40%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">obl</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 20%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 20%\"></span></span><span style=\"display: block\">период</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nmod</span></span></span><span style=\"display: block\">времени</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 75%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">obj</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 25%\"></span></span><span style=\"display: block\">число</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">compound</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"></span></span><span style=\"display: block\">ИТ</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">punct</span></span></span><span style=\"display: block\">-</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nmod</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span></span><span style=\"display: block\">специалистов</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">case</span></span></span><span style=\"display: block\">в</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nmod</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"></span></span><span style=\"display: block\">Армении</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 70px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 60px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 50px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 20%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 40%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 20%\"></span></span><span style=\"display: block\">составляло</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">case</span></span></span><span style=\"display: block\">около</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; left: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(5deg)\">nummod</span></span></span><span style=\"display: block\">десяти</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 75%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">nsubj</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 25%\"></span></span><span style=\"display: block\">тысяч</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 50px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 40px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">punct</span></span></span><span style=\"display: block\">.</span></span></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    }
   ],
   "source": [
    "from ipymarkup import show_dep_markup\n",
    "\n",
    "words = ['В', 'советский', 'период', 'времени', 'число', 'ИТ', '-', 'специалистов', 'в', 'Армении', 'составляло', 'около', 'десяти', 'тысяч', '.']\n",
    "deps = [(2, 0, 'case'), (2, 1, 'amod'), (10, 2, 'obl'), (2, 3, 'nmod'), (10, 4, 'obj'), (7, 5, 'compound'), (5, 6, 'punct'), (4, 7, 'nmod'), (9, 8, 'case'), (4, 9, 'nmod'), (13, 11, 'case'), (13, 12, 'nummod'), (10, 13, 'nsubj'), (10, 14, 'punct')]\n",
    "show_dep_markup(words, deps)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `show_dep_ascii_markup`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "        ┌──► В            case\n",
      "        │ ┌► советский    amod\n",
      "┌──────►└─└─ период       obl\n",
      "│       └──► времени      nmod\n",
      "│ ┌►┌─┌───── число        obj\n",
      "│ │ │ │ ┌►┌─ ИТ           compound\n",
      "│ │ │ │ │ └► -            punct\n",
      "│ │ │ └►└─── специалистов nmod\n",
      "│ │ │     ┌► в            case\n",
      "│ │ └────►└─ Армении      nmod\n",
      "└─└─┌─┌───── составляло   \n",
      "    │ │ ┌──► около        case\n",
      "    │ │ │ ┌► десяти       nummod\n",
      "    │ └►└─└─ тысяч        nsubj\n",
      "    └──────► .            punct\n"
     ]
    }
   ],
   "source": [
    "from ipymarkup import show_dep_ascii_markup\n",
    "\n",
    "words = ['В', 'советский', 'период', 'времени', 'число', 'ИТ', '-', 'специалистов', 'в', 'Армении', 'составляло', 'около', 'десяти', 'тысяч', '.']\n",
    "deps = [(2, 0, 'case'), (2, 1, 'amod'), (10, 2, 'obl'), (2, 3, 'nmod'), (10, 4, 'obj'), (7, 5, 'compound'), (5, 6, 'punct'), (4, 7, 'nmod'), (9, 8, 'case'), (4, 9, 'nmod'), (13, 11, 'case'), (13, 12, 'nummod'), (10, 13, 'nsubj'), (10, 14, 'punct')]\n",
    "show_dep_ascii_markup(words, deps)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `deps`"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "For convenience `dep` objects can be tuples, dicts or objects. Same as `spans` in NER visualizations:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/html": [
       "<div class=\"tex2jax_ignore\"><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 66%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"></span></span><span style=\"display: block\">aa</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 30px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 25%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 25%\"></span></span><span style=\"display: block\">bb</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 20px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 66%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">b</span></span></span><span style=\"display: block\">cc</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 40px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 30px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 33%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span><span style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\">c</span></span><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 33%\"></span></span><span style=\"display: block\">dd</span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 20px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; width: 100%\"></span></span><span style=\"display: block\"> </span></span><span style=\"display: inline-block\"><span style=\"display: block; position: relative; min-width: 5px; height: 20px\"><span style=\"display: block; position: absolute; bottom: 0; border-top: 1px solid #bdbdbd; height: 10px; left: 0; border-top-right-radius: 5px; border-right: 1px solid #bdbdbd; transform: skew(5deg); width: 50%\"><span style=\"display: block; position: absolute; bottom: -1px; width: 0; height: 0; border-left: 3px solid transparent; border-right: 3px solid transparent; border-top: 6px solid #bdbdbd; right: -3px\"></span></span></span><span style=\"display: block\">ee</span></span></div>"
      ],
      "text/plain": [
       "<IPython.core.display.HTML object>"
      ]
     },
     "metadata": {},
     "output_type": "display_data"
    },
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "  ┌───┌─ aa \n",
      "┌─│ ┌─└► bb \n",
      "│ └►└──► cc b\n",
      "└────►┌─ dd c\n",
      "      └► ee \n"
     ]
    }
   ],
   "source": [
    "class C(object):\n",
    "    def __init__(self, source, target, type=None):\n",
    "        self.source = source\n",
    "        self.target = target\n",
    "        self.type = type\n",
    "        \n",
    "        \n",
    "words = 'aa bb cc dd ee'.split()\n",
    "deps = [\n",
    "    (0, 1),\n",
    "    (1, 2, 'b'),\n",
    "    [3, 4],\n",
    "    C(0, 2),\n",
    "    C(1, 3, 'c')\n",
    "]\n",
    "show_dep_markup(words, deps)\n",
    "show_dep_ascii_markup(words, deps)"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "## Cookbook"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "### `format_*` functions"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "To use visualizations outside of Jupyter notebook use `format_*` function. For example `show_dep_ascii_markup` has `format_dep_ascii_markup` counterpart that return generator of strings:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['  ┌───┌─ aa ',\n",
       " '┌─│ ┌─└► bb ',\n",
       " '│ └►└──► cc b',\n",
       " '└────►┌─ dd c',\n",
       " '      └► ee ']"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from ipymarkup import format_dep_ascii_markup\n",
    "\n",
    "list(format_dep_ascii_markup(words, deps))"
   ]
  },
  {
   "cell_type": "markdown",
   "metadata": {},
   "source": [
    "Same for `show_span_box_markup` and `format_span_box_markup`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "metadata": {},
   "outputs": [
    {
     "data": {
      "text/plain": [
       "['<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">',\n",
       " '0',\n",
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">',\n",
       " '1',\n",
       " '</span>',\n",
       " '2',\n",
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #c8e6c9; background: #e8f5e9\">',\n",
       " '3',\n",
       " '<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #66bb6a;\">',\n",
       " 'b',\n",
       " '</span>',\n",
       " '</span>',\n",
       " '4',\n",
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">',\n",
       " '5',\n",
       " '</span>',\n",
       " '6',\n",
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">',\n",
       " '7',\n",
       " '</span>',\n",
       " '8',\n",
       " '<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffcdd2; background: #ffebee\">',\n",
       " '9',\n",
       " '<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #e57373;\">',\n",
       " 'c',\n",
       " '</span>',\n",
       " '</span>',\n",
       " '',\n",
       " '</div>']"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from ipymarkup import format_span_box_markup\n",
    "\n",
    "list(format_span_box_markup(text, spans))"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "language_info": {
   "name": "python"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 2
}