Penpot/penpot
0
Fork 0
mirror of https://github.com/penpot/penpot.git synced 2025-01-10 08:50:57 -05:00
Code Issues Activity

Merge pull request #2808 from penpot/superalex-fix-font-vertical-metrics

Browse source 
🐛 Fix font vertical metrics
This commit is contained in:
Aitor 2023-01-24 14:26:14 +01:00 committed by GitHub
commit 7ac6f49c08
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23
7 changed files with 99 additions and 17 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

5
CHANGES.md
View file

@ -18,6 +18,7 @@
- Dynamic alignment only in sight [Taiga #3537](https://tree.taiga.io/project/penpot/us/3537)
- Improve naming of layers [Taiga #4036](https://tree.taiga.io/project/penpot/us/4036)
- Add zoom lense [Taiga #4691](https://tree.taiga.io/project/penpot/us/4691)
- Detect potential problems with custom font vertical metrics [Taiga #4697](https://tree.taiga.io/project/penpot/us/4697)
### :bug: Bugs fixed
@ -54,6 +55,7 @@
- Fix undo ungroup (shift+g) scrambles positions [Taiga #4674](https://tree.taiga.io/project/penpot/issue/4674)
- Fix justified text is stretched [Github #2539](https://github.com/penpot/penpot/issues/2539)
- Fix mousewheel on viewer inspector [Taiga #4221](https://tree.taiga.io/project/penpot/issue/4221)
<<<<<<< HEAD
- Fix path edition activated on boards [Taiga #4105](https://tree.taiga.io/project/penpot/issue/4105)
- Fix hidden layers inside groups become visible after the group visibility is changed[Taiga #4710](https://tree.taiga.io/project/penpot/issue/4710)
- Fix format of HSLA color on viewer [Taiga #4393](https://tree.taiga.io/project/penpot/issue/4393)
@ -62,6 +64,9 @@
### :heart: Community contributions by (Thank you!)
- To @iprithvitharun: let's make UX Writing contributions in Open Source a trend!
=======
- Fix text in custom font is not at the expected position at export [Taiga #4394](https://tree.taiga.io/project/penpot/issue/4394)
>>>>>>> 1a9c62848 (:bug: Fix font vertical metrics)
## 1.16.2-beta

3
common/src/app/common/media.cljc
View file

@ -9,7 +9,8 @@
[clojure.spec.alpha :as s]
[cuerdas.core :as str]))
(def valid-font-types #{"font/ttf" "font/woff", "application/font-woff", "font/otf"})
;; We have added ".ttf" as string to solve a problem with chrome input selector
(def valid-font-types #{"font/ttf", ".ttf", "font/woff", "application/font-woff", "font/otf"})
(def valid-image-types #{"image/jpeg", "image/png", "image/webp", "image/gif", "image/svg+xml"})
(def str-image-types (str/join "," valid-image-types))
(def str-font-types (str/join "," valid-font-types))

35
frontend/resources/styles/main/partials/dashboard-fonts.scss
View file

@ -140,6 +140,12 @@
margin-left: 10px;
justify-content: center;
align-items: center;
&.failure {
margin-right: 10px;
svg {
fill: $color-warning;
}
}
svg {
width: 16px;
height: 16px;
@ -171,7 +177,6 @@
.dashboard-fonts-hero {
font-size: $fs14;
padding: $size-6;
background-color: $color-white;
margin-top: $size-6;
@ -179,17 +184,29 @@
justify-content: space-between;
.banner {
background-color: unset;
display: flex;
background-color: $color-info-lighter;
display: grid;
grid-template-columns: 40px 1fr;
&:not(:last-child) {
margin-bottom: 10px;
}
.icon {
display: flex;
align-items: center;
padding-left: 0px;
padding-right: 10px;
align-items: start;
justify-content: center;
padding-top: 10px;
background-color: $color-info;
svg {
fill: $color-info;
fill: $color-white;
}
}
.content {
margin: 10px;
}
&.warning {
background-color: $color-warning-lighter;
.icon {
background-color: $color-warning;
}
}
}

38
frontend/src/app/main/data/fonts.cljs
View file

@ -84,16 +84,44 @@
map with temporal ID's associated to each font entry."
[blobs team-id]
(letfn [(prepare [{:keys [font type name data] :as params}]
(let [family (or (.getEnglishName ^js font "preferredFamily")
(.getEnglishName ^js font "fontFamily"))
variant (or (.getEnglishName ^js font "preferredSubfamily")
(.getEnglishName ^js font "fontSubfamily"))]
(let [family (or (.getEnglishName ^js font "preferredFamily")
(.getEnglishName ^js font "fontFamily"))
variant (or (.getEnglishName ^js font "preferredSubfamily")
(.getEnglishName ^js font "fontSubfamily"))
;; Vertical metrics determine the baseline in a text and the space between lines of text.
;; For historical reasons, there are three pairs of ascender/descender values, known as hhea, OS/2 and uSWin metrics.
;; Depending on the font, operating system and application a different set will be used to render text on the screen.
;; On Mac, Safari and Chrome use the hhea values to render text. Firefox will respect the useTypoMetrics setting and will use the OS/2 if it is set.
;; If the useTypoMetrics is not set, Firefox will also use metrics from the hhea table.
;; On Windows, all browsers use the usWin metrics, but respect the useTypoMetrics setting and if set will use the OS/2 values.
hhea-ascender (abs (-> font .-tables .-hhea .-ascender))
hhea-descender (abs (-> font .-tables .-hhea .-descender))
win-ascent (abs (-> font .-tables .-os2 .-usWinAscent))
win-descent (abs (-> font .-tables .-os2 .-usWinDescent))
os2-ascent (abs (-> font .-tables .-os2 .-sTypoAscender))
os2-descent (abs (-> font .-tables .-os2 .-sTypoDescender))
;; useTypoMetrics can be read from the 7th bit
f-selection (-> (-> font .-tables .-os2 .-fsSelection)
(bit-test 7))
height-warning? (or (not= hhea-ascender win-ascent)
(not= hhea-descender win-descent)
(and f-selection (or
(not= hhea-ascender os2-ascent)
(not= hhea-descender os2-descent))))]
{:content {:data (js/Uint8Array. data)
:name name
:type type}
:font-family (or family "")
:font-weight (cm/parse-font-weight variant)
:font-style (cm/parse-font-style variant)}))
:font-style (cm/parse-font-style variant)
:height-warning? height-warning?}))
(join [res {:keys [content] :as font}]
(let [key-fn (juxt :font-family :font-weight :font-style)

15
frontend/src/app/main/ui/dashboard/fonts.cljs
View file

@ -120,7 +120,9 @@
on-dismiss-all
(fn [items]
(run! on-delete items))]
(run! on-delete items))
problematic-fonts? (some :height-warning? (vals @fonts))]
[:div.dashboard-fonts-upload
[:div.dashboard-fonts-hero
@ -132,7 +134,14 @@
[:div.icon i/msg-info]
[:div.content
[:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.hero-text2"}]]]]
:label "dashboard.fonts.hero-text2"}]]]
(when problematic-fonts?
[:div.banner.warning
[:div.icon i/msg-warning]
[:div.content
[:& i18n/tr-html {:tag-name "span"
:label "dashboard.fonts.warning-text"}]]])]
[:button.btn-primary
{:on-click on-click
@ -171,6 +180,8 @@
[:span item])]
[:div.table-field.options
(when (:height-warning? item)
[:span.icon.failure i/msg-warning])
[:button.btn-primary.upload-button
{:on-click #(on-upload item)
:class (dom/classnames :disabled uploading?)

10
frontend/translations/en.po
View file

@ -418,6 +418,16 @@ msgstr ""
"Service](https://penpot.app/terms.html). You also might want to read about "
"[font licensing](https://www.typography.com/faq)."
#, markdown
msgid "dashboard.fonts.warning-text"
msgstr ""
"We have detected a possible problem in your fonts "
"related to vertical metrics for different operative systems. "
"In order to check it you can use font vertical metrics services "
"like [this one](https://vertical-metrics.netlify.app/). "
"In addition, we recommend using [Transfonter](https://transfonter.org/) "
"to generate webfonts and fix errors. "
#: src/app/main/ui/dashboard/fonts.cljs
msgid "dashboard.fonts.upload-all"
msgstr "Upload all"

10
frontend/translations/es.po
View file

@ -441,6 +441,16 @@ msgstr ""
"más sobre licencias tipográficas: [font "
"licensing](https://www.typography.com/faq)."
#, markdown
msgid "dashboard.fonts.warning-text"
msgstr ""
"Hemos detectado un posible problema en tus fuentes "
"relacionado con las métricas verticales en diferentes sistemas operativos. "
"Puedes comprobar la visualización de tu fuente utilizando servicios "
"[como este](https://vertical-metrics.netlify.app/). "
"Además, recomendamos usar [Transfonter](https://transfonter.org/) "
"para generar fuentes web y corregir posibles errores."
#: src/app/main/ui/dashboard/fonts.cljs
msgid "dashboard.fonts.upload-all"
msgstr "Cargar todas"