source code for html website at https://zachdecook.com
homepage: Add gemini cross-posts
| -rw-r--r-- | index.md | 23 | ||||
| -rw-r--r-- | posts/fonts.md | 76 | ||||
| -rw-r--r-- | posts/fonts/ZachsSharpie.png | bin | 0 -> 67706 bytes | |||
| -rw-r--r-- | posts/fonts/bbbsmooth.png | bin | 0 -> 61522 bytes | |||
| -rw-r--r-- | posts/fonts/type.txt.png | bin | 0 -> 1140 bytes | |||
| -rw-r--r-- | posts/verovio.md | 34 | ||||
| -rw-r--r-- | posts/verovio/leaf-throw.png | bin | 0 -> 5802 bytes |
7 files changed, 133 insertions, 0 deletions
@@ -21,6 +21,29 @@ What is a "Zach DeCook"? Most days software developer, with interests in music, maths, and many other things. He's possibly best defined by the projects he spends time on. +## Recent Posts +<section> +<aside> + +### [How I got to contribute to Open-Source during my day job](posts/verovio) + +August 2021 + +Or "Using Verovio on My.Hymnary". + +[](posts/verovio) +</aside> +<aside> + +### [My Story of Font Creation](posts/fonts) + +February 2021 + +[](posts/fonts) + +</aside> +</section> + ## Selected Projects <section> <aside> diff --git a/posts/fonts.md b/posts/fonts.md new file mode 100644 index 0000000..aac5f5c --- /dev/null +++ b/posts/fonts.md @@ -0,0 +1,76 @@ +<meta charset="utf-8"> +<link rel="stylesheet" type="text/css" href="https://zachdecook.com/shared/devaultcss/base.css"/> +<style> +img { + max-width: 100%; +} +</style> +# Font creation + +Back in the day, penmanship was an important skill. It was also my worst skill. "When you get to highschool, you'll have to write all of your papers in cursive." That was a lie. Here in the early 21st century, we type, tap, or even dictate to record compressed words. But have we gained more in legibility than we've lost in expressability? Do printed paragraphs have to be less suggestive than calligraphic communications? Enter fonts. + +"How do you make a font?", one might ask. Well... the answer's not that simple, and is quite personal. Over the last decade, I've created 5 fonts which I consider worthy of being shared. How you make the font also varies based on what the purpose of the font is. For each font, I used a different piece of software. + +## ZachsSharpie (2012) + +This first font is a stylized handwriting font. I wanted to have "my own" font for publishing things, rather than searching the internet for something everyone else has already seen before. It's most similar to Dieter Steffmann's "Marker Felt". The name comes from the method of creation: it was made using a sharpie. Specifically, on one of those "create a font from your handwriting" websites. + + + +I printed out the sheet, wrote each character, scanned it, and uploaded it. Within minutes, I downloaded my own custom font and it was... barely visible. Probably something to do with the contrast. For take two, I upped the thickness by just using a sharpie instead of using my pencil. This created the typeface which iconically adorns my http website. + +Do I recommend this method for font creation today? Unfortunately, myscriptfont.com no longer exists. There doesn't seem to be a website where you can upload a scanned chart and get a ttf, no strings attached. If you know of any free software which does this, please contact me. I would happily host an instance so others can easily create their first font. + +## bbbsmooth (2017) + +The next font came from an interest in a foreign language, and the love of monospaced fonts. bbbsmooth started as "bababang", a 10x10 pixel font which covers the Bengali unicode block (similar to Devanagari), used for the language Bangla (বাংলা). I wanted to have Bengali text look good amongst computer code. + + + +I created it using the site fontstruct.com. First, I decided on my grid size. I chose the most complicated character, আ, the aspirated 'a' vowel. I made that whole alphabet, the numbers and special symbols, and eventually got back to adding the ASCII characters as well. To make it "bbbsmooth", I added more shapes to my pallete, and started placing them around the existing blocks, making up some rules to my method as I went. + +If you know you want to make a grid-based font, and don't mind running a proprietary javascript program (desktop only) to do it, then this may be a good choice. I'm not convinced though that this tool could produce a crisp pixel-perfect font suitable for programmers (such as Andreas Larsen's Monoid). + +## Fossmoji (2019 - incomplete) + +When I started working full-time, probably my earliest distraction was reading about and looking at emoji on emojipedia. Creating an emoji-font seemed to be something you could only to if you were a large company, and redesigning an emoji-font would take just as much effort. +"Why can't I have my own emoji font, and why's it gotta be so difficult to make these?", I thought. As I had been learning about SVGs, I applied my knowledge and created a system in python where each emoji is defined by a YAML file. With the program SCFbuild, making an emoji font from a bunch of SVGs was easy. + + + +A few discouraging notes in the development of this: + +* these full-color SVG-in-OpenType aren't well-supported by many programs (mostly just Firefox) +* Single-handedly creating thousands of emoji, even with re-using layers, would take too long. + +Still, I managed to create almost 50 glyphs before getting tired of the project. Should you use this method to create a font? Sure! If you want an SVG-in-OpenType font, feel free to create a font deriving from fossmoji's source! Following the scene, it looks like maybe COLR fonts will take off (as the web browser giant supports them). It might not be too difficult to replace SCFBuild with nanoemoji to get these COLR fonts instead. + +View the homepage for fossmoji at https://zachdecook.com/fossmoji + +## Sanos (2020) + +Yeah, this is a sans-serif font, though it has nothing to do with a finger-snapping villian. Sanos was named after its parent-font, "Tinos": a font metrically compatible with Times New Roman. Why make a TNR-compatible font? It was all for the music engraving software Verovio, (more on Verovio some other day¹). For automatic spacing, it assumes the font characters are the size of those in Times New Roman. Fortunately, there are several of these: Liberation Serif, Tinos, and Thorndale. Unfortunately, none are sans-serif, which was an important feature for My.Hymnary.org's presentation system we were developing at work. +=> sanos.png A musical score with Sanos, a sans serif modification of Tinos. +I opened up Steve Matteson's apache-licensed font using Fontforge, and started tweaking away! My biggest gripe with sans fonts is the Ambiguous Illness: that is, the tendency of the capital I and lowercase l to be indistinguishable. I've been using my preferred solution since grade school: keep the foundation and canopy on the big I. Besides this decision, the modification was fairly straightforward. Credit to Steve Matteson, of course, for Tinos. +=> sanos.zip Download Sanos +FontForge is really powerful, but pretty clunky; it takes a lot of getting used to. Use it if you have to. Improve it if you'd like to. Modifying an existing font is a good way to get something consistent yet unique. I recommend this method for those who don't mind getting their hands dirty. + +## type.txt (Working title, 2021 - ) +When Devine Lu Linvega created the text editor "left", it loaded its font from famicom chr files. I didn't find the "nasu" editor comfortable for editing fonts, so I created my own program to convert text into the chr fonts. + +type.txt is an 8x8 4 color font, which covers all ASCII characters (yes, even the nonprintable ones). It was written and is maintained in plain text, just by replacing characters in a grid. Currently the use of colors is very minor. + + + +Should you use left and txt2chr to create your next font? Maybe. It's really easy, but most font-supporting software won't support this file format to use as a font. That includes newest versions of "left". One thing's for sure: making a 8x8 pixel font is much easier than making and maintaining the text editor which uses that font. + +## Conclusion + +So, there's my little five-font adventure for you. I think all computer users should try making and using their own fonts some time, but maybe it's fair to say not everyone shares this stripe of creative drive. + +[Comments accepted via email in public inbox!](mailto:~earboxer/public-inbox@lists.sr.ht?subject=fonts) + +Footnote 1: [Post about Verovio](/posts/verovio/) I wrote on 'another day'. + + +This post originally published at [gemini://gemini.zachdecook.com/capsule/2021-02-20-font-creation.gmi](gemini://gemini.zachdecook.com/capsule/2021-02-20-font-creation.gmi) diff --git a/posts/fonts/ZachsSharpie.png b/posts/fonts/ZachsSharpie.png Binary files differnew file mode 100644 index 0000000..c770a30 --- /dev/null +++ b/posts/fonts/ZachsSharpie.png diff --git a/posts/fonts/bbbsmooth.png b/posts/fonts/bbbsmooth.png Binary files differnew file mode 100644 index 0000000..f9a9606 --- /dev/null +++ b/posts/fonts/bbbsmooth.png diff --git a/posts/fonts/type.txt.png b/posts/fonts/type.txt.png Binary files differnew file mode 100644 index 0000000..65ecca7 --- /dev/null +++ b/posts/fonts/type.txt.png diff --git a/posts/verovio.md b/posts/verovio.md new file mode 100644 index 0000000..ae83992 --- /dev/null +++ b/posts/verovio.md @@ -0,0 +1,34 @@ +<link rel="stylesheet" type="text/css" href="https://zachdecook.com/shared/devaultcss/base.css"/> +# Contributing to open-source for work (Verovio on Hymnary) + +While my first introduction into software was in the mac ecosystem, maybe the first open-source program I used was GIMP. Often touted as a free photoshop alternative, I just used it because appleworks paint wasn't cutting it for my early pixel-art needs. + + + +Eventually, I started writing software myself, and benefited greatly from open source libraries written by other people. Contributing to open-source was a whole other thing. Some guide online suggested: "Don't start your own open source project until you've contributed to someone else's project." Is this good advice for how to 'get into' open-source software? What does it really mean to 'get into' that scene, and is that even important? That's a question for another day. Today, we'll just talk about how I 'got into' becoming a contributor to Verovio. + +It all started with a vision, back in 2008. No, not my vision, but one of... well I don't need to give the full history of Hymnary.org here. There's another blog out there which details this. + +* ["History of Hymnary" video](https://www.youtube.com/watch?v=3Pw9WHgNV0k) +* ["The Future of Congregational Song" document](https://hymnary.org/node/38977) +* [Blog post about developing features for Hymnary](https://hymnary.org/blog/major-additions-planned-for-hymnary) + +How does a large open-source program get into all of this? For our upcoming project, we wanted to revamp music rendering, as well as use a more flexible source format for our music library. Instead of serving PNGs (raster images) generated server-side with Lilypond, we wanted to create SVGs (vector images) client-side. + +I prepared an [internal presentation](https://rh.hymnary.org/slides/engraving-options) comparing engraving options. After careful consideration, we landed on Verovio as our music engraving option. +One of the factors I considered was "Hackability": how easy it would be to contribute changes to each project. + +[My first Pull Request to Verovio](https://github.com/rism-digital/verovio/pull/1049) was approved and merged very quickly into the main project. + +Active maintenance of the Verovio project encouraged us to keep contributing changes upstream. Easy, encouraging communication among core contributors helped move from issue-creation to implementation very painlessly. + +Now, hundreds of lines of code and dozens of commits later, we've added features to Verovio from improved MusicXML import to additional rendering options. Because of the nature of open-source, these changes can be used by countless others for rendering music. + +The joy of open source is that many people can choose their priorities to work on something, and this can benefit not just hobbyist individuals, but also companies as well. Open source licenses make software open to all. "Ethical" or "non-commercial" licenses exclude others from using, others who could be potential contributors. + +My.Hymnary uses Verovio to offer music for printing as well as for presenting as a slideshow, and that would not be nearly as good if it wasn't for the cooperation of many through this large open-source program. + +See ["Just as I am" hymn on My.Hymnary.org](https://my.hymnary.org/song/73/just-as-i-am) which is rendered with Verovio. + +This article was originally published on [gemini://gemini.zachdecook.com/cap +sule/2021-08-17-verovio.gmi](gemini://gemini.zachdecook.com/capsule/2021-08-17-verovio.gmi). diff --git a/posts/verovio/leaf-throw.png b/posts/verovio/leaf-throw.png Binary files differnew file mode 100644 index 0000000..0b7d74d --- /dev/null +++ b/posts/verovio/leaf-throw.png |
