masakudamatsu / font-metrics Goto Github PK

This is an important feature, actually.

• It lets the user learn how the typical value of line-height such as 1.2 and 1.5 will be translated into the visually relevant parameter of the x-height to line-height ratio.

A subtask of #6

See https://reactjs.org/redirect-to-codepen/uncontrolled-components/input-type-file

A subtask of #6

Install

• Boilerplate React app
• Cypress for test-driven development

cf. Use the short-circuit evaluation so that the error message won't be shown before the user enters any value. See: https://www.evernote.com/l/AFPu_A_V5OFIBJDAJNg4ZKLxbshq0mOLfWM
https://www.evernote.com/l/AFMxkVlPI2VPTbv-PTG42R5uCOXIVspxiYA (the example from TestingJavaScript.com)

Based on Sonny Recio's article entitled "How to use HTML5 form validations with React", we need the following to validate each input field.

Step 1
Enclose all the input elements with the form element along with its noValidate attribute (to disable HTML5's own form validation for which we cannot style the error message)

<form className="form-inside-input"
          onSubmit={this.onSubmit}
          noValidate >
      {/* form inputs here */}
    </form>

And add the min attribute to the input elements

<input type="text"
           name=“xHeightBox"
           min="1"
           required />

Step 2
In the .changeHandler() function, access to event.target.validity.valid

• This property is true if the user input satisfies all the constraints.
  or to `event.target.validity.rangeUnderflow
• This property is true if the user input value goes below the minimum value
• See MDN on ValidityState.rangeUnderFlow for detail
  And store this boolean value as xHeightBox.valid (true if it's valid).

Step 3
Create a component of the error message

const ErrorValidationLabel = ({ errMsg }) => (
  <label htmlFor="" style={{ color: "red" }}>
    {errMsg}
  </label>
);

Step 4
If the constraint is not satisfied, show the error message

const renderValidationError = xHeightBox.valid ? (
    ""
  ) : (
    <ErrorValidationLabel errMsg={'X-height needs to be larger than or equal to 1.'} />
  );

For the time being, we only deal with critical ones

• Font size being zero
• X-height scale being zero
  because these two values are used as a denominator in the calculation of line-height.

Important for Google search result summary.

A subtask of #6

We separate this process into two:

• From FileList object to Font object
• From Font object to font metrics

This is because we can easily test the second process by directly (instead of via web) reading a font file with opentype.js

• See opentype.js readme on API

For the first process, see Font Inspector source code

Font files for testing are stored in /cypress/fixtures/ folder, because Cypress won't recognize files in other locations.

• See Cypress documentation on fixture.

Subtasks

• Input handling #9
• Processing #10
• Output handling #11
• Edge case handling #12

A subtask of #6

For testing, we use

• jest.fn() mock function from Jest
• the code for react-testing-library to simulate a file upload
• an adapted version of NewMessageForm.spec.js on https://learntdd.in/react/
• expect().toHaveBeenCalled from Jest

https://app.milanote.com/1IoUYR1GmV3Y1L/5-set-the-theme-colour

https://app.milanote.com/1Isc6L1DP4xGbK/typefaces

The font-size property value in React has to be either a number or a string that ends with px.

We have stored the font-size value as a string value without px at the end so that it will be shown in the font-size box, for issue #14.

Consequently, we use the Number() method to convert the string value into a number.

Why needed?

Without the default font-size, uploading a font file won't show any sample paragraphs because the font-size` is effectively zero.

• This is not an optimal user experience due to the obvious visual feedback to the user's action.

Without the default font-family, the user without a font file cannot tell what this webapp is about. Once they find it useful, they may visit us again with their own font file.

https://app.milanote.com/1IogHY1hDZQTf2/4-implement-the-ripple-effect

The implementation of Feature 2-2 (#15) has already executed this feature.

https://app.milanote.com/1In9781Mc5gR43/2-upload-a-font-file

Initially, we used the HTML canvas to render sample paragraphs. This has the following issues:

• We do not know how to write the test code for checking the content of the canvas element
• It seems difficult to change the rendering when the user chooses a x-height value.

Consequently, we instead use CSS Font Load API, to set the font property directly to a paragraph element.

[x-height in px] = (sxHeight/ unitsPerEm) * [font-size in px]

Consequently, we have
[font-size in px] = (unitsPerEm / sxHeight) * [x-height in px]

We keep the fractional values up to 4 decimal places.

• Even though fractional values in pixels will be converted into an integer (see StackOverFlow discussions), precise values should be used for a long chain of calculation.
• To round off factions to the 4 decimal places, use .toFixed(4) method. See MDN documentation on the .toFixed() method.

A sub-task of #6

It seems Cypress doesn't support this function yet, given that its GitHub issue on this matter isn't closed.

https://app.milanote.com/1In9lX1Mc5m76W/3-sample-paragraphs

This feature is useful for finding the reference x-height.

• e.g. Someone wants his/her website to look similar to Medium.com. Then he/she needs to find out the font-family and the font-size value, and our webapp converts these values into the x-height value.

A subtask of #6

Opentype.js handles the following file types (see the Feature section of Opentype.js readme)

• OTF
• TTF
• WOFF

Error message should be

Please upload an OpenType Font (.otf), TrueType Font (.ttf), or Web Open Font Format (.woff) file.