Open
Bug 1425143
Opened 6 years ago
Updated 1 year ago
Visualize fonts features/metrics for a specific node.
Categories
(DevTools :: Inspector, enhancement, P3)
Tracking
(Not tracked)
NEW
People
(Reporter: karlcow, Unassigned)
References
(Blocks 2 open bugs)
Details
(Whiteboard: [designer-tools])
This is not a priority for webcompat team. Just a nice too have feature, which could be cool for webdesigners, specifically with font geeks. Some Web compatibility issues are connected to designs which are really tight or adjusted to a specific font (often Roboto). The issue is more acute on Android where the differences in between Roboto and Clear Sans are important enough to break a layout. Sometimes it's hard to understand why this is breaking. There could be a way to visualize when using the inspector to show some of the font features inside a box. 1. Select an element 2. activate a button to show baseline, ascender, descender, etc. The goal is to visualize how the font fits in its environment. This article is a very good reference on how it would help understand what is happening. https://iamvdo.me/en/blog/css-font-metrics-line-height-and-vertical-align
Comment 1•6 years ago
|
||
Thanks Karl. I've been thinking about this recently and would really love to have this in the tool at some stage.
Blocks: 1280059
Severity: normal → enhancement
Component: Developer Tools: Inspector → Developer Tools: Font Inspector
Priority: -- → P3
Whiteboard: [designer-tools]
Updated•6 years ago
|
Product: Firefox → DevTools
Updated•6 years ago
|
Blocks: devtools-webcompat-team
Assignee | ||
Updated•3 years ago
|
Component: Inspector: Fonts → Inspector
Updated•2 years ago
|
Severity: normal → S3
You need to log in
before you can comment on or make changes to this bug.
Description
•