Icons names + Syntax - Githubissues

vv-monsalve commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

casasin commented 1 year ago

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

casasin commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

Multiple triggers is fine with me.

CaSe InSenSitIvItY is FiNe WiTh Me ToO

:)

casasin commented 1 year ago

Multiple triggers is fine with me.

CaSe InSenSitIvItY is FiNe WiTh Me ToO

:)

Will implement it once we have the final keywords then.

casasin commented 1 year ago

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 commented 1 year ago

whOEvEr TyPes LIkE thIS DoES noT DesERvEs iCoNs :)

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

davelab6 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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

casasin commented 1 year ago

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

Updated on the table 👆

vv-monsalve commented 1 year ago

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?

Proof-Playpen_Page_1

casasin commented 1 year ago

"dinosaur" already using U+1F996

casasin commented 1 year ago

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

josescaglione commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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.

https://github.com/TypeTogether/Playpen-Sans/assets/48698976/6eac4436-1599-4b4d-b7c0-2af20c7e5233

behdad commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

I will review them @vv-monsalve

josescaglione commented 1 year ago

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

davelab6 commented 1 year ago

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 commented 1 year ago

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 commented 1 year ago

I agree it's totally not worth.

davelab6 commented 1 year ago

Seems like something for me to raise in the OT2 context :) https://github.com/harfbuzz/boring-expansion-spec/issues/96

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

vv-monsalve commented 1 year ago

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 commented 1 year ago

I agree it's totally not worth.

Check this other idea which is not totally bad at all: https://github.com/harfbuzz/boring-expansion-spec/issues/96#issuecomment-1612153706

vv-monsalve commented 1 year ago

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 commented 1 year ago

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

vv-monsalve commented 1 year ago

Icons look great :D

josescaglione commented 1 year ago

yes, Azza did a very nice job

chrissimpkins commented 12 months ago

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 commented 12 months ago

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 commented 11 months ago

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

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

casasin commented 11 months ago

Done in a2ffdcd

vv-monsalve commented 11 months ago

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 commented 11 months ago

Changed already in de384a1

vv-monsalve commented 9 months ago

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.

TypeTogether / Playpen-Sans

Icons names + Syntax #3