Parametric Example: Justification.

[dberlow]

Chris,

Included here is a Sketch-to-pdf file.

It's not a sketch of the web site example, but rather something for us discuss turning into some example(s), editorial, and illustrations.

But first we have to explore how to do that, and what the code looks like.

In the sketch file Justification Example.pdf

are two art boards, the first steps we discussed in getting variables for doing responsive parametric design.

The file “Justification Example”

Page 1

Left: graphic The design area of type and space. We talked about this last week, including locations of styles, and finding tolerances for variation.

Right: Spread Sheet A blank sheet showing all of these parameters and indication of their trends overt the size axes.

Page 2

Left: Text list of possible steps from Justification of the default, to justification of other sizes, and then to justification of other weights of sizes

Right: Sheet Above sheet is it’s url at Google* Sheet shows where parameters in x and y come from and in tan boxes, suggesting the values ranges for each.

These were made by trying things out in Typetools and are not final.

*included here. https://docs.google.com/spreadsheets/d/1-2ZrX0700-C07DTmHvcH5hnS0Qzv3_YSCTnyq2hoJU4/edit#gid=286124148

[ghost]

So this is the basic structure I'm looking at for representing these primordial values of "sensible ranges" based on the size and weight of the text. Basically this builds a two-dimensional size/weight space that you find your specific point in for a given text, and then interpolate all the axis ranges to that point.

Then the actual justification (or line spacing, or whatever) algorithm would tweak axes within those ranges.

Does that sound right?

[dberlow]

Yes!

On Feb 6, 2019, at 7:45 PM, Chris Lewis notifications@github.com wrote:

So this is the basic structure I'm looking at for representing these primordial values of "sensible ranges" based on the size and weight of the text. Basically this builds a two-dimensional size/weight space that you find your specific point in for a given text, and then interpolate all the axis ranges to that point.

Then the actual justification (or line spacing, or whatever) algorithm would tweak axes within those ranges.

Does that sound right?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[dberlow]

This size/weight is also probably well considered inside of a series of definitions like this?

Vars Scripttoscriptrefs Vars familytofamilyties Vars familyspace Vars sizeandweightranges Vars ‘’ tolerances Vars widthandweightranges Vars ‘’ tolerances Vars sizeandwidthranges Vars ‘’ tolerances Vars posturespace Vars ‘’ tolerances Vars familyfeaturespace Vars sizeandweightranges Vars ‘’ tolerances Vars widthandweightranges Vars ‘’ tolerances Vars sizeandwidthranges Vars ‘’ tolerances Vars posturespace

‘’ means ditto the above.

This also,shows where other demos we are working on, like e.g. the script alignments of Chinese, fit in?

[dberlow]

Indents in the above were lost. Screen below.

[ghost]

Hooray! I’ll build out the calculator that will take a size/weight and return the axis ranges. I’ll use dummy values until the spreadsheet is ready.

On Thu, Feb 7, 2019 at 12:27 AM David Berlow notifications@github.com wrote:

Yes!

On Feb 6, 2019, at 7:45 PM, Chris Lewis notifications@github.com wrote:

So this is the basic structure I'm looking at for representing these primordial values of "sensible ranges" based on the size and weight of the text. Basically this builds a two-dimensional size/weight space that you find your specific point in for a given text, and then interpolate all the axis ranges to that point.

Then the actual justification (or line spacing, or whatever) algorithm would tweak axes within those ranges.

Does that sound right?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-461327579, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1AbfN3mOQ2Is8z15b0NLYL7CIdaWaks5vK-OAgaJpZM4ajhc0 .

[dberlow]

Great! Just don’t let those dummies get too comfortable;)

On Feb 7, 2019, at 10:29 AM, Chris Lewis notifications@github.com wrote:

Hooray! I’ll build out the calculator that will take a size/weight and return the axis ranges. I’ll use dummy values until the spreadsheet is ready.

On Thu, Feb 7, 2019 at 12:27 AM David Berlow notifications@github.com wrote:

Yes!

On Feb 6, 2019, at 7:45 PM, Chris Lewis notifications@github.com wrote:

So this is the basic structure I'm looking at for representing these primordial values of "sensible ranges" based on the size and weight of the text. Basically this builds a two-dimensional size/weight space that you find your specific point in for a given text, and then interpolate all the axis ranges to that point.

Then the actual justification (or line spacing, or whatever) algorithm would tweak axes within those ranges.

Does that sound right?

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were assigned.

Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-461327579, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1AbfN3mOQ2Is8z15b0NLYL7CIdaWaks5vK-OAgaJpZM4ajhc0 .

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

