diff --git a/content/posts/WALL-side/index.md b/content/posts/WALL-side/index.md new file mode 100644 index 0000000..7583605 --- /dev/null +++ b/content/posts/WALL-side/index.md @@ -0,0 +1,109 @@ ++++ +date = "2022-05-29" +draft = false +path = "/blog/WALL-side" +tags = ["art"] +title = "WALL side" ++++ + +{% image(name="wallside.png", colocated=true) %} +poster with diagonal WALL side text in four different +languages +{% end %} + +My partner has a brilliant poster they made of the backing of 3M command strips +in their apartment, which I wanted to recreate as a vector image to make +another. I initially tried inkscape, where I ran into issues with the tiled +clone tool not supporting dragging to set spacing and more crucially not +supporting absolute distances, which meant that it could not maintain proper +spacing of things of different height (I later realized it could probably be +done with a group, but there were unrelated factors of fiddliness at play such +as difficulty working in a transformed coordinate system that made Inkscape +infeasible to use). + +I conceded and did this project as a simple Python SVG generator. First, I took +a picture as reference, then included it in the SVG as an ``. SVG is fun +because it is *not* HTML, and is also strict XML. For instance, one difference +is that the image tag is called `image` rather than `img` and uses an `href`, +not a `src` (or indeed, `xlink:href` if you are using an older implementation +such as inkscape). + +With that out of the way, I made a `` group that's rotated 45 degrees and +translated some amount (`transform="rotate(-45) translate(-1000, 100)"`), then +I created the four languages of `` text elements inside. Regarding how to +get the actual text to put in there, there are various ways to do this; I typed +it in on my phone (including the Japanese! there's a drawing keyboard for +Japanese in Google Keyboard, so even my dubious-quality non-Japanese-speaker +scrawls got turned into characters pretty easily). + +To get each text fragment into position easily, +I nicked [some code to make them draggable][draggable], +then noted down the transformation after dragging them into position. Next, I +duplicated each language's element and moved the new one into the next +horizontal position to figure out the horizontal (along the line) period and +the next vertical position to figure out the cross-line period. + +Then, I made these definitions reusable by giving them an `id` property and +putting them in a `` block. This makes the original definition invisible, +so you have to reference them as something like ``. + +Since I knew the spacings, I got Python out in earnest. To make my workflow +more pleasant, I wanted to rebuild the image on every editor save. I found a +tool [`entr`][entr] that can do this: `ls *.py | entr -r python wallside.py`. +It takes a list of files to watch on standard input, and a command to run when +any of them change. + +With my setup sufficiently pleasant, I wrote some Python to generate a series +of instances of the definition with the horizontal spacing for every language, +with each looking like this: +``. +This forms one line of several copies of each of English, French, Spanish, and +Japanese. I put this into a `` block as a group, then referenced it in +the body of the document with a `` to check my work. + +After I was satisfied this worked, I then started generating that `` +automatically, with the `y` offset set to some multiple of the line spacing, +and with some tweaks, that was that. + +Next was the job of getting it to work on Inkscape since I was prototyping +against Firefox, which, being a web browser, has a very advanced SVG renderer +compared to non-browser programs. One thing I was doing that was not ideal for +Inkscape was that I was rendering a bunch of text off-page. I fixed this with a +clip path the size of the document like so: + +```xml + + + + + + + +``` + +Another thing that Inkscape disliked (to the point of not rendering anything) +was the use of `href="..."` in my document. Its predecessor, `xlink:href`, was +[noted on MDN][mdn xlink] as being deprecated, replaced in the SVG 2 standard +by unprefixed `href`. I just had to switch to the older one and add +`xmlns:xlink="http://www.w3.org/1999/xlink"` to my `` element to fix this. + +The last bit of trouble I got from Inkscape was that it does not support the +CSS `transform` property, so I had to convert to the `transform="..."` property +directly on tags. Oh well, so much for the shiny features. But it works now and +is more portable! + +Finally, I have a SVG file that is exactly what I want and was not that painful +to create. That was fun! + +I've included the sources and SVG file below (note: it requires Source Han Sans +installed on your computer, which is a nice open source sans-serif font with +Chinese/Japanese/Korean support). + +* [SVG file here](./wallside.svg) +* [PDF for printing here (11x17 inch tabloid size)](./wallside.svg.pdf) + +{{ codefile(path="wallside.py", colocated=true, code_lang="python", hide=true) }} + +[draggable]: https://github.com/petercollingridge/code-for-blog/blob/master/svg-interaction/draggable/draggable_groups.svg +[mdn xlink]: https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/xlink:href +[entr]: https://github.com/eradman/entr diff --git a/content/posts/WALL-side/wallside.png b/content/posts/WALL-side/wallside.png new file mode 100644 index 0000000..0cb6271 Binary files /dev/null and b/content/posts/WALL-side/wallside.png differ diff --git a/content/posts/WALL-side/wallside.py b/content/posts/WALL-side/wallside.py new file mode 100644 index 0000000..3ef6a04 --- /dev/null +++ b/content/posts/WALL-side/wallside.py @@ -0,0 +1,174 @@ +import contextlib + + +class Periods: + y = 106 + x = { + 'en': 106, + 'fr': 106, + 'es': 146, + 'jp': 82, + } + + +DEFS = """ +""" + +HEADER = """ + + + + + + + + """ + +FOOTER = """ + + + +""" + +BODY = """ + + WALL side + Côté MUR + lado de la PARED + かベ面 + + + + + +""" + + +def make_line_def(id): + print(f'') + for (lang, per) in Periods.x.items(): + for i in range(30 if lang == 'jp' else 20): + print(f'') + print('') + + +def make_wallside(): + # 96px/in * {13in, 1.2in} + print('') + for i in range(20): + print(f'') + print('') + + +def main(): + f = open('./wallside.svg', 'w') + with contextlib.redirect_stdout(f): + build() + print('built svg') + + +def build(): + print(HEADER) + print(DEFS) + make_line_def('line-10') + make_wallside() + print(BODY) + print(FOOTER) + + +if __name__ == '__main__': + main() diff --git a/content/posts/WALL-side/wallside.svg b/content/posts/WALL-side/wallside.svg new file mode 100644 index 0000000..76111bc --- /dev/null +++ b/content/posts/WALL-side/wallside.svg @@ -0,0 +1,236 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + + WALL side + Côté MUR + lado de la PARED + かベ面 + + + + + + + + + + + diff --git a/content/posts/WALL-side/wallside.svg.pdf b/content/posts/WALL-side/wallside.svg.pdf new file mode 100644 index 0000000..011a29d Binary files /dev/null and b/content/posts/WALL-side/wallside.svg.pdf differ