Glyph table sort order

[ahmedghazi]

Hi,
a client of mine asks me if i can manage the glyph table sort order, or at least have a glyph table per font variation (uppercase, lowercase, aåáâã, xyzåáâã).

[graphicore]

We could enable to inject some custom function via the options that allows selection and order of the glyphs that go into the table.
That way, you could completely customize the table and produce either of your suggested variants.

The signature would look something like this:

/**
 * `this` is the GlyphTable.
 * returns: `glyphOrder` an array of glyph indexes 
 */
function customGlyphOrder( ) {
    var glyphOrder = [];
    this._font; // the opentype.js font object
    this._options; // the options can be used to modify the behavior
    ...
   return glyphOrder;
}

It could be also useful to allow some data- attributes scheme, which GlyphTables would have to know and pass down the values to GlyphTable. Would be used like:

<div class="glyph-table" data-glyphorder="lowercase"></div>

To interperet the glyphorder value "lowercase"would be the task of customGlyphOrder:

function customGlyphOrder( ) {
    // this._options.glyphorder === 'lowercase';
}

What do you think?

[graphicore]

To give some context, the current default order would be created like this (compare https://github.com/graphicore/specimenTools/blob/master/lib/widgets/GlyphTable.js#L174):

function customGlyphOrder( ) {
    var glyphOrder = [], i, l;
    for(i=0,l=this._font.glyphNames.names.length;i<l;i++)
        glyphOrder.push(i);
    return glyphOrder;
}

[ahmedghazi]

That is great, with the data attribute, the same way you do with de xHeight, select, order.

[graphicore]

the same way you do with de xHeight, select, order.

What's the deal with xHeight?

For the sake of simplicity, I'd just provide one attribute data-glyphorder and you would have to parse it yourself, maybe pass JSON (caution with attribute quotes!):

<div class="glyph-table" data-glyphorder='{select: "lowercase", order: "a-z"}'></div>

function customGlyphOrder( ) {
    options = JSON.parse(this._options.glyphorder);
    // options.select === 'lowercase'
    // options.order === '"a-z'
}

Or a separated string:

<div class="glyph-table" data-glyphorder="lowercase, a-z"></div>

function customGlyphOrder( ) {
    options = this._options.glyphorder.split(',')
                  .map(function(str){return str.trim();})
    select = options[0]; // === 'lowercase'
    order = options[1]; // === 'a-z'
}

[ahmedghazi]

The best would be to filter through data attribute
uppercase
lowercase
small caps
the rest of the glyphs

[graphicore]

The best would be to filter through data attribute

I'm suggesting that you'll implement this yourself. It's hard to get this right for all possible fonts. But, for one foundry, its probably feasible.

[ahmedghazi]

So in the "_initCells" function i can call the customGlyphOrder to change the order, but on the this._font.glyphNames.names i only have unicode, so i should implement depending on the range unicode?
Or is there an easier way?

[graphicore]

So in the "_initCells" function i can call the customGlyphOrder to change the order,

Yes. It's not implemented yet, but you will be able to define your own customGlyphOrder function.

but on the this._font.glyphNames.names i only have unicode, so i should implement depending on the range unicode?

You can use all of this._font (opentypejs). Glyph names are likely "production names" like uni1234, so that's not much better than using unicodes, however, small caps may have a name like uni1234.sc but no own unicode. So that may help you to select all small caps and extract what their corresponding unicode is.
But this really depends on how the font is made, that's why I don't want to try to implement it generically.

[ahmedghazi]

Thx, i'll do that.

[graphicore]

Ok, I'll implement this.

What is the deal with "xHeight"?

[ahmedghazi]

The way you give parameters here https://graphicore.github.io/mdlFontSpecimen/
<div class="mdlfs-x-height-diagram mdlfs-diagram" data-diagram-name="xHeight" data-diagram-ascent="800" data-diagram-descent="5"></div>

[graphicore]

It's underway #27

I modified the example/simple to test this, here's a gist:

https://gist.github.com/graphicore/5d8fe09b990ce20d10a4eac3301948dc

Notes:

index.html

Attributes starting with data-glyphtable- will be available in this._dataAttributes.{name}. E.g.:
data-glyphtable-contains => this._dataAttributes.contains

<div class="glyph-table" data-glyphtable-contains="A"></div>

main.js:

I'm only showing the interesting parts here.

customGlyphOrder is a bit silly but a good start.

        function customGlyphOrder() {
            //jshint validthis:true
            var glyphOrder = [], i, l, name;
            for(i=0,l=this._font.glyphNames.names.length;i<l;i++) {
                name = this._font.glyphNames.names[i];
                if(name.indexOf(this._dataAttributes.contains) !== -1)
                    glyphOrder.push(i);
            }
            return glyphOrder;
        }

        var glyphTablesOptions = {
          glyphTable: {
            glyphOrderFunc: customGlyphOrder
          }
        };

        factories = [
        ...
          , ['glyph-table', GlyphTables, glyphTablesOptions]
        ...
        ];

[graphicore]

When you confirm that this is sufficient, I will merge. :-)