Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Set underline values in all source UFOs #285

Closed
benkiel opened this issue Jan 4, 2020 · 13 comments
Closed

Set underline values in all source UFOs #285

benkiel opened this issue Jan 4, 2020 · 13 comments
Labels
aug-2020 Issues open as of August 2020 [for planning purposes]

Comments

@benkiel
Copy link
Collaborator

benkiel commented Jan 4, 2020

Seems that Casual masters are set to defaults (i.e., None)

@arrowtype
Copy link
Owner

Thanks for flagging this. I'll take a look ASAP (probably tomorrow).

@arrowtype
Copy link
Owner

Documenting my logic here for future reference

(@benkiel, if you think anything here is a bad idea, please let me know your thoughts. Thanks for making the excellent extension for this task!)

It looks like underline & strikethrough values aren't supported for most users, but after exploring my options, of course I came to have an opinion about what tends to work best with the design, so I set values in light of that.

I have made a script, src/01-shell-scripts-for-sources/metrics/set-underline_strikethrough-values.py, to quickly set the underline & strikethrough values in all UFOs of a given directory.

Light to ExtraBold

Goals

  • Match optical stroke weight
  • Make strikethrough appear vertically-centered in lowercase (especially /c, /p, /e, /a)
  • Make space from baseline to underline echo general spacing between letters

image
image
image

ExtraBlack

Goals

  • Similar to above, but reduce strikethrough weight to maintain legibility of letters

image
image

Big caveat

Based on a build, a big shortcoming of underline & strikethrough values is that they aren't properly built into the variable output.

image

Unfortunately, my tests indicate that this is the case in both AFDKO and FontMake builds.

So, I guess I will probably have to set one value for strike through that works fairly well for the Light fonts, and up. :|

@benkiel
Copy link
Collaborator Author

benkiel commented Jan 14, 2020

Hmm, I'll have to look into the code on those. It may be that fontmake doesn't do anything with them...

@arrowtype
Copy link
Owner

