Icons names + Syntax

[vv-monsalve]

• Access to icons through calt feature with syntax <container>'icon-name'</container>
  e.g.: [:puzzle:] for "puzzle" icon
• Icon names ideally should be simple and meaningful
• Instructions should be included in the Readme.md file

Proposal for names to make them easy to remember/use:

• using a hyphen instead of camel case names
• use words that convey meaningful ideas or concepts instead of graphic descriptions
• keeping a unified structure in composed names like descriptor-noun, making adjectives first as in English use e.g. happy-sun; pirate-sun

Icons list with current names and names suggestions

glyph Name	uni		Proposed name
shootingStar	1F320	🌠	shooting-star
birthdayCake	1F382	🎂	birthday-cake
artistPalette	1F3A8	🎨	paint
whiteUpBackhandIndex	1F446	👆	attention-index
thumbsUpSign	1F44D	👍	thumbs-up
thumbsDownSign	1F44E	👎	thumbs-down
openBook	1F4D6	📖	read
cheeringMegaphone	1F4E3	📣	announcement
battery	1F50B	🔋	battery
unicornFace	1F984	🦄	unicorn
dinosaur	None	🦖	dinosaur
jigsawPuzzlePiece	1F9E9	🧩	puzzle
ringedPlanet	1FA90	🪐	planet
pencil	270F	✏	pencil
checkmark	2713	✓	check-mark
crossMark	274C	❌	cross-mark
roundTarget	1F78B	🎯	target
sunFace	1F31E	🌞	happy-sun
suninlove	None		loving-sun
sunpirate	None		pirate-sun
sunsad	None		sad-sun
sunwink	None		wink-sun
homework	None		homework
paperplane	None		paper-plane
pencilbook	None		write
reward	None		accomplishment

[josescaglione]

I agree with Viviana but propose the use of upper cases as it will be a nicer fall back in the casethe font is missing, specially considering the purpose of the icons. They are supposed to stand out.

colonICON_NAMEcolon
Being the icon name all caps with underscore in place of spaces

So
:HAPPY_SUN:

can also be
:HAPPY-SUN:

[davelab6]

I would propose case insensitivity and the hyphen to make it as easy as possible for the teachers

[casasin]

Sure, will add the code and update the repo today (together with other stuff).

[casasin]

I would propose case insensitivity and the hyphen to make it as easy as possible for the teachers

Regarding case insensivity, do you mean the same result for :battery: :BATTERY: :Battery: :BatTEry: :bATTery: and so on? Or just all uppercase, all lowercase and Titlecase. ? (:BATTERY: :battery: :Battery:)

[josescaglione]

Excellent question...

I would propose case insensitivity and the hyphen to make it as easy as possible for the teachers

Regarding case insensivity, do you mean the same result for :battery: :BATTERY: :Battery: :BatTEry: :bATTery: and so on? Or just all uppercase, all lowercase and Titlecase. ? (:BATTERY: :battery: :Battery:)

[josescaglione]

Dear all, I would like to comment on the nature of the meaning of some of these icons in primary school context. Even though the suggested names seem like a good match from a representation point of view I believe we need to also supply option for the meaning for teachers and students. Maybe we need two or even three wording options to access some icons.

Notes below

cheeringMegaphone | 1F4E3 | 📣 | announcement
This also means "listen" or "pay attention"

battery | 1F50B | 🔋 | battery
This is supposed to be LOW BATTERY and its meaning is that something "needs more effort"

jigsawPuzzlePiece | 1F9E9 | 🧩 | puzzle
Also to indicate activity task such as "complete"

checkmark | 2713 | ✓ | check-mark
Means "correct"

crossMark | 274C | ❌ | cross-mark
Means "incorrect"

reward | None |   | accomplishment
Maybe "well done" or "excellent" or "great work"

[davelab6]

Multiple triggers is fine with me.

CaSe InSenSitIvItY is FiNe WiTh Me ToO

:)

[casasin]

Multiple triggers is fine with me.

CaSe InSenSitIvItY is FiNe WiTh Me ToO

:)

Will implement it once we have the final keywords then.

[casasin]

I made some test and CaSe InSenSitIvItY breaks the builder: There's an overflow in GSUB with that long strings:
sub colon [s S] [h H] [o O] [o O] [t T] [i I] [n N] [g G] hyphen [s S] [t T] [a A] [r R] colon by shootingStar;
So IMHO I would approach just with UPPER-CASE, lower-case or Title-case.
What do you think?

[josescaglione]

whOEvEr TyPes LIkE thIS DoES noT DesERvEs iCoNs :)

UPPER-CASE, lower-case or Title-case is more than enough

[davelab6]

breaks the builder: There's an overflow in GSUB

With fontmake? I am surprised! :) I thought @behdad fixed it all. Please proceed as you say, I agree that as Jose says its more than enough, but I would like you to add Behdad to the repo and post the long string fea code so he can fix it. It should be possible.

[casasin]