I've put together a function to interpolate in-between ranges. The basic idea is:

• given a set of "anchor" sizes (6, 14, 144) and weights (400, 700),
• and a "target" size and weight (24, 500),
• find the "anchor" size/weight combo immediately "below" and "above" the target (14/400 and 144/700)
• interpolate where you are in between the anchors and return the interpolated ranges

There's a bit of confusion if the "target" point is at different points between the relevant size and weight ranges. For instance, say the target is 7pt and 600 weight. The size interpolation is toward the bottom of the range, and the weight interpolation is toward the top. For now I'm just taking the average.

If there is an obvious solution I am missing, please let me know. Otherwise, we can see how this feels in production and adjust if needed.

[dberlow]

I need to rewrite to make sure I understand, bear with me:

You've put together a function that :

0. orders two list of values into an array, wght/opsz eg.

1. Find the closest masters to a target wght/opsz in the array

2. interpolates between the found anchors of the target to get other values required? (xtra, e.g.)

If the target is 7pt and 600 (OS/2 weight), you are screwed, believe me, if you continue to use OS/2 values, we are screwed, believe me more than you seem to at this point. There is no relationship between the typographic appearances we are programming for and OS/2 values. 400 can be any visual (measurable in 1/1000s), distance the developer wants it to be from 400 to 700 in OS/2. You don't know how many 1/1000s it is.

If you use XOPQ and normalize the ranges of your axes you're not screwed.

So 6-14 is 8 pts, 14 to 144 is 130, for a total of 138, and because opsz is objective, you know every % on the axis represents the same amount of its. Anchors are all useful for calculation.

SO, XOPQ! 6 = 128, 14-102, 144=96, or whatever... now you have values on both axes you can value each anchor relative to the whole axis, not just 1/2.

Does that end confusion?

Thanks.

On Thu, Feb 7, 2019 at 11:11 PM Chris Lewis notifications@github.com wrote:

I've put together a function to interpolate in-between ranges. The basic idea is:

• given a set of "anchor" sizes (6, 14, 144) and weights (400, 700),
• and a "target" size and weight (24, 500),
• find the "anchor" size/weight combo immediately "below" and "above" the target (14/400 and 144/700)
• interpolate where you are in between the anchors and return the interpolated ranges

There's a bit of confusion if the "target" point is at different points between the relevant size and weight ranges. For instance, say the target is 7pt and 600 weight. The size interpolation is toward the bottom of the range, and the weight interpolation is toward the top. For now I'm just taking the average.

If there is an obvious solution I am missing, please let me know. Otherwise, we can see how this feels in production and adjust if needed.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-461684508, or mute the thread https://github.com/notifications/unsubscribe-auth/AB3ajlBoh09Mx8o04QfZmg-SYN2genBjks5vLPj_gaJpZM4ajhc0 .

[dberlow]

The Sheets for our user opsz are filled out for 10, 14 and 48 point.

I've tested the ranges of workspace, tracking and xtra over that size range and besides the sheets, left my notes in the pdf enclosed for discussion.

thanks. AmstelvarAlpha-X-Tolerances.pdf

[ghost]

Here's my interpolation dilemma. The grid of dots are the size/weight masters. My current algorithm is interpolating along the dotted line between the smaller/lighter master and the bigger/heavier master. But what if the target is the X that is nowhere near that line? I think my straight line is too simplistic, and what I really need to do is first interpolate along x1-x4 and x2-x3, and then "up" from there.

[ghost]

Okay, I got it, I need to interpolate along the four sides and then inter-interpolate between those four new points.

[dberlow]

You are trying to locate in two dimensions at once.

I'm trying to illustrate the difference between what you are trying to do and what we need to do.

