ipymarkup
/
test.ipynb
426 строк · 59.2 Кб
1{2"cells": [3{4"cell_type": "code",5"execution_count": 1,6"metadata": {},7"outputs": [],8"source": [9"from ipymarkup.span import Span\n",10"from ipymarkup.dep import Dep\n",11"from ipymarkup.demo import show_table\n",12"\n",13"from ipymarkup import (\n",14" show_span_box_markup,\n",15" show_span_ascii_markup,\n",16" show_dep_markup\n",17")\n",18"from ipymarkup.palette import palette, BLUE, ORANGE, PURPLE"19]20},21{22"cell_type": "markdown",23"metadata": {},24"source": [25"# Html"26]27},28{29"cell_type": "code",30"execution_count": 2,31"metadata": {},32"outputs": [33{34"data": {35"text/html": [36"<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",37"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",38"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",39"a──────────── c──── f \n",40" d──────────────────────\n",41" 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",42"a──────────────────────────\n",43" 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",44"│ │ ┌►┌─│ │ ┌►┌─└─└► bbbbb 01\n",45"│ │ │ │ └─└►└─└──►┌─ ccccc 12\n",46"└─└►└─└──►└───────└► 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",47"│ │ │ ┌►└► bbb ab\n",48"│ │ │ └─┌► ccc dc\n",49"│ │ └──►└─ ddd ad\n",50"│ └───┌──► eee ge\n",51"│ │ ┌► fff gf\n",52"└────►└─└─ ggg ag</pre></td></tr></table>"53],54"text/plain": [55"<IPython.core.display.HTML object>"56]57},58"metadata": {},59"output_type": "display_data"60}61],62"source": [63"show_table()"64]65},66{67"cell_type": "code",68"execution_count": 3,69"metadata": {},70"outputs": [71{72"data": {73"text/html": [74"<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\"><i></span>abc</i></div>"75],76"text/plain": [77"<IPython.core.display.HTML object>"78]79},80"metadata": {},81"output_type": "display_data"82}83],84"source": [85"text = '<i>abc</i>'\n",86"spans = [Span(0, 3)]\n",87"show_span_box_markup(text, spans)"88]89},90{91"cell_type": "code",92"execution_count": 4,93"metadata": {},94"outputs": [95{96"data": {97"text/html": [98"<div class=\"tex2jax_ignore\"><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; right: 0; border-top-left-radius: 5px; border-left: 1px solid #bdbdbd; transform: skew(-5deg); width: 50%\"></span></span><span style=\"display: block\"><i>abc</i></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 style=\"display: block; position: absolute; top: -10px; line-height: 1; font-size: 9px; color: #9e9e9e; transform: skew(-5deg)\"><b>1</b></span></span></span><span style=\"display: block\">cde</span></span></div>"99],100"text/plain": [101"<IPython.core.display.HTML object>"102]103},104"metadata": {},105"output_type": "display_data"106}107],108"source": [109"# to hide u' in python2\n",110"words = ['<i>abc</i>', 'cde']\n",111"spans = [Dep(0, 1, '<b>1</b>')]\n",112"show_dep_markup(words, spans)"113]114},115{116"cell_type": "code",117"execution_count": 5,118"metadata": {},119"outputs": [120{121"data": {122"text/html": [123"<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\">\\begin{aligned}\n",124" \\nabla \\cdot \\vec{\\mathbf{B}} = 0\n",125"\\end{aligned}</div>"126],127"text/plain": [128"<IPython.core.display.HTML object>"129]130},131"metadata": {},132"output_type": "display_data"133}134],135"source": [136"text = r'''\\begin{aligned}\n",137" \\nabla \\cdot \\vec{\\mathbf{B}} = 0\n",138"\\end{aligned}'''\n",139"spans = []\n",140"show_span_box_markup(text, spans)"141]142},143{144"cell_type": "code",145"execution_count": 6,146"metadata": {},147"outputs": [],148"source": [149"from ipymarkup.span import Span\n",150"from ipymarkup.dep import Dep\n",151"from ipymarkup.demo import show_table\n",152"\n",153"from ipymarkup import (\n",154" show_span_box_markup,\n",155" show_span_ascii_markup,\n",156" show_dep_markup\n",157")\n",158"from ipymarkup.palette import palette, BLUE, ORANGE, PURPLE"159]160},161{162"cell_type": "markdown",163"metadata": {},164"source": [165"# Ascii"166]167},168{169"cell_type": "code",170"execution_count": 7,171"metadata": {},172"outputs": [173{174"name": "stdout",175"output_type": "stream",176"text": [177"a d a b a a a b c c c f d\n",178"a──────────── c──── f \n",179" d──────────────────────\n",180" b──────── \n"181]182}183],184"source": [185"text = 'a d a b a a a b c c c f d'\n",186"spans = [\n",187" Span(0, 13, 'a'),\n",188" Span(2, 25, 'd'),\n",189" Span(6, 15, 'b'),\n",190" Span(16, 21, 'c'),\n",191" Span(22, 23, 'f'),\n",192"]\n",193"\n",194"show_span_ascii_markup(text, spans)"195]196},197{198"cell_type": "code",199"execution_count": 8,200"metadata": {},201"outputs": [202{203"name": "stdout",204"output_type": "stream",205"text": [206"a d a b \n",207"a───────\n",208" d─────\n",209" b─\n",210"a a a b \n",211"───── \n",212"────────\n",213"─────── \n",214"c c c f \n",215"c──── f \n",216"────────\n",217"d\n",218" \n",219"─\n"220]221}222],223"source": [224"show_span_ascii_markup(text, spans, width=8)"225]226},227{228"cell_type": "code",229"execution_count": 9,230"metadata": {},231"outputs": [232{233"name": "stdout",234"output_type": "stream",235"text": [236"0123456789\n",237"abc abcd\n",238" abcdef── \n",239"0123456789\n",240"───── \n"241]242}243],244"source": [245"text = '01234567890123456789'\n",246"spans = [\n",247" Span(6, 15, 'abcdef'),\n",248" Span(0, 3, 'abcdef'),\n",249" Span(1, 9, 'abcdef')\n",250"]\n",251"show_span_ascii_markup(text, spans, width=10)"252]253},254{255"cell_type": "code",256"execution_count": 10,257"metadata": {},258"outputs": [259{260"name": "stdout",261"output_type": "stream",262"text": [263"123\n"264]265}266],267"source": [268"text = '123'\n",269"spans = []\n",270"show_span_ascii_markup(text, spans)"271]272},273{274"cell_type": "code",275"execution_count": 11,276"metadata": {},277"outputs": [278{279"name": "stdout",280"output_type": "stream",281"text": [282" 1\n",283" ─\n",284"34\n",285"──\n"286]287}288],289"source": [290"text = '''\\t1\n",291"34'''\n",292"spans = [Span(1, 5)]\n",293"show_span_ascii_markup(text, spans)"294]295},296{297"cell_type": "code",298"execution_count": 12,299"metadata": {},300"outputs": [301{302"name": "stdout",303"output_type": "stream",304"text": [305"0123456\n",306"───── \n",307"─── \n",308"a── \n",309"c── \n"310]311}312],313"source": [314"text = '''0123456'''\n",315"spans = [\n",316" Span(0, 5),\n",317" Span(0, 3),\n",318" Span(0, 3, 'a'),\n",319" Span(0, 3, 'c')\n",320"]\n",321"show_span_ascii_markup(text, spans)"322]323},324{325"cell_type": "code",326"execution_count": 13,327"metadata": {},328"outputs": [329{330"name": "stdout",331"output_type": "stream",332"text": [333"0123456\n",334"───── \n",335"─── \n",336"a── \n",337"c── \n"338]339}340],341"source": [342"class C(object):\n",343" def __init__(self, start, stop, type):\n",344" self.start = start\n",345" self.stop = stop\n",346" self.type = type\n",347"\n",348" \n",349"spans = [\n",350" (0, 5),\n",351" [0, 3],\n",352" (0, 3, 'a'),\n",353" C(0, 3, 'c'),\n",354"]\n",355"show_span_ascii_markup(text, spans)"356]357},358{359"cell_type": "markdown",360"metadata": {},361"source": [362"# Palette"363]364},365{366"cell_type": "code",367"execution_count": 14,368"metadata": {},369"outputs": [370{371"data": {372"text/html": [373"<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">12</span>3<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">456<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">PER</span></span>7<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #ffe0b2; background: #fff3e0\">89<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #ffb74d;\">LOC-a</span></span>0</div>"374],375"text/plain": [376"<IPython.core.display.HTML object>"377]378},379"metadata": {},380"output_type": "display_data"381}382],383"source": [384"text = '1234567890'\n",385"spans = [(0, 2), (3, 6, 'PER'), (7, 9, 'LOC-a')]\n",386"show_span_box_markup(text, spans, palette=palette(BLUE, {None: BLUE, 'LOC-a': ORANGE}, PER=BLUE))"387]388},389{390"cell_type": "code",391"execution_count": 15,392"metadata": {},393"outputs": [394{395"data": {396"text/html": [397"<div class=\"tex2jax_ignore\" style=\"white-space: pre-wrap\"><span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">12</span>3<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #d1c4e9; background: #ede7f6\">456<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #9575cd;\">PER</span></span>7<span style=\"padding: 2px; border-radius: 4px; border: 1px solid #bbdefb; background: #e3f2fd\">89<span style=\"vertical-align: middle; margin-left: 2px; font-size: 0.7em; color: #64b5f6;\">LOC-a</span></span>0</div>"398],399"text/plain": [400"<IPython.core.display.HTML object>"401]402},403"metadata": {},404"output_type": "display_data"405}406],407"source": [408"show_span_box_markup(text, spans, palette=palette('blue', PURPLE, {None: 'blue', 'PER': 'purple'}))"409]410},411{412"cell_type": "code",413"execution_count": null,414"metadata": {},415"outputs": [],416"source": []417}418],419"metadata": {420"language_info": {421"name": "python"422}423},424"nbformat": 4,425"nbformat_minor": 2426}427