OpenMoji on dark background - initial attempt to fix #31

[carlinmack]

Works fairly well but:

1. doesn't work on nested groups
2. changes all the line endings to be instead of using self closing tags

We could fix the first one by mandating that all emoji must be flat and adding a test, or by being more careful when adding attributes to children.

I'm not too sure how to fix the second one, JSDOM doesn't seem to have much documentation.

To test, I highly recommend deleting everything but the emoji you want to generate from openmoji.json. For example, the emoji in this PR was generated with the following openmoji.json:

[{
    "emoji": "🎍",
    "hexcode": "1F38D",
    "group": "activities",
    "subgroups": "event",
    "annotation": "pine decoration",
    "tags": "bamboo, celebration, japanese, pine",
    "openmoji_tags": "",
    "openmoji_author": "Jonas Dunkel",
    "openmoji_date": "2019-05-07",
    "skintone": "",
    "skintone_combination": "",
    "skintone_base_emoji": "",
    "skintone_base_hexcode": "",
    "unicode": 0.6,
    "order": 3209
}]

PS b-g feel free to make any changes to code style etc :)

[b-g]

@carlinmack Super! Very cool!

Comments:

• Layer name is currently "background". Wondering whether there are better names e.g. "white-halo", "enclosure", "white-enclosure", "white-line", "white-padding".
• Just add the white-padding if the layer does not exist
• Differentiate between the cases: black fill and existing black stroke

Happy to help with the code / testing ... once we discussed everything a bit more.

[carlinmack]

• I think white-padding is best

• but what if the emoij has been edited since the padding was added? We shouldn't add another step to the process to remember to delete the padding.

• what do you mean differentiate?

[b-g]

@carlinmack

Layer name: white-padding ✅

but what if the emoij has been edited since the padding was added? We shouldn't add another step to the process to remember to delete the padding.

True. But then I think it would be better to add the white padding on the fly in the buildsystem on export to color/ and black/

what do you mean differentiate?

Note that the padding of 1. and 2. is not the same ... but should. Haven't had time to look into it, but likely this is because some people will have black shapes designed either by using just fill + no stroke OR fill and strokeWeight X.

doesn't work on nested groups

Might be possible to use recursion to walk trough all sub groups

changes all the line endings to be instead of using self closing tags

Would not be the case if SVGO were the last step

[carlinmack]

• yes I think adding the padding on export is a much better solution
• hmm I have no idea why that's the case
• yep there's definitely a way to do it, I just have to find out how
• problem solved!

[carlinmack]

So it unfortunately appears that the reason that the padding is "uneven" is because of the two different ways to define strokes

another problem is that if we use the fill for stroke as well - which is necessary due to the tail - is that it can bleed out over the stroke and add irregularities to the padding

A solution to this is to manually replace the fills with a duplicate that has the same anchors as the stroke. Unsure how many would need this performed on. Definitely not flags and most of the faces, but maybe all others? 😬

In conclusion, this is possible but maybe quite a large task that we could maybe roll out incrementally. Otherwise we'd need more hands on deck so that it doesn't take years

[carlinmack]

btw my intention for this isn't actually to overwrite the file, but output this so export-svg can use it. I'm just overwriting the file for debugging etc now. I recommend trying out a few examples (by editing openmoji.json like I mentioned in my first post) so you can see how much work this would be

[carlinmack]

I think a better approach would be to complete the strokes in the line-supplement layer, and then generate the padding with only the line and line-supplement layer. If we really don't want the extra stroke in the black emojis then we could add yet another layer that's ignored by the black export

[carlinmack]

I've generated all the assets and pushed it to my repository so we can see them https://carlinmack.github.io/openmoji/index.html Please use the SVG version and the black background as the PNGs are completely messed up. I'm not sure why this is, but this is an MVP so that we can assess how easy this will be

[b-g]

@carlinmack Wow! This is mega! I'm surprised how good it already works out of the box. Could you grant me write access to your POC repo? Once I have time again ... I'm keen to add a few ideas. But still ... this will involve quite some manual tweaking in the end :( Which we should discuss at some point in a call.

[carlinmack]

I've added you to the repo, I think the main work will be redrawing strokes and adding strokes, but hopefully not too much! let me know when you want to call :)

[b-g]

@carlinmack Super + many thanks for granting me access! Still super busy ... won't have time in the next days / weeks. But Daniel and myself might be able to find someone on HfG to support this over the summer.