line height

[af209]

i was try to change that in the master (i was try change typo ascender, typo descender, typo line gap, win ascent , win descent, ascender, descender, line gap but the result is nothing for to change that happen), i was use fontgautlet & fontcreator web testing but the result are nothing to change. how to solve this?

[Erwin Denissen]

Within the Web Font Test page we use javascript to keep font size in sync with line-height.

Code: Select all

function UpdateFontSize(sender) {
  id = document.getElementById("preview");
  id.style.fontSize = sender.value + "pt";
  id.style.lineHeight = sender.value + "pt";

  id = document.getElementById("mi-preview");
  id.style.fontSize = sender.value + "pt";
  id.style.lineHeight = sender.value + "pt";
}

I am not sure why we decided to enforce this, so maybe we just have to remove that.

[af209]

hi, i think you've got the project right

but i think, isn't about the javascript too in software too. but just make a space of the line height, how to solve this? help me please

[Hafonton]

This is actually helpful to have the line height set to 1.0 as default, but I would suggest adding a drop-down or number input to choose a different line height. I can help with that if its needed. Let me know

[Hafonton]

Hey Erwin,
I attached new WOFFTest Files (all files are updated, css+js+html)

Before:

1.JPG (89.25 KiB) Viewed 4974 times

After (New: Line Height Input)

after.JPG (101.78 KiB) Viewed 4974 times

Let me know if you have any questions or suggestions

[Bhikkhu Pesala]

Odana WOFF Test.png (70.62 KiB) Viewed 4968 times

Excellent.
I wonder if there could be an easier way to select Background and Foreground colours? Maybe a drop list with half a dozen presets as well as the option to enter Hex values.

[Hafonton]

Sure!

Please note that someone from FC Team should buy a license for "jscolor" in order to use it commercially. it cost $20.
You can purchase a license here:
https://jscolor.com/download/


Working Example:

color picker.gif (4.09 MiB) Viewed 4959 times

new html+js files added in this zip file.

[Bhikkhu Pesala]

That is perfect.

WOFF Test Colours.png (103.71 KiB) Viewed 4951 times

[Erwin Denissen]

The color selector looks nice, but I prefer to keep the test page as basic as possible. The more dependencies, the more we need to update it in the future.

From what I understand it is better to avoid the em suffix, see:
https://developer.mozilla.org/en-US/doc ... ine-height

It would also be nice to include "normal" as line-height option. That way the OP can test his own font metrics.

[Hafonton]

The color selector looks nice, but I prefer to keep the test page as basic as possible. The more dependencies, the more we need to update it in the future.

From what I understand it is better to avoid the em suffix, see:
https://developer.mozilla.org/en-US/doc ... ine-height

It would also be nice to include "normal" as line-height option. That way the OP can test his own font metrics.

line-height: 3em behave exactly the same as line-height: 3. I don't see any difference. I don't mind removing the 'em' text, but it would sill behave the same way
There is no "normal" line height in CSS, it needs to be a defined number. The default of 1 is good for font making purposes

Are you sure about the color picker? it looks so much fun.

[Hafonton]

I do think however that it would be better to have colorjs.min.js file by itself, and not in our script file.
It needs to be included as a dependency (different file).

[Erwin Denissen]

There is no "normal" line height in CSS, it needs to be a defined number. The default of 1 is good for font making purposes

I am referring to a draft, so this might not be official and can change in the future, but still Firefox and Edge accept normal right now.

See:
Line Spacing: the line-height property

and
Calculating the Logical Height Contributions (“Layout Bounds”) of Inline Boxes

If line-height is set to normal, both Typo Ascender and Typo Descender are used, as mentioned here:
Ascent and Descent Metrics

Note: It is recommended that implementations that use OpenType or TrueType fonts use the metrics sTypoAscender and sTypoDescender from the font’s OS/2 table (after scaling to the current element’s font size) to find the ascent metric and descent metric for CSS layout. In the absence of these metrics, the "Ascent" and "Descent" metrics from the HHEA table should be used.

[Hafonton]

Ok, I can add 'normal' but I still think 1.0 should be the default

attached:

• removed 'em' (it behaves the same way anyway)

• added 'normal'

[Erwin Denissen]

Are you sure about the color picker? it looks so much fun.

Yes, I prefer to have zero dependencies. Maybe a combobox with several predefined colors will do.

[Erwin Denissen]

We have just released an update that comes with the line height option in the Web Font test page. Unfortunately the initial value is 1, while the selection indicates it is 1.2. That will be fixed with a future update.