(Ah, correction: I see that the new variable font build is still using FontMake – I mistakenly thought it was using AFDKO, but I'm remembering now that we decided to use FontMake for it, and that simplifies things nicely.)

FontMake is definitely doing something with the underline value, because the underline is quite different from their default values. The prior (AFDKO) build looked like this – note the much thinner underline:

image

After digging, I see that underline values are going into the post table:

<underlinePosition value="-145"/>
<underlineThickness value="150"/>

Also, FontMake is placing strikeout values in the OS/2 table:

<yStrikeoutSize value="80"/>
<yStrikeoutPosition value="314"/>

These values correspond to what I set in the Linear ExtraBlack sources.

However, FontMake isn't moving these into the MVAR table, as I believe it should. The OT spec does include strikeout and underline values in MVAR table, so it should be possible.

It seems that in addition, Apple Pages (probably Core Text in general) is disregarding the strikeout values in the OS/2 table. It's subtle, but the strikeout in my source files (left) is a bit heavier than what gets built into the output font (right):

image

...and actually, I don't mind this underline value too much – but it does look somewhat better to me with a bit more space (especially in smaller sizes). So, for now, I'll set the values to what works well for the light styles.

This would be quite a problem in a family with truly thin styles, though. I'll file a request in the FontMake issues to build underline & strikeout values into MVAR (and hope that some software will support that).

@arrowtype
Copy link
Owner

arrowtype commented Dec 17, 2020

Next steps:

  • UFOs currently have the same values applied to all. Try setting the values again and building into a VF.
  • check mvar table to see whether values have been built into VF.
  • maybe test in Sketch, etc.
  • make simplified reproduction case (e.g. with prepped fonts) if the mvar values aren’t built by fontmake

@arrowtype arrowtype added the aug-2020 Issues open as of August 2020 [for planning purposes] label Jan 8, 2021
@arrowtype
Copy link
Owner

Picking this back up.

Details worth noting:

  • The specific MVAR tags for these values are strs (strikeout size), stro (strikeout offset), unds (underline size), and undo (underline offset). From OT spec.
  • FontBakery considers the inclusion of an MVAR table to be a fail, with the following message:
 >> com.google.fonts/check/unwanted_tables
    Are there unwanted tables?
    with fonts/ArrowType-Recursive-1.072/Recursive_Desktop/Recursive_VF_1.072.ttf

      Rationale:                                                                
      Some font editors store source data in their own SFNT tables, and these   
      can sometimes sneak into final release files, which should only have      
      OpenType spec tables.                                                     

    * FAIL: The following unwanted font tables were found:
Table: MVAR
Reason: Produces a bug in DirectWrite which causes https://bugzilla.mozilla.org/show_bug.cgi?id=1492477, https://github.com/google/fonts/issues/2085

They can be removed with the gftools fix-unwanted-tables script.

    Result: FAIL

@arrowtype
Copy link
Owner

I’ve made a simple, 2-source wght axis test of whether FontMake now adds underline & strikethrough values to variable fonts: permalink to test. It does!

  <MVAR>
    <Version value="0x00010000"/>
    <Reserved value="0"/>
    <ValueRecordSize value="8"/>
    <!-- ValueRecordCount=5 -->
    <VarStore Format="1">
      <Format value="1"/>
      <VarRegionList>
        <!-- RegionAxisCount=1 -->
        <!-- RegionCount=1 -->
        <Region index="0">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
        </Region>
      </VarRegionList>
      <!-- VarDataCount=1 -->
      <VarData index="0">
        <!-- ItemCount=4 -->
        <NumShorts value="0"/>
        <!-- VarRegionCount=1 -->
        <VarRegionIndex index="0" value="0"/>
        <Item index="0" value="[14]"/>
        <Item index="1" value="[60]"/>
        <Item index="2" value="[80]"/>
        <Item index="3" value="[105]"/>
      </VarData>
    </VarStore>
    <ValueRecord index="0">
      <ValueTag value="stro"/>
      <VarIdx value="1"/>
    </ValueRecord>
    <ValueRecord index="1">
      <ValueTag value="strs"/>
      <VarIdx value="3"/>
    </ValueRecord>
    <ValueRecord index="2">
      <ValueTag value="undo"/>
      <VarIdx value="2"/>
    </ValueRecord>
    <ValueRecord index="3">
      <ValueTag value="unds"/>
      <VarIdx value="3"/>
    </ValueRecord>
    <ValueRecord index="4">
      <ValueTag value="xhgt"/>
      <VarIdx value="0"/>
    </ValueRecord>
  </MVAR>

A spot check of the Recursive sources confirms that I definitely did set all underline & strikethrough values to be the same, so next, I will try adjusting these to be specific to each weight, then seeing whether building again will bring those into the MVAR table. Maybe, this has been fixed in the toolchain. Or maybe, the complexity of the full build somehow breaks that part of the build.

@arrowtype
Copy link
Owner

arrowtype commented Feb 5, 2021

After running the script src/01-shell-scripts-for-sources/metrics/set-underline_strikethrough-values.py again on prepped sources, this now builds a variable font with varied underline thicknesses that work in Sketch!

recursive-underline-var.mp4

The strikethrough remains constant in Sketch, but it appears that it is getting set in to the MVAR table. But, the consistent strikeout size actually looks pretty good to me, throughout all styles, because it stays in the optical center of glyphs & their counters.

MVAR table with varied strikeout size, etc (Click to expand)
<MVAR>
    <Version value="0x00010000"/>
    <Reserved value="0"/>
    <ValueRecordSize value="8"/>
    <!-- ValueRecordCount=9 -->
    <VarStore Format="1">
      <Format value="1"/>
      <VarRegionList>
        <!-- RegionAxisCount=5 -->
        <!-- RegionCount=23 -->
        <Region index="0">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="1">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="2">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="3">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="4">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="5">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="6">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="7">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="8">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="9">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="10">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="11">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="12">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="13">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="14">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="15">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="16">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="17">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="18">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="19">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="20">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="21">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.6057"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
        <Region index="22">
          <VarRegionAxis index="0">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="1">
            <StartCoord value="0.0"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="2">
            <StartCoord value="0.6057"/>
            <PeakCoord value="1.0"/>
            <EndCoord value="1.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="3">
            <StartCoord value="-1.0"/>
            <PeakCoord value="-1.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
          <VarRegionAxis index="4">
            <StartCoord value="0.0"/>
            <PeakCoord value="0.0"/>
            <EndCoord value="0.0"/>
          </VarRegionAxis>
        </Region>
      </VarRegionList>
      <!-- VarDataCount=3 -->
      <VarData index="0">
        <!-- ItemCount=4 -->
        <NumShorts value="0"/>
        <!-- VarRegionCount=2 -->
        <VarRegionIndex index="0" value="2"/>
        <VarRegionIndex index="1" value="3"/>
        <Item index="0" value="[14, 24]"/>
        <Item index="1" value="[30, 60]"/>
        <Item index="2" value="[65, 35]"/>
        <Item index="3" value="[65, 105]"/>
      </VarData>
      <VarData index="1">
        <!-- ItemCount=4 -->
        <NumShorts value="1"/>
        <!-- VarRegionCount=1 -->
        <VarRegionIndex index="0" value="4"/>
        <Item index="0" value="[-19]"/>
        <Item index="1" value="[88]"/>
        <Item index="2" value="[250]"/>
        <Item index="3" value="[999]"/>
      </VarData>
      <VarData index="2">
        <!-- ItemCount=1 -->
        <NumShorts value="0"/>
        <!-- VarRegionCount=5 -->
        <VarRegionIndex index="0" value="1"/>
        <VarRegionIndex index="1" value="2"/>
        <VarRegionIndex index="2" value="3"/>
        <VarRegionIndex index="3" value="9"/>
        <VarRegionIndex index="4" value="10"/>
        <Item index="0" value="[-2, 40, 30, -2, -3]"/>
      </VarData>
    </VarStore>
    <ValueRecord index="0">
      <ValueTag value="hcrn"/>
      <VarIdx value="65538"/>
    </ValueRecord>
    <ValueRecord index="1">
      <ValueTag value="hcrs"/>
      <VarIdx value="65539"/>
    </ValueRecord>
    <ValueRecord index="2">
      <ValueTag value="sbxo"/>
      <VarIdx value="65536"/>
    </ValueRecord>
    <ValueRecord index="3">
      <ValueTag value="spxo"/>
      <VarIdx value="65537"/>
    </ValueRecord>
    <ValueRecord index="4">
      <ValueTag value="stro"/>
      <VarIdx value="131072"/>
    </ValueRecord>
    <ValueRecord index="5">
      <ValueTag value="strs"/>
      <VarIdx value="2"/>
    </ValueRecord>
    <ValueRecord index="6">
      <ValueTag value="undo"/>
      <VarIdx value="1"/>
    </ValueRecord>
    <ValueRecord index="7">
      <ValueTag value="unds"/>
      <VarIdx value="3"/>
    </ValueRecord>
    <ValueRecord index="8">
      <ValueTag value="xhgt"/>
      <VarIdx value="0"/>
    </ValueRecord>
  </MVAR>

@arrowtype
Copy link
Owner

arrowtype commented Feb 5, 2021

This doesn’t work in Adobe Illustrator (2020):

recursive-underline-var-adobe.mp4

Different values aren’t rendered in Chrome or Safari, either.

I wish I knew of software that actually rendered these values as specified, but I don’t... I’ve asked about it on Twitter.

@arrowtype
Copy link
Owner

Okay, so here’s a very good blog post on support for custom values:
https://www.harbortype.com/the-state-of-underlines-and-strikethroughs/

I was pleasantly surprised to see that Firefox actually does support these values, both for underline & strikethrough. This shows pretty nicely how these values look, when actually rendered:

recursive-underline-var-firefox.mp4

(This is done with Wakamai Fondue Beta, with some CSS overrides for text-decoration: line-through; and text-decoration: underline; done in the Dev Tools Inspector.)

@arrowtype
Copy link
Owner

I do like how these look, both when they are working fully (Firefox) or even just partially (macOS Core Text). Next step: apply in the source UFOs, then test with full build procedure.

@arrowtype
Copy link
Owner

On Windows 10, custom sizing for strikeout and underline seem to be supported. However, it seems that custom positioning is not supported. Here is WordPad:

image

@arrowtype
Copy link
Owner

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
aug-2020 Issues open as of August 2020 [for planning purposes]
Projects
None yet
Development

No branches or pull requests

2 participants