Experiment with icons for languages

Meta SC Next
1

@blake @vimala @Jhanarato

Here’s a mockup for displaying the languages in the nav drawer as icons.

image
image1913×1836 317 KB

I’m not entirely happy with the use of the little language codes as we do currently. It’s okay, but I think we can do better.

In MD lists, including nav and dropdowns, it is common to have an icon on the left. I’m wondering whether this can be used for the languages.

In the experiment, I have applied it to the nav drawer only, but in production, it would apply wherever language IDs are used, especially in the language selection dropdowns in the suttaplexes.

Right now it’s just fake icons, but we should use a proper icon set, for example this one:

We can also use a title attribute for the full language name.

Using icons like this would make it clearer what they are; the uniform shape shows that it is the same kind of thing, and they’re shaped like speech bubbles.

The icons just use the ISO codes in latin script. But in the experiment I tried something a little more fun, adding the ISO code for the language in the original or most characteristic script for that language:

  • Brahmi for Pali
  • Kharosthi for Gandhari
  • Tibetan for Tibetan
  • Chinese for Chinese (here I used the language name rather than ISO code)
  • Devanagari for Sanskrit.

This is meant to be used for original languages only, and would be a way of differentiating original languages from translations.

Obviously it’s not possible to get the metrics right in such a simple mockup. If we were to go down this road, we’d want to create special icons for these.

To me this is a way of paying homage to the rich traditions on which we draw. You could argue, of course, that the use of the scripts makes it more obscure. But I suspect that in practice this won’t be a problem. In some cases, the scripts are pretty well known and should aid rather than hinder identification (Chinese, Sanskrit, Tibetan). For Pali the use of Brahmi is obscure, but I think everyone will find the Pali texts. For Gandhari (and perhaps other obscurities like Tocharian) the ISO code is obscure anyway (who knows what pgd stands for?).

Anyway, let me know if you like this idea. Hopefully it wouldn’t be too hard to get the basic icons from the above source working. If we want to create the specialized icons, maybe we can commission the designer who made these.

1 Like
2

Ah … so you are the one who just messed up what I was doing!!! :slight_smile:
I had just implemented the iron icons and the animation … Will see how to solve this.

1 Like
3

In that case, don’t let me mess up serious work! Just revert my changes. tell you what, i’ll do a screen shot and that should serve just as well.

4

Don’t worry … all changes will be merged.

5

Don’t merge them, revert them. They are not production code.

6

Sure.

7

Thanks, i’ve added a screenshot above. That’s all there was to it, anyway, so nothing’s lost.

8

I think I did it … try to pull and see what you got. I’m not sure if I managed to delete all of your changes; been messing around a bit with this. I don’t actually know how to deal with such things correctly yet.

9

That looks fine, the animations are lovely.

1 Like
10

Ta. I’m OK with the language icon if you want. You can change the CSS or add some paper-icon thingy. Got to go to Samita meeting now so will look later.

1 Like
11

I noticed he even has an icon for Walloon! But how about making them some nice color, like the blue of the below reply-button.

You can make them with CSS very easily:
http://ilikepixels.co.uk/drop/bubbler/

12

Maybe, we’d have to see how it works in context. Usually icons in MD lists are the standard icon grey. If they’re SVGs, I believe they can be styled with CSS? But anyway, changing the color shouldn’t be hard.

You can, but it doesn’t mean you should! Best to stick with the same format iron-icons use, which is what, PNG or SVG?

13

Using svg elements to create icons has a few advantages over traditional bitmap graphics like jpg or png. Icons that use svg are vector based so they are resolution independent and should look good on any device. They are stylable via css. Icons can be themed, colorized, and even animated.
Iron icons are svg but they are not made in a particular color: on our site I have styled them grey.

https://www.webcomponents.org/element/PolymerElements/iron-iconset-svg

You can try making one yourself.

Or you can use a raster sprite sheet (i.e. you have one png files with many different icons in it and you pick out the icon you want based on the position it is in inside the png):

https://www.webcomponents.org/element/PolymerElements/iron-iconset

This is the code for a nice blue svg text balloon for the chinese version (double the size):

image

<svg width="20" height="20">
  <rect x="0" y="0" rx="2" ry="2" width="15" height="15" style="fill:blue;opacity:0.8" />
  <polygon points="3,15 7,15 5,20" style="fill:blue;opacity:0.8" />
  <text x="1" y="10" fill="white" font-size="7px" >中文</text>
</svg>

or pali/sanskrit:
image

<svg width="20" height="20">
  <rect x="0" y="0" rx="2" ry="2" width="15" height="15" style="fill:blue;opacity:0.8" />
  <polygon points="3,15 7,15 5,20" style="fill:blue;opacity:0.8" />
  <text x="3" y="10" fill="white" font-size="10px" >pi</text>
</svg>
2 Likes
14

I wonder how extensible iron-icons is? Can we just put a bunch of svgs in there and call them like any other icon?

15

No, that will be overwritten every time iron icons is updated.
You have to make your own svg file and than call that. I can do it if you make the code.

16

Thanks, this is interesting. I never tried actually composing with SVG before!

Using text in the icons has the advantage that we could use whatever script we wanted. However, some of the scripts are exotic, and people won’t have them installed, so it would probably be better to convert them to a pure graphic rather than including text.

I had a bit of a look at how colored icons are used in MD. It seems that the standard is the grey as we have, and colors are used where they can aid comprehension. In this usage they mirror the color of the header for that app. For example, in Google Docs the header is one color, say blue, and the spreadsheets are another, say green. The icons are the same color as the header. In the main list of files in Google Drive, the files from Drive keep their blue color, and those from Sheets keep their green color. This helps to keep the kinds of files visually distinct.

Anyway, I’m not sure that we have a similar case to use colored items on SC. Let’s keep our eyes out for a case where color might help to clarify the kinds of list items.

2 Likes
17

Check out InkScape. I used it to put together a new template for our guest bookings but you can do everything from diagrams to fine art. Note that SVG support varies from browser to browser, so make sure you test it. Simply put file.svg into your URL bar or embed it with a standard <img> tag.

1 Like