With fontmake? I am surprised! :) I thought @behdad fixed it all. Please proceed as you say, I agree that as Jose says its more than enough, but I would like you to add Behdad to the repo and post the long string fea code so he can fix it.

Added.
The long string was sub colon [s S] [h H] [o O] [o O] [t T] [i I] [n N] [g G] hyphen [s S] [t T] [a A] [r R] colon by shootingStar;

[casasin]

Hi, see our keyword proposal for icons. Let us know what you think and if you agree we'll put the calt code in the features file.
(some of them have two keywords, some not):

glyph Name	uni		1st	2nd
sunFace	1F31E	🌞	happy-sun	happy
shootingStar	1F320	🌠	shooting-star	star
birthdayCake	1F382	🎂	birthday-cake	cake
artistPalette	1F3A8	🎨	paint	color-palette
whiteUpBackhandIndex	1F446	👆	attention-index	point-up
thumbsUpSign	1F44D	👍	thumbs-up	good
thumbsDownSign	1F44E	👎	thumbs-down	bad
openBook	1F4D6	📖	read	open-book
cheeringMegaphone	1F4E3	📣	announcement	attention
battery	1F50B	🔋	low-battery	incomplete
unicornFace	1F984	🦄	unicorn	magic
jigsawPuzzlePiece	1F9E9	🧩	puzzle
ringedPlanet	1FA90	🪐	planet
pencil	270F	✏	pencil
checkmark	2713	✓	check-mark	correct
crossMark	274C	❌	cross-mark	incorrect
roundTarget	1F78B	🞋	on-target	perfect
dinosaur	1F996	🦖	dinosaur
homework	None		homework	study
paperplane	None		paper-plane
pencilbook	None		write
sportsMedal	1F3C5	🏅	reward	prize
suninlove	None		loving-sun	love
sunpirate	None		pirate-sun	pirate
sunsad	None		sad-sun	sad
sunwink	None		wink-sun	wink

[vv-monsalve]

Probably the reward could use the sports medal U+1F3C5 🏅

[casasin]

Probably the reward could use the sports medal U+1F3C5 🏅

Updated on the table 👆

[vv-monsalve]

The font at commit 46b4a3e with the current calt syntax applied, is working ok when tested in InDesign, FontDrop and Crowbar

• Dinosaur could use the T-Rex U+1F996 🦖
• Should we review Vertical Metrics?

[casasin]

"dinosaur" already using U+1F996

[casasin]

@vv-monsalve Aboud Vertical Metrics, this should be reviewed with @josescaglione

[josescaglione]

The vertical metrics can be adjusted according to the new position of diacritics. I basically changed the viet double accents and the ydotbelow. This should allow tightening vMetrics. I opened a separate issue for this

[casasin]

The vertical metrics can be adjusted according to the new position of diacritics. I basically changed the viet double accents and the ydotbelow. This should allow tightening vMetrics. I opened a separate issue for this

The new Vmetrics values were alreay updated in the sources.

[vv-monsalve]

The mention of VM here was a question for reviewing the current VM with the icons now included. I've added a comment in the separate issue for them.

[vv-monsalve]

Icons
Please review the following:

• Size and thickness consistency. For all the icons look to visually even.
  E.g. check-mark and cross-mark are smaller; homework is bigger; pencil looks heavier/bigger; puzzle looks lighter
• Vertical alignment consistency. Either centered with x-height or at the baseline. Rounded shapes look like falling below the text line (suns, sports medal, target)
• Review the tracking between space and icons
• Please make the icons consistent with the weight axis

[vv-monsalve]

The unencoded icons are decomposed if deleting one of the letters. How to prevent that from happening?
I've tried turning one of them into a ligature (s_u_n_i_n_l_o_v_e) without carets, but it didn't work on my end.

icon-decompose.mov

[behdad]

I made some test and CaSe InSenSitIvItY breaks the builder: There's an overflow in GSUB with that long strings:
sub colon [s S] [h H] [o O] [o O] [t T] [i I] [n N] [g G] hyphen [s S] [t T] [a A] [r R] colon by shootingStar;
So IMHO I would approach just with UPPER-CASE, lower-case or Title-case.
What do you think?

This isn't surprising as that explodes exponentially.

If case-insensitivity is desired I suggest achieving that by mapping upper-case and lower-case letters to the same glyph.

[josescaglione]

Icons Please review the following:

• Size and thickness consistency. For all the icons look to visually even.
  E.g. check-mark and cross-mark are smaller; homework is bigger; pencil looks heavier/bigger; puzzle looks lighter
• Vertical alignment consistency. Either centered with x-height or at the baseline. Rounded shapes look like falling below the text line (suns, sports medal, target)
• Review the tracking between space and icons
• Please make the icons consistent with the weight axis

To clarify. Icons are not weight sensitive and were tweaked to a stroke thickness that made sense according to their complexity. They are not to form an icon system but to work naturally in the context of lowercase setting. As a result alignment and relative size may vary from drawing to drawing, this is once again according to the complexity of the shapes.

If any of these "breaks" the vMetrics we can review but so far we are happy with the design.

[josescaglione]

