{"id":88,"date":"2013-09-10T20:25:00","date_gmt":"2013-09-10T19:25:00","guid":{"rendered":"http:\/\/www.celesteh.com\/blog\/2013\/09\/10\/fontastic\/"},"modified":"2015-06-19T00:23:05","modified_gmt":"2015-06-18T23:23:05","slug":"fontastic","status":"publish","type":"post","link":"https:\/\/www.celesteh.com\/blog\/2013\/09\/10\/fontastic\/","title":{"rendered":"Fontastic"},"content":{"rendered":"

I’ve got a demo<\/a> going of the SMuFL font thing here<\/a>. This is what my style.css looks like:<\/p>\n

\n@font-face {\n  font-family: Bravura;\n  src: local(\"Bravura Regular\"),\n    local(\"BravuraRegular\"), \n    url(Bravura.otf) format(\"opentype\");\n}\n \nbody {\n  font-family: Bravura, Sonata, sans-serif; \n}\n\ntd {font-size:200%;}\n<\/pre>\n
I cheated. Instead of writing the script to generate all the glyphs in javascript, I used sclang because I know it already. This is the code:<\/p>\n
\ni = 0x1D1FF - 0x1D100 + 1;\n\n\"<html>\".postln;\n\"<head>\".postln;\n\"<link rel=\"stylesheet\" type=\"text\/css\" href=\"style.css\">\".postln;\n\"<\/head>\".postln;\n\"<body>\".postln;\n\"<table border =1 cellpadding =5>\".postln;\n\ni.do({|glyph|\n \/\/ unicode music section\n glyph = glyph + 0x1D100;\n \"<tr><td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n\n \/\/ SMuFL extra music char section\n glyph = glyph + 0xE000 - 0x1D100;\n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n  \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF; \n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF; \n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF; \n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n \"<td>%<\/td><td>&#x%;<\/td>\".postf(glyph.asHexString(5), glyph.asHexString(5));\n glyph = glyph + 0xFF;\n \"<td>%<\/td><td>&#x%;<\/td><\/tr>n\".postf(glyph.asHexString(5), glyph.asHexString(5));\n});\n\"<\/table>\".postln;\n\"<\/body><\/html>\".postln;\n\"\";\n<\/pre>\n
It’s not the nicest code I’ve ever written.
\nIf you click through<\/a> and see musical stuff at the top of the first two columns, then all is well.  If you see non musical stuff, like linux penguins, then the font thing didn’t work. This is what it looks like for me:
\n.flickr-photo { border: solid 2px #000000; }.flickr-yourcomment { }.flickr-frame { text-align: left; padding: 3px; }.flickr-caption { font-size: 0.8em; margin-top: 0px; }<\/p>\n
 \"\"<\/a>
 Bravura in Firefox<\/a>, originally uploaded by celesteh<\/a>.<\/div>\n
If you’re getting something really different, if you don’t mind leaving a comment about your browser and operating system? This is supposed to work with internet explorer, so I’m interested in the experiences of Windows users and especially of iPad users.
\nI mentioned yesterday that I was drawing some influence from Russian art of the revolutionary period. This is a picture of a plate originally designed around then:
\n.flickr-photo { border: solid 2px #000000; }.flickr-yourcomment { }.flickr-frame { text-align: left; padding: 3px; }.flickr-caption { font-size: 0.8em; margin-top: 0px; }<\/p>\n
 \"\"<\/a>
 Supermatist Plate<\/a>, originally uploaded by celesteh<\/a>.<\/div>\n
It’s got a nice mix of abstract and concrete symbols. Also this google search<\/a> returns a load of suprematist images. There seems to be a clear relationship between those kinds of images and some of Schaeffer’s colour pieces, which are single page graphic scores.
\nThe next steps for me, aside from getting some javascript skills, are picking which of those many many many musical symbols will be in my palette. I can’t just pick randomly within the range, because some of them would be especially nonsensical (like the MIDI cable ones) and not every glyph is supported.
\nAlso, I still need to pick out some text.<\/p>\n","protected":false},"excerpt":{"rendered":"
I’ve got a demo going of the SMuFL font thing here. This is what my style.css looks like: @font-face { font-family: Bravura; src: local(“Bravura Regular”), local(“BravuraRegular”), url(Bravura.otf) format(“opentype”); } body { font-family: Bravura, Sonata, sans-serif; } td {font-size:200%;} I cheated. Instead of writing the script to generate all the glyphs in javascript, I used sclang … Continue reading Fontastic<\/span><\/a><\/p>\n","protected":false},"author":1,"featured_media":2282,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"activitypub_content_warning":"","activitypub_content_visibility":"","activitypub_max_image_attachments":4,"activitypub_interaction_policy_quote":"anyone","activitypub_status":"","footnotes":""},"categories":[1],"tags":[42,77,79,11],"class_list":["post-88","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-uncategorised","tag-composing","tag-creative-pact","tag-font","tag-music"],"_links":{"self":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts\/88","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/comments?post=88"}],"version-history":[{"count":1,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions"}],"predecessor-version":[{"id":2281,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/posts\/88\/revisions\/2281"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/media\/2282"}],"wp:attachment":[{"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/media?parent=88"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/categories?post=88"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.celesteh.com\/blog\/wp-json\/wp\/v2\/tags?post=88"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}