examples/svg_essentials/08_Text.ipynb

{
 "cells": [
  {
   "cell_type": "markdown",
   "id": "southern-manchester",
   "metadata": {},
   "source": [
    "# 8. Text"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "continuing-description",
   "metadata": {},
   "outputs": [],
   "source": [
    "draw.Text(text, fontSize, x=None, y=None, *, center=False,\n",
    "           valign=None, lineHeight=1, lineOffset=0, path=None,\n",
    "           startOffset=None, pathArgs=None, tspanArgs=None,\n",
    "           cairoFix=True, _skipCheck=False, **kwargs)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 1,
   "id": "perfect-segment",
   "metadata": {},
   "outputs": [],
   "source": [
    "import drawsvg as dw"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "following-jonathan",
   "metadata": {},
   "source": [
    "## 8.1 Text Terminology"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "respective-career",
   "metadata": {},
   "source": [
    "## 8.2 Simple Attributes and Properties of the `text` Element"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "current-leone",
   "metadata": {},
   "source": [
    "Default is black as fill colour and no outline."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 3,
   "id": "graduate-breakdown",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"500\" height=\"370\" viewBox=\"0 0 500 370\">\n",
       "<defs>\n",
       "</defs>\n",
       "<path d=\"M20,0 V370 M10,60 H500 M10,120 H500 M10,180 H500 M10,240 H500 M10,300 H500 M10,360 H500\" stroke=\"gray\" />\n",
       "<text x=\"20\" y=\"60\" font-size=\"50\">Simplest Text</text>\n",
       "<text x=\"20\" y=\"120\" font-size=\"50\" stroke=\"black\">Outline / Filled</text>\n",
       "<text x=\"20\" y=\"180\" font-size=\"50\" stroke=\"black\" stroke-width=\"5\">Too big stroke</text>\n",
       "<text x=\"20\" y=\"240\" font-size=\"50\" stroke=\"black\" stroke-width=\"0.5\" fill=\"none\">Outlined only</text>\n",
       "<text x=\"20\" y=\"300\" font-size=\"50\" stroke=\"black\" fill=\"red\">Outlined and colored</text>\n",
       "<text x=\"20\" y=\"360\" font-size=\"50\" fill=\"blue\">Colored fill only</text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13fe7e4040>"
      ]
     },
     "execution_count": 3,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(500,370)\n",
    "\n",
    "# control lines\n",
    "l = dw.Path(stroke='gray')\n",
    "l.M(20,0).V(370)\n",
    "for i in range(1,7):\n",
    "    l.M(10,i*60).H(500)\n",
    "d.append(l)\n",
    "\n",
    "# default text, with outline, and outline only\n",
    "d.append(dw.Text('Simplest Text',x=20,y=60,font_size=50))\n",
    "d.append(dw.Text('Outline / Filled',x=20,y=120,font_size=50,stroke='black'))\n",
    "d.append(dw.Text('Too big stroke',x=20,y=180,font_size=50,stroke='black',stroke_width=5))\n",
    "d.append(dw.Text('Outlined only',x=20,y=240,font_size=50,stroke='black',stroke_width=0.5,fill='none'))\n",
    "d.append(dw.Text('Outlined and colored',x=20,y=300,font_size=50,stroke='black',fill='red'))\n",
    "d.append(dw.Text('Colored fill only',x=20,y=360,font_size=50,fill='blue'))\n",
    "\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "impressive-finance",
   "metadata": {},
   "source": [
    "Text weight, style, decoration, and spacing attributes.\n",
    "\n",
    "Why can the font size not be set in the group for all elements?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 4,
   "id": "minimal-pursuit",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"600\" height=\"200\" viewBox=\"0 0 600 200\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"20\" y=\"35\" font-size=\"30\" font-weight=\"bold\">bold</text>\n",
       "<text x=\"20\" y=\"75\" font-size=\"30\" font-style=\"italic\">italic</text>\n",
       "<text x=\"20\" y=\"115\" font-size=\"30\" text-decoration=\"underline\">under</text>\n",
       "<text x=\"20\" y=\"155\" font-size=\"30\" text-decoration=\"overline\">over</text>\n",
       "<text x=\"20\" y=\"195\" font-size=\"30\" text-decoration=\"line-through\">through</text>\n",
       "<text x=\"200\" y=\"35\" font-size=\"30\">normal word space</text>\n",
       "<text x=\"200\" y=\"75\" font-size=\"30\" word-spacing=\"10\">more word space</text>\n",
       "<text x=\"200\" y=\"115\" font-size=\"30\" word-spacing=\"-5\">less word space</text>\n",
       "<text x=\"200\" y=\"155\" font-size=\"30\" letter-spacing=\"8\">wide letter space</text>\n",
       "<text x=\"200\" y=\"195\" font-size=\"30\" letter-spacing=\"-2\">narrow letter space</text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13fc65d0a0>"
      ]
     },
     "execution_count": 4,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(600,200)\n",
    "d.append(dw.Text('bold',font_size=30,x=20,y=35,font_weight='bold'))\n",
    "d.append(dw.Text('italic',font_size=30,x=20,y=75,font_style='italic'))\n",
    "d.append(dw.Text('under',font_size=30,x=20,y=115,text_decoration='underline'))\n",
    "d.append(dw.Text('over',font_size=30,x=20,y=155,text_decoration='overline'))\n",
    "d.append(dw.Text('through',font_size=30,x=20,y=195,text_decoration='line-through'))\n",
    "d.append(dw.Text('normal word space',font_size=30,x=200,y=35))\n",
    "d.append(dw.Text('more word space',font_size=30,x=200,y=75,word_spacing=10))\n",
    "d.append(dw.Text('less word space',font_size=30,x=200,y=115,word_spacing=-5))\n",
    "d.append(dw.Text('wide letter space',font_size=30,x=200,y=155,letter_spacing=8))\n",
    "d.append(dw.Text('narrow letter space',font_size=30,x=200,y=195,letter_spacing=-2))\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "viral-shakespeare",
   "metadata": {},
   "source": [
    "## 8.3 Text Alignment"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 8,
   "id": "conceptual-valve",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"250\" height=\"120\" viewBox=\"0 0 250 120\">\n",
       "<defs>\n",
       "</defs>\n",
       "<path d=\"M75,100 L75,0\" stroke=\"gray\" />\n",
       "<path d=\"M140,30 L250,30\" stroke=\"gray\" />\n",
       "<path d=\"M140,60 L250,60\" stroke=\"gray\" />\n",
       "<path d=\"M140,90 L250,90\" stroke=\"gray\" />\n",
       "<text x=\"75\" y=\"30\" font-size=\"24\" text-anchor=\"start\">Start</text>\n",
       "<text x=\"75\" y=\"60\" font-size=\"24\" text-anchor=\"middle\">Middle</text>\n",
       "<text x=\"75\" y=\"90\" font-size=\"24\" text-anchor=\"end\">End</text>\n",
       "<text x=\"150\" y=\"30\" font-size=\"24\" dominant-baseline=\"auto\">Auto</text>\n",
       "<text x=\"150\" y=\"60\" font-size=\"24\" dominant-baseline=\"middle\">Middle</text>\n",
       "<text x=\"150\" y=\"90\" font-size=\"24\" dominant-baseline=\"hanging\">Hanging</text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed724040>"
      ]
     },
     "execution_count": 8,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(250,120)\n",
    "d.append(dw.Line(75,100,75,0,stroke='gray'))\n",
    "d.append(dw.Line(140,30,250,30,stroke='gray'))\n",
    "d.append(dw.Line(140,60,250,60,stroke='gray'))\n",
    "d.append(dw.Line(140,90,250,90,stroke='gray'))\n",
    "d.append(dw.Text('Start',24,75,30,text_anchor='start'))\n",
    "d.append(dw.Text('Middle',24,75,60,text_anchor='middle'))\n",
    "d.append(dw.Text('End',24,75,90,text_anchor='end'))\n",
    "d.append(dw.Text('Auto',24,150,30,dominant_baseline='auto'))\n",
    "d.append(dw.Text('Middle',24,150,60,dominant_baseline='middle'))\n",
    "d.append(dw.Text('Hanging',24,150,90,dominant_baseline='hanging'))\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "introductory-compatibility",
   "metadata": {},
   "source": [
    "## 8.4 The `tspan` Element"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 9,
   "id": "changed-wholesale",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"600\" height=\"50\" viewBox=\"0 0 600 50\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"10\" y=\"40\" font-size=\"24\">Switch among <tspan font-style=\"italic\">italic</tspan><tspan>, normal, and </tspan><tspan font-weight=\"bold\">bold</tspan><tspan> text.</tspan></text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed724be0>"
      ]
     },
     "execution_count": 9,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(600,50)\n",
    "txt = dw.Text('Switch among ',24,10,40)\n",
    "txt.append(dw.TSpan('italic',font_style='italic'))\n",
    "txt.append(dw.TSpan(', normal, and '))\n",
    "txt.append(dw.TSpan('bold',font_weight='bold'))\n",
    "txt.append(dw.TSpan(' text.'))\n",
    "d.append(txt)\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "logical-alabama",
   "metadata": {},
   "source": [
    "The `tspan` element can also be used to displace single characters:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 10,
   "id": "brazilian-pollution",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"300\" height=\"160\" viewBox=\"0 0 300 160\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"10\" y=\"30\" font-size=\"24\">F<tspan dy=\"5\">a</tspan><tspan dy=\"31\" dx=\"21\">l</tspan><tspan dy=\"89\" dx=\"54\">l</tspan></text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed6bf1f0>"
      ]
     },
     "execution_count": 10,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(300,160)\n",
    "txt = dw.Text('F',24,10,30)\n",
    "txt.append(dw.TSpan('a',dy=5))\n",
    "txt.append(dw.TSpan('l',dy=31,dx=21))\n",
    "txt.append(dw.TSpan('l',dy=89,dx=54))\n",
    "d.append(txt)\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "pretty-spray",
   "metadata": {},
   "source": [
    "The same could be done without `tspan` in specifying a list for dx and dy."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 11,
   "id": "requested-success",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"300\" height=\"160\" viewBox=\"0 0 300 160\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"10\" y=\"30\" font-size=\"24\" dx=\"0,0,21,54\" dy=\"0,5,21,54\">Fall</text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13fd7a6070>"
      ]
     },
     "execution_count": 11,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(300,160)\n",
    "d.append(dw.Text('Fall',24,10,30,dx='0,0,21,54',dy='0,5,21,54'))\n",
    "d"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 12,
   "id": "impossible-harvey",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"500\" height=\"200\" viewBox=\"0 0 500 200\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"10\" y=\"50\" font-size=\"20\">They dined on mince, and slices of quince,<tspan x=\"30\" y=\"80\">Which they ate with a runcible spoon;</tspan><tspan x=\"10\" y=\"110\">And hand in hand, on the edge of the sand,</tspan><tspan x=\"30\" y=\"140\">They danced by the light of the moon.</tspan></text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed724b80>"
      ]
     },
     "execution_count": 12,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(500,200)\n",
    "txt = dw.Text('They dined on mince, and slices of quince,',20,10,50)\n",
    "txt.append(dw.TSpan('Which they ate with a runcible spoon;',x=30,y=80))\n",
    "txt.append(dw.TSpan('And hand in hand, on the edge of the sand,',x=10,y=110))\n",
    "txt.append(dw.TSpan('They danced by the light of the moon.',x=30,y=140))\n",
    "d.append(txt)\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "interstate-float",
   "metadata": {},
   "source": [
    "### Rotation"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 13,
   "id": "labeled-humidity",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"200\" height=\"100\" viewBox=\"0 0 200 100\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"20\" y=\"20\" font-size=\"20\" letter-spacing=\"20\" rotate=\"90\">Rotate</text>\n",
       "<text x=\"20\" y=\"80\" font-size=\"20\" letter-spacing=\"20\" rotate=\"0 90 180 270\">Rotate</text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed722a00>"
      ]
     },
     "execution_count": 13,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(200,100)\n",
    "d.append(dw.Text('Rotate',20,20,20,letter_spacing=20,rotate='90'))\n",
    "d.append(dw.Text('Rotate',20,20,80,letter_spacing=20,rotate='0 90 180 270'))\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "communist-daily",
   "metadata": {},
   "source": [
    "Rotate letters with `tspan`:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 14,
   "id": "creative-material",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"200\" height=\"100\" viewBox=\"0 0 200 100\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"20\" y=\"50\" font-size=\"20\" letter-spacing=\"20\"><tspan rotate=\"209\">R</tspan><tspan rotate=\"50 20\">OT</tspan><tspan rotate=\"214923\">ATE</tspan></text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed716760>"
      ]
     },
     "execution_count": 14,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "from random import randrange\n",
    "d = dw.Drawing(200,100)\n",
    "txt = dw.Text('',20,20,50,letter_spacing=20)\n",
    "txt.append(dw.TSpan('R',rotate=randrange(360)))\n",
    "txt.append(dw.TSpan('OT',rotate='50 20'))\n",
    "txt.append(dw.TSpan('ATE',rotate=''.join([str(randrange(360)) for i in range(3)])))\n",
    "d.append(txt)\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "caroline-steel",
   "metadata": {},
   "source": [
    "Use of `baseline_shift`: NOT WORKING??\n",
    "\n",
    "It should result in 'baseline-shift: \"sub\"', not 'baseline-shift=\"sub\"' — how to do this?"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 18,
   "id": "entertaining-impact",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
      "    width=\"200\" height=\"100\" viewBox=\"0 0 200 100\">\n",
      "<defs>\n",
      "</defs>\n",
      "<text x=\"20\" y=\"50\" font-size=\"20\">C<tspan baseline-shift=\"sub\">12</tspan><tspan>H</tspan><tspan baseline-shift=\"super\">22</tspan></text>\n",
      "</svg>\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"200\" height=\"100\" viewBox=\"0 0 200 100\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"20\" y=\"50\" font-size=\"20\">C<tspan baseline-shift=\"sub\">12</tspan><tspan>H</tspan><tspan baseline-shift=\"super\">22</tspan></text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed6721f0>"
      ]
     },
     "execution_count": 18,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(200,100)\n",
    "txt = dw.Text('C',20,20,50)\n",
    "txt.append(dw.TSpan('12',baseline_shift='sub'))\n",
    "txt.append(dw.TSpan('H'))\n",
    "txt.append(dw.TSpan('22',baseline_shift='super'))\n",
    "d.append(txt)\n",
    "print(d.as_svg())\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "loose-wages",
   "metadata": {},
   "source": [
    "## 8.5 Setting `textLength`"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 19,
   "id": "breathing-translation",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"400\" height=\"200\" viewBox=\"0 0 400 200\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"20\" y=\"30\" font-size=\"20\" textLength=\"250\" lengthAdjust=\"spacing\">Two words</text>\n",
       "<text x=\"20\" y=\"70\" font-size=\"20\" textLength=\"250\" lengthAdjust=\"spacingAndGlyphs\">Two words</text>\n",
       "<text x=\"20\" y=\"110\" font-size=\"20\">Two words (normal length)</text>\n",
       "<text x=\"20\" y=\"150\" font-size=\"20\" textLength=\"80\" lengthAdjust=\"spacing\">Two words</text>\n",
       "<text x=\"20\" y=\"190\" font-size=\"20\" textLength=\"80\" lengthAdjust=\"spacingAndGlyphs\">Two words</text>\n",
       "<path d=\"M20,10 L20,195\" stroke=\"gray\" />\n",
       "<path d=\"M270,80 L270,10\" stroke=\"gray\" />\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed7222e0>"
      ]
     },
     "execution_count": 19,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(400,200)\n",
    "\n",
    "s = 'Two words'\n",
    "d.append(dw.Text(s,20,20,30,textLength=250,lengthAdjust='spacing'))\n",
    "d.append(dw.Text(s,20,20,70,textLength=250,lengthAdjust='spacingAndGlyphs'))\n",
    "d.append(dw.Text(s+' (normal length)',20,20,110))\n",
    "d.append(dw.Text(s,20,20,150,textLength=80,lengthAdjust='spacing'))\n",
    "d.append(dw.Text(s,20,20,190,textLength=80,lengthAdjust='spacingAndGlyphs'))\n",
    "\n",
    "d.append(dw.Line(20,10,20,195,stroke='gray'))\n",
    "d.append(dw.Line(270,80,270,10,stroke='gray'))\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "manufactured-fitness",
   "metadata": {},
   "source": [
    "## 8.6 Vertical Text \n",
    "How to get the ':'? It should result in: 'glyph-orientation-vertical: 0'"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 21,
   "id": "reserved-impression",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
      "    width=\"100\" height=\"350\" viewBox=\"0 0 100 350\">\n",
      "<defs>\n",
      "</defs>\n",
      "<text x=\"10\" y=\"20\" font-size=\"20\" transform=\"rotate(90,10,20)\">Rotated 90</text>\n",
      "<text x=\"50\" y=\"20\" font-size=\"20\" writing-mode=\"tb\">Writing Mode tb</text>\n",
      "<text x=\"90\" y=\"20\" font-size=\"20\" writing-mode=\"tb\" glyph-orientation-vertical=\"0\">Vertical zero</text>\n",
      "</svg>\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"100\" height=\"350\" viewBox=\"0 0 100 350\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"10\" y=\"20\" font-size=\"20\" transform=\"rotate(90,10,20)\">Rotated 90</text>\n",
       "<text x=\"50\" y=\"20\" font-size=\"20\" writing-mode=\"tb\">Writing Mode tb</text>\n",
       "<text x=\"90\" y=\"20\" font-size=\"20\" writing-mode=\"tb\" glyph-orientation-vertical=\"0\">Vertical zero</text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed7228e0>"
      ]
     },
     "execution_count": 21,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(100,350)\n",
    "d.append(dw.Text('Rotated 90',20,10,20,transform='rotate(90,10,20)'))\n",
    "# tb = top to bottom\n",
    "d.append(dw.Text('Writing Mode tb',20,50,20,writing_mode='tb'))\n",
    "d.append(dw.Text('Vertical zero',20,90,20,writing_mode='tb',glyph_orientation_vertical=0))\n",
    "print(d.as_svg())\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "understanding-passage",
   "metadata": {},
   "source": [
    "## 8.7 Internationalization and Text"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "victorian-lloyd",
   "metadata": {},
   "source": [
    "### 8.7.1 Unicode and Bidirectionality NOT WORKING because of the ':' issue\n",
    "I cannot see how to deal with '\\&#x3b1;\\&#x3b2;\\&#x3b3;\\&#x3b4;\\&#x3b5;' but that's not really important for now. Putting in the unicode characters works."
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 22,
   "id": "hybrid-potato",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
      "    width=\"700\" height=\"200\" viewBox=\"0 0 700 200\">\n",
      "<defs>\n",
      "</defs>\n",
      "<text x=\"10\" y=\"30\" font-size=\"20\">Greek:</text>\n",
      "<text x=\"100\" y=\"30\" font-size=\"20\">αβγδε</text>\n",
      "<text x=\"10\" y=\"60\" font-size=\"20\">Russian:</text>\n",
      "<text x=\"100\" y=\"60\" font-size=\"20\">абвгд</text>\n",
      "<text x=\"10\" y=\"90\" font-size=\"20\">Hebrew:</text>\n",
      "<text x=\"100\" y=\"90\" font-size=\"20\">אבגדה (written right to left)</text>\n",
      "<text x=\"10\" y=\"120\" font-size=\"20\">Arabic:</text>\n",
      "<text x=\"100\" y=\"120\" font-size=\"20\">ﺍﺑﻖﺕ (written right to left)</text>\n",
      "<text x=\"10\" y=\"150\" font-size=\"20\">This is <tspan direction=\"rlt\" unicode-bidi=\"bidi-override\" font-weight=\"bold\">right-to-left</tspan><tspan> writing.</tspan></text>\n",
      "</svg>\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"700\" height=\"200\" viewBox=\"0 0 700 200\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"10\" y=\"30\" font-size=\"20\">Greek:</text>\n",
       "<text x=\"100\" y=\"30\" font-size=\"20\">αβγδε</text>\n",
       "<text x=\"10\" y=\"60\" font-size=\"20\">Russian:</text>\n",
       "<text x=\"100\" y=\"60\" font-size=\"20\">абвгд</text>\n",
       "<text x=\"10\" y=\"90\" font-size=\"20\">Hebrew:</text>\n",
       "<text x=\"100\" y=\"90\" font-size=\"20\">אבגדה (written right to left)</text>\n",
       "<text x=\"10\" y=\"120\" font-size=\"20\">Arabic:</text>\n",
       "<text x=\"100\" y=\"120\" font-size=\"20\">ﺍﺑﻖﺕ (written right to left)</text>\n",
       "<text x=\"10\" y=\"150\" font-size=\"20\">This is <tspan direction=\"rlt\" unicode-bidi=\"bidi-override\" font-weight=\"bold\">right-to-left</tspan><tspan> writing.</tspan></text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed716b80>"
      ]
     },
     "execution_count": 22,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(700,200)\n",
    "d.append(dw.Text('Greek:',20,10,30))\n",
    "d.append(dw.Text('αβγδε',20,100,30))\n",
    "d.append(dw.Text('Russian:',20,10,60))\n",
    "d.append(dw.Text('абвгд',20,100,60))\n",
    "d.append(dw.Text('Hebrew:',20,10,90))\n",
    "d.append(dw.Text('אבגדה (written right to left)',20,100,90))\n",
    "d.append(dw.Text('Arabic:',20,10,120))\n",
    "d.append(dw.Text('ﺍﺑﻖﺕ (written right to left)',20,100,120))\n",
    "t = dw.Text('This is ',20,10,150)\n",
    "t.append(dw.TSpan('right-to-left',direction='rlt',unicode_bidi='bidi-override',font_weight='bold'))\n",
    "t.append(dw.TSpan(' writing.'))\n",
    "d.append(t)\n",
    "print(d.as_svg())\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "thrown-berkeley",
   "metadata": {},
   "source": [
    "## 8.8 Text on a Path"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "heavy-perspective",
   "metadata": {},
   "source": [
    "Example from [draw2Svg docs](https://draw2svg.netlify.app/basic_shape/#text)"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 25,
   "id": "numerous-financing",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"400\" height=\"300\" viewBox=\"0 0 400 300\" idPrefix=\"textpath1\">\n",
       "<defs>\n",
       "<path d=\"M250.0,150.0 A100,100,0,1,0,150.0,250.0\" fill=\"None\" stroke=\"pink\" id=\"n3dNXgPF0\" />\n",
       "</defs>\n",
       "<text x=\"0\" y=\"20\" font-size=\"24\" fill=\"blue\">Basic Text</text>\n",
       "<text font-size=\"24\" fill=\"blue\"><textPath xlink:href=\"#n3dNXgPF0\" startOffset=\"50%\">\n",
       "<tspan dy=\"0em\">Text on Path</tspan>\n",
       "</textPath></text>\n",
       "<use xlink:href=\"#n3dNXgPF0\" />\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed679d90>"
      ]
     },
     "execution_count": 25,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(400, 300, idPrefix='textpath1')\n",
    "\n",
    "# Basic Text\n",
    "text_content = {\n",
    "    'text' : 'Basic Text',\n",
    "    'font_size' : '24',\n",
    "    'x': 0,\n",
    "    'y': 20,\n",
    "    'fill' : 'blue'\n",
    "}\n",
    "text1 = dw.Text(**text_content)\n",
    "\n",
    "#Text on Path\n",
    "pie = dw.Arc(cx=150, cy=150, r=100, start_deg=0, end_deg=90, fill=\"None\", stroke=\"pink\")\n",
    "text_content = {\n",
    "    'text' : 'Text on Path',\n",
    "    'font_size' : '24',\n",
    "    'fill' : 'blue',\n",
    "    'path' : pie,\n",
    "    'start_offset': '50%',\n",
    "}\n",
    "text2 = dw.Text(**text_content)\n",
    "\n",
    "d.append(text1)\n",
    "d.append(text2)\n",
    "d.append(pie)\n",
    "#print(d.as_svg())\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "regional-enhancement",
   "metadata": {},
   "source": [
    "Example adapted from SVG Essentials:"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 26,
   "id": "under-picking",
   "metadata": {},
   "outputs": [
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"500\" height=\"200\" viewBox=\"0 0 500 200\" idPrefix=\"textpath2\">\n",
       "<defs>\n",
       "<path d=\"M30,50 C50,20,70,20,120,50 S150,10,200,50\" stroke=\"gray\" fill=\"none\" id=\"caBXIV9K0\" />\n",
       "<path d=\"M250,30 L300,30 A30,30,0,0,1,330,60 L330,110\" stroke=\"gray\" fill=\"none\" id=\"caBXIV9K1\" />\n",
       "<path d=\"M30,110 L100,110 L100,160\" stroke=\"gray\" fill=\"none\" id=\"caBXIV9K2\" />\n",
       "<path d=\"M150,110 A40,30,0,1,0,230,110 M250,110 L270,140\" stroke=\"gray\" fill=\"none\" id=\"caBXIV9K3\" />\n",
       "<path d=\"M330,130 L330,160 A30,30,0,0,1,300,180 L200,180\" stroke=\"gray\" fill=\"none\" id=\"caBXIV9K4\" />\n",
       "</defs>\n",
       "<use xlink:href=\"#caBXIV9K0\" />\n",
       "<use xlink:href=\"#caBXIV9K1\" />\n",
       "<use xlink:href=\"#caBXIV9K2\" />\n",
       "<use xlink:href=\"#caBXIV9K3\" />\n",
       "<use xlink:href=\"#caBXIV9K4\" />\n",
       "<text font-size=\"14\"><textPath xlink:href=\"#caBXIV9K0\">\n",
       "<tspan dy=\"0em\">Following a cubic Bézier curve</tspan>\n",
       "</textPath></text>\n",
       "<text font-size=\"14\"><textPath xlink:href=\"#caBXIV9K1\">\n",
       "<tspan dy=\"0em\">Going 'round the bend</tspan>\n",
       "</textPath></text>\n",
       "<text font-size=\"14\"><textPath xlink:href=\"#caBXIV9K2\">\n",
       "<tspan dy=\"0em\">Making a quick turn</tspan>\n",
       "</textPath></text>\n",
       "<text font-size=\"14\"><textPath xlink:href=\"#caBXIV9K3\">\n",
       "<tspan dy=\"0em\">Text along a broken path</tspan>\n",
       "</textPath></text>\n",
       "<text font-size=\"14\" offset=\"50%\" text-anchor=\"middle\"><textPath xlink:href=\"#caBXIV9K4\" startOffset=\"50%\">\n",
       "<tspan dy=\"0em\">centered</tspan>\n",
       "</textPath></text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed67dfa0>"
      ]
     },
     "execution_count": 26,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(500,200,idPrefix='textpath2')\n",
    "\n",
    "curve_path = dw.Path(stroke='gray',fill='none')\n",
    "curve_path.M(30,50).C(50,20,70,20,120,50).S(150,10,200,50)\n",
    "\n",
    "round_corner = dw.Path(stroke='gray',fill='none')\n",
    "round_corner.M(250,30).L(300,30).A(30,30,0,0,1,330,60).L(330,110)\n",
    "\n",
    "sharp_corner = dw.Path(stroke='gray',fill='none')\n",
    "sharp_corner.M(30,110).L(100,110).L(100,160)\n",
    "\n",
    "discontinuous = dw.Path(stroke='gray',fill='none')\n",
    "discontinuous.M(150,110).A(40,30,0,1,0,230,110).M(250,110).L(270,140)\n",
    "\n",
    "center_curve = dw.Path(stroke='gray',fill='none')\n",
    "center_curve.M(330,130).L(330,160).A(30,30,0,0,1,300,180).L(200,180)\n",
    "\n",
    "d.append(curve_path)\n",
    "d.append(round_corner)\n",
    "d.append(sharp_corner)\n",
    "d.append(discontinuous)\n",
    "d.append(center_curve)\n",
    "\n",
    "t_cp = dw.Text('Following a cubic Bézier curve',14,path=curve_path)\n",
    "t_rc = dw.Text(\"Going 'round the bend\",14,path=round_corner)\n",
    "t_sc = dw.Text('Making a quick turn',14,path=sharp_corner)\n",
    "t_dc = dw.Text('Text along a broken path',14,path=discontinuous)\n",
    "t_ct = dw.Text('centered',14,path=center_curve,offset='50%',text_anchor='middle')\n",
    "\n",
    "d.append(t_cp)\n",
    "d.append(t_rc)\n",
    "d.append(t_sc)\n",
    "d.append(t_dc)\n",
    "d.append(t_ct)\n",
    "\n",
    "#print(d.asSvg())\n",
    "#d.saveSvg('blue.svg')\n",
    "d"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "healthy-december",
   "metadata": {},
   "source": [
    "## Text Content Area"
   ]
  },
  {
   "cell_type": "markdown",
   "id": "atlantic-collect",
   "metadata": {},
   "source": [
    "NOT WORKING"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": 27,
   "id": "equivalent-crash",
   "metadata": {},
   "outputs": [
    {
     "name": "stdout",
     "output_type": "stream",
     "text": [
      "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
      "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
      "    width=\"300\" height=\"100\" viewBox=\"0 0 300 100\">\n",
      "<defs>\n",
      "</defs>\n",
      "<text x=\"20\" y=\"45\" font-size=\"24\" style=\"inline-size: 250px;\">Auto-wrapped text in a 250px box.</text>\n",
      "</svg>\n"
     ]
    },
    {
     "data": {
      "image/svg+xml": [
       "<?xml version=\"1.0\" encoding=\"UTF-8\"?>\n",
       "<svg xmlns=\"http://www.w3.org/2000/svg\" xmlns:xlink=\"http://www.w3.org/1999/xlink\"\n",
       "    width=\"300\" height=\"100\" viewBox=\"0 0 300 100\">\n",
       "<defs>\n",
       "</defs>\n",
       "<text x=\"20\" y=\"45\" font-size=\"24\" style=\"inline-size: 250px;\">Auto-wrapped text in a 250px box.</text>\n",
       "</svg>"
      ],
      "text/plain": [
       "<drawsvg.drawing.Drawing at 0x7f13ed68f640>"
      ]
     },
     "execution_count": 27,
     "metadata": {},
     "output_type": "execute_result"
    }
   ],
   "source": [
    "d = dw.Drawing(300,100)\n",
    "txt = dw.Text('Auto-wrapped text in a 250px box.',24,20,45,style='inline-size: 250px;')\n",
    "d.append(txt)\n",
    "print(d.as_svg())\n",
    "d.save_svg('bla.svg')\n",
    "d"
   ]
  },
  {
   "cell_type": "code",
   "execution_count": null,
   "id": "prostate-examination",
   "metadata": {},
   "outputs": [],
   "source": []
  }
 ],
 "metadata": {
  "kernelspec": {
   "display_name": "Python 3",
   "language": "python",
   "name": "python3"
  },
  "language_info": {
   "codemirror_mode": {
    "name": "ipython",
    "version": 3
   },
   "file_extension": ".py",
   "mimetype": "text/x-python",
   "name": "python",
   "nbconvert_exporter": "python",
   "pygments_lexer": "ipython3",
   "version": "3.9.2"
  }
 },
 "nbformat": 4,
 "nbformat_minor": 5
}