But I just found out, instead of navigating to an opsz in type tools, and copying the text of the parameters (blue)... [image: Screen Shot 2019-02-09 at 7.05.57 AM.png] ...because those blue numbers are incorrect (being all the default's values, regardless of what opsz they are), I have to copy the real values from my spreadsheet to illustrate what we need to do.

Note above on screen grab: that the ytlc, (x-ht), is "500" at each size, but at the size selected the XTLC value is "478" on the slider. (If this gets fixed, let me know, thanks).

I'll have a complete step-by-guide, complete with the actual parameters, functions and descriptions this weekend.

Please do not worry until then, or even after.

Thanks.

On Fri, Feb 8, 2019 at 4:13 PM Chris Lewis notifications@github.com wrote:

Okay, I got it, I need to interpolate along the four sides and then inter-interpolate between those four new points.

[image: img_9389] https://user-images.githubusercontent.com/587009/52506388-4b082780-2ba3-11e9-919b-e11a06d56dcc.jpg

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-461948858, or mute the thread https://github.com/notifications/unsubscribe-auth/AB3ajtFmQgO3LbkWETmO1KBGIr7zDiLeks5vLeiOgaJpZM4ajhc0 .

[ghost]

Yes, typetools pulls several tricks when doing the "ghost sliders" thing. If you adjust a composite, the sliders move but the parametric values don't actually get applied. However if you then touch a parametric sliders, the composite will jump back to its default and all the parametrics will be applied for real in the CSS. So that is a quicker way for you to copy the values.

Santiago long ago asked me to switch around the logic of which sliders get applied for real and which ones only move for show. Originally, the composites would never get applied in the real CSS, only the parametrics. But at some point apparently the Amstelvar design changed in some way that the composite value was not always an exact mathematical combination of the parametrics, so Santiago recommended using the real opsz etc, unless the user actually started messing with the parametric sliders. So that's how it works now.

[dberlow]

On Feb 9, 2019, at 9:50 AM, Chris Lewis notifications@github.com wrote:

Yes, typetools pulls several tricks when doing the "ghost sliders" thing. If you adjust a composite, the sliders move but the parametric values don't actually get applied. However if you then touch a parametric sliders, the composite will jump back to its default and all the parametrics will be applied for real in the CSS. So that is a quicker way for you to copy the values.

Santiago long ago asked me to switch around the logic of which sliders get applied for real and which ones only move for show. Originally, the composites would never get applied in the real CSS, only the parametrics. But at some point apparently the Amstelvar design changed in some way that the composite value was not always an exact mathematical combination of the parametrics, so Santiago recommended using the real opsz etc, unless the user actually started messing with the parametric sliders. So that's how it works now.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

No message came through on your last comment.

I'm currently pondering this illustration in your PDF, and how to put that into code.

[dberlow]

Yeah, I started answering and decided to work on a topic instead, and sketch out some of what I think are the basics of parametric use.

Let me know if this helps, thanks.

On Feb 10, 2019, at 1:35 PM, Chris Lewis notifications@github.com wrote:

No message came through on your last comment.

I'm currently pondering this illustration in your PDF, and how to put that into code.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

I have a working parametric opsz/weight calculator, using @dberlow's algorithm of specifying a size, and then a relative weight specified as a % of the default XOPQ: https://variablefonts.typenetwork.com/examples/styles/parambulatrics

This does not yet incorporate the min/max "sane" values from the spreadsheet.

[dberlow]

Chris, The material that I supplied you about the perambulation of parameters was provided, as stated, as background information for you to understand what we’re doing, and for me to understand if you are doing things in code the same way I’m thinking about it in type.

Interesting as the work you’ve done is, It was not intended as an example in the brochure. It is the background, after which the vertical and horizontal spacing, and relative weight and wdth programming can be done.

Thanks

On Feb 26, 2019, at 1:59 PM, Chris Lewis notifications@github.com wrote:

I have a working parametric opsz/weight calculator, using @dberlow's algorithm of specifying a size, and then a relative weight specified as a % of the default XOPQ: https://variablefonts.typenetwork.com/examples/styles/parambulatrics

This does not yet incorporate the min/max "sane" values from the spreadsheet.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

Yes I know, this was just my canvas for getting the calculations working. Hope to have some basic justification going today.

On Wed, Feb 27, 2019 at 2:02 AM David Berlow notifications@github.com wrote:

Chris, The material that I supplied you about the perambulation of parameters was provided, as stated, as background information for you to understand what we’re doing, and for me to understand if you are doing things in code the same way I’m thinking about it in type.

Interesting as the work you’ve done is, It was not intended as an example in the brochure. It is the background, after which the vertical and horizontal spacing, and relative weight and wdth programming can be done.

Thanks

On Feb 26, 2019, at 1:59 PM, Chris Lewis notifications@github.com wrote:

I have a working parametric opsz/weight calculator, using @dberlow's algorithm of specifying a size, and then a relative weight specified as a % of the default XOPQ: https://variablefonts.typenetwork.com/examples/styles/parambulatrics

This does not yet incorporate the min/max "sane" values from the spreadsheet.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-467800812, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1ATALRZod2bL0_g_hJb-jEq3GIeotks5vRlebgaJpZM4ajhc0 .

[dberlow]

OK thanks so much. It just looks so much like it’s part of the site I got fo//ed.

On Feb 27, 2019, at 11:33 AM, Chris Lewis notifications@github.com wrote:

Yes I know, this was just my canvas for getting the calculations working. Hope to have some basic justification going today.

On Wed, Feb 27, 2019 at 2:02 AM David Berlow notifications@github.com wrote:

Chris, The material that I supplied you about the perambulation of parameters was provided, as stated, as background information for you to understand what we’re doing, and for me to understand if you are doing things in code the same way I’m thinking about it in type.

Interesting as the work you’ve done is, It was not intended as an example in the brochure. It is the background, after which the vertical and horizontal spacing, and relative weight and wdth programming can be done.

Thanks

On Feb 26, 2019, at 1:59 PM, Chris Lewis notifications@github.com wrote:

I have a working parametric opsz/weight calculator, using @dberlow's algorithm of specifying a size, and then a relative weight specified as a % of the default XOPQ: https://variablefonts.typenetwork.com/examples/styles/parambulatrics

This does not yet incorporate the min/max "sane" values from the spreadsheet.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-467800812, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1ATALRZod2bL0_g_hJb-jEq3GIeotks5vRlebgaJpZM4ajhc0 .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[dberlow]

...And by the way what you did show looks pretty impressive!

On Feb 27, 2019, at 11:33 AM, Chris Lewis notifications@github.com wrote:

Yes I know, this was just my canvas for getting the calculations working. Hope to have some basic justification going today.

On Wed, Feb 27, 2019 at 2:02 AM David Berlow notifications@github.com wrote:

Chris, The material that I supplied you about the perambulation of parameters was provided, as stated, as background information for you to understand what we’re doing, and for me to understand if you are doing things in code the same way I’m thinking about it in type.

Interesting as the work you’ve done is, It was not intended as an example in the brochure. It is the background, after which the vertical and horizontal spacing, and relative weight and wdth programming can be done.

Thanks

On Feb 26, 2019, at 1:59 PM, Chris Lewis notifications@github.com wrote:

I have a working parametric opsz/weight calculator, using @dberlow's algorithm of specifying a size, and then a relative weight specified as a % of the default XOPQ: https://variablefonts.typenetwork.com/examples/styles/parambulatrics

This does not yet incorporate the min/max "sane" values from the spreadsheet.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

— You are receiving this because you were assigned. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-467800812, or mute the thread https://github.com/notifications/unsubscribe-auth/AAj1ATALRZod2bL0_g_hJb-jEq3GIeotks5vRlebgaJpZM4ajhc0 .

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.

[ghost]

First basic justification example is up: https://variablefonts.typenetwork.com/examples/spacing/basic-justification

It starts with the narrowest viable XTRA (from @dberlow's spreadsheet), and then expands each line by first trying bigger XTRA, and then continuing with word spacing if that's not enough.

You can drag the right margin to make the paragraph narrower or wider.

[ghost]

@dberlow we'll need a slight update on the letterspacing and wordspacing tolerances, which in CSS practically need to be specified in fractions of an em.

For word spacing, Amstelvar's space appears to be 0.3195em, so I'll use that unless I hear different. But for letterspacing, where the default is zero, what should your spreadsheet percentages be multiplied by?

[ghost]

Or is that 10% of em??

[ghost]

New justification example page with several examples: Wordspace only, Letterspace + Wordspace, and XTRA + LS + WS. This is using the tolerances from the spreadsheet!

https://variablefonts.typenetwork.com/topics/spacing/justification

Later today will add a size and weight slider so you can see the tolerances adjust live.

[dberlow]

Looks good to me.

On Thu, Feb 28, 2019 at 2:40 PM Chris Lewis notifications@github.com wrote:

New justification example page with several examples: Wordspace only, Letterspace + Wordspace, and XTRA + LS + WS. This is using the tolerances from the spreadsheet!

https://variablefonts.typenetwork.com/topics/spacing/justification

Later today will add a size and weight slider so you can see the tolerances adjust live.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/TypeNetwork/variable-fonts-info-site/issues/55#issuecomment-468409039, or mute the thread https://github.com/notifications/unsubscribe-auth/AB3ajrRc9HtKhC6XqURh5-2FbEexiqG0ks5vSDCagaJpZM4ajhc0 .

[ghost]

Added parametric size and weight sliders to justification.

[ghost]

Now here's a justification demo! http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/

Doesn't seem to work in Chrome, although as far as I know it should. Safari and Firefox work.

[dberlow]

Be nice if the text went “up”, into the reading direction rather than “down”, running from the reader?

On Apr 6, 2019, at 9:04 PM, Chris Lewis notifications@github.com wrote:

Now here's a justification demo! http://adobe-webplatform.github.io/Demo-for-Alice-s-Adventures-in-Wonderland/

Doesn't seem to work in Chrome, although as far as I know it should. Safari and Firefox work.

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub, or mute the thread.