Add better support for desktop applications

[FelixSchoen]

As far as I am concerned, in desktop applications (such as InDesign, etc.) it is currently not possible to style different icons using the CSS attributes. For example, it is not possible to apply a casting cost circle around a mana symbol, as this can only be done by applying the .ms-cost class to the icon, which is not possible in the context of desktop applications.

Perhaps OpenType-SVG Fonts could help with this problem, where two glyphs could be combined to create a new one (e.g. mana symbol + color "green"), although there would certainly be some complications with applying more than one class.

If I am missing some way of applying the CSS classes in a desktop context please let me know.

[andrewgioia]

@FelixSchoen I'll have to do more research on color fonts so I understand it better but I really like this idea and will investigate as I start on the v2 major update.

If you're able to share more on your workflow and how you style in InDesign with css classes I'd love to learn more. Does Creative Suite support styling color fonts with css? Or would you just be using it's GUI tools to style font characters? If the later, every symbol would most likely need a corresponding background/negative symbol, like the filled circle behind the mana symbols. That's doable just something I'd need to consider upfront.

[FelixSchoen]

I do not think that Creative Cloud (or any desktop application) supports styling fonts via CSS. Sadly I am no expert regarding the technical side of OpenType fonts, thus I can only provide you with an ideal user story from my perspective rather than some pointers on how to implement it.

Ideally, I would like to be able to combine the different symbols in a manner outlined by the article linked above (combining a regular person-emoji with a skin color emoji to obtain a colored version of the former). For example, I would like to combine the tap arrow and a circular outline to obtain the tap symbol used by many cards. Then, I would like to modify this "combination" of symbols with the shadow outline symbol, adding a drop shadow. Alternatively, selecting a specific glyph that exhibits the desired attributes (instead of combining several characters) would also do the job.

As far as I can tell, these modifications are currently handled by assigning each variation of a symbol its own glyph ID (GID). For example, the regular "girl waving hand" emoji in the EmojiOne font has a unicode value of 1F64B and a GID of 285. The different variations have a GID of 286 to 290, and their unicode is a combination (ligature) of the regular emoji and a skin color identifier, e.g., the unicode of the emoji with GID 290 is 1F64B + 1F3FF. Here, 1F3FF is a skin tone modifier.

The Trajan Color font handles things a little differently. Here, each of the characters has multiple versions with different GIDs for the same unicode. For example, the ampersand (unicode 0026) has about 20 different versions, each having a different GID, representing the color of the character. E.g., GID 158 unicode 0026 is an orange ampersand, GID 613 unicode 0026 is a blue one.

I don't think that the "combination of characters" would be a viable approach, as this is probably limited to ligatures of two characters. This would prohibit users from assigning three or more attributes to a character. On the other hand, the second mentioned approach could work, i.e., providing different glyphs for the same unicode character.

For example, let 0123 the unicode of the character representing a mana cost without a drop shadow. We could use this unicode to create different glyphs for the same unicode specifying the mana cost. E.g., GID 0 unicode 0123 could just be the empty mana symbol, GID 1 unicode 0123 could be zero mana cost, and so on. For mana cost symbols with drop shadows we could then use another unicode character, e.g., 0124, and repeat the above procedure.

A huge drawback of this approach is the fact that with this approach we need an exponential number of symbols with regard to the supported modifiers, as I imagine one would have to create all the combinations by hand rather than them being generated "on the fly" or by a compiler of some sorts. This is where I am limited by my technical knowledge of the subject, perhaps you have an idea.

Thanks for all your work! Just for your and any interested reader's information: In order to work around these limitations I created a custom font using the .svg resources from your repository that supports my exact usecase. This is not an elegant solution but it works, as I usually only need one version of an icon (e.g., a mana cost consisting of a number and the outlining circle) rather than different variations of it.