The unencoded icons are decomposed if deleting one of the letters. How to prevent that from happening?
I've tried turning one of them into a ligature (s_u_n_i_n_l_o_v_e) without carets, but it didn't work on my end.

Yes, this is something that was bound to happen.
We could encode in PUA, but that breaks the point of having readable texts as fallback option.

[behdad]

The unencoded icons are decomposed if deleting one of the letters. How to prevent that from happening?
I've tried turning one of them into a ligature (s_u_n_i_n_l_o_v_e) without carets, but it didn't work on my end.

I don't understand this. Can you explain?

[josescaglione]

Hey Behdad, hope you are well buddy.

What Viv means is that when you type :sun_in_love: the CALT replaces the string with an icon, but of course that disappears if you delete a letter. Not sure this is a problem though

[behdad]

Hey Behdad, hope you are well buddy.

Thank you. Likewise.

What Viv means is that when you type :sun_in_love: the CALT replaces the string with an icon, but of course that disappears if you delete a letter. Not sure this is a problem though

Right. I think that's expected as well.

[vv-monsalve]

They are not to form an icon system but to work naturally in the context of lowercase setting. As a result alignment and relative size may vary from drawing to drawing, this is once again according to the complexity of the shapes.

Hi @josescaglione, the revisions were suggested in the spirit of them working naturally in the context of lowercase settings actually. For the icons to run smoothly with the text line, having their own nature, but working more balanced in size, position, and color.

When testing them in the above sample, some of them seem to be working great to achieve that goal (e.g. shooting star, cake, palette, thumbs-up, etc). However, others would require only minor adjustments in position (mostly suns and rounded shapes), weight (pencil), or size (check and cross marks, puzzle, homework, pencil?) to work more evenly.

Regarding the weight, it also affects the goal of working naturally with lowercase, given when using thinner weights, as seen in the image above, the icons are heavier than the text. However, I'll leave it up to @davelab6 opinion.

[josescaglione]

I will review them @vv-monsalve

[josescaglione]

We will be uploading a new file @vv-monsalve
modified size and vertical alignment of some icons based on your request

[davelab6]

Thanks @behdad for weighing in :) The glyphs are different for upper and lower case, though. Is there really no way to do this in OpenType with bicameral designs?

[behdad]

Is there really no way to do this in OpenType with bicameral designs?

Not without the said explosion. A ligature of length ten would need to be encoded as 2^10=1024 separate ones!

I can think of much more complicated ways to do this more efficiently, but probably out of scope for this project. Here's one:

• Contextually match the ligature first; this would use glyph classes, so doesn't have the same combinatorial explosion problem.
• For each of the glyphs in the matched input, invoke a lookup to lowercase the letter.
• Invoke the actual ligature lookup that only operates on lowercase letters.

The above scheme is complicated and slow, and still might cause offset overflows. I don't suggest implementing it.

[casasin]

I agree it's totally not worth.

[davelab6]

Seems like something for me to raise in the OT2 context :) harfbuzz/boring-expansion-spec#96

Thanks @casasin and @behdad :) Reassigning to @vv-monsalve to verify, I think this is all set

[vv-monsalve]

We will be uploading a new file @vv-monsalve
modified size and vertical alignment of some icons based on your request

Hi, the latest font in repo at commit 097c8be yet needs to include some of the changes shown in the above image.

Image in the background, current font in magenta

[behdad]

I agree it's totally not worth.

Check this other idea which is not totally bad at all:
harfbuzz/boring-expansion-spec#96 (comment)

[vv-monsalve]

Thanks @behdad for the suggestion. However, probably at this point, the team will continue using the feature as it was implemented.
@casasin, @josescaglione, what do you think?

[davelab6]

I love it and I am in favor, if it is fast to render, and fast for @casasin to implement :)

[vv-monsalve]

Icons look great :D

[josescaglione]

yes, Azza did a very nice job

[chrissimpkins]

Our subsetter removes encoded icons by default in text families and we're seeing tofu in sandbox. Working with Nate to update the subsetter definition for this family so that we don't strip the icons out.

[vv-monsalve]

I created a spreadsheet for the icons with the information from the above table, including a column for the unicode block. Doing so, I noticed the round-target icon should probably be using 1F3AF instead of 1F78B.

[vv-monsalve]

We reviewed this today with José and agreed on using 1F3AF.
@casasin Could you please update it to

| directHit          | 1F3AF |  🎯 | on-target | perfect |

[casasin]

Done in a2ffdcd

[vv-monsalve]

Thanks @casasin. I've pulled and tested it in InDesign and is working fine.
The version number must be increased though, to register the change from the one that was already included in our servers. Please change it to 1.001.

[casasin]

Changed already in de384a1

[vv-monsalve]

The last decision made on this subject was to rename the icons to emojis and to discard the calt replacements in favor of assigning codepoints to all the emojis.

The v1.002 fonts already include this change, and the #12 is updating the Readme with the defined codepoints.

So, I'm closing this issue here. Please feel free to reopen it if you consider it should be kept open for any reason.