From d3e11433bfb8095157c13748515df36273fc278e Mon Sep 17 00:00:00 2001 From: Alejandro Alonso Date: Thu, 19 Jan 2023 14:04:46 +0100 Subject: [PATCH] :bug: Fix font vertical metrics --- CHANGES.md | 5 +++ common/src/app/common/media.cljc | 3 +- .../styles/main/partials/dashboard-fonts.scss | 35 ++++++++++++----- frontend/src/app/main/data/fonts.cljs | 38 ++++++++++++++++--- frontend/src/app/main/ui/dashboard/fonts.cljs | 15 +++++++- frontend/translations/en.po | 10 +++++ frontend/translations/es.po | 10 +++++ 7 files changed, 99 insertions(+), 17 deletions(-) diff --git a/CHANGES.md b/CHANGES.md index e46292bc8..99afe22d9 100644 --- a/CHANGES.md +++ b/CHANGES.md @@ -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 diff --git a/common/src/app/common/media.cljc b/common/src/app/common/media.cljc index 3709168c2..26574bd6a 100644 --- a/common/src/app/common/media.cljc +++ b/common/src/app/common/media.cljc @@ -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)) diff --git a/frontend/resources/styles/main/partials/dashboard-fonts.scss b/frontend/resources/styles/main/partials/dashboard-fonts.scss index 9b186fdc5..70c62085e 100644 --- a/frontend/resources/styles/main/partials/dashboard-fonts.scss +++ b/frontend/resources/styles/main/partials/dashboard-fonts.scss @@ -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; } } } diff --git a/frontend/src/app/main/data/fonts.cljs b/frontend/src/app/main/data/fonts.cljs index b9ac00443..dc7cf3784 100644 --- a/frontend/src/app/main/data/fonts.cljs +++ b/frontend/src/app/main/data/fonts.cljs @@ -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) diff --git a/frontend/src/app/main/ui/dashboard/fonts.cljs b/frontend/src/app/main/ui/dashboard/fonts.cljs index ffc657de6..cb786df45 100644 --- a/frontend/src/app/main/ui/dashboard/fonts.cljs +++ b/frontend/src/app/main/ui/dashboard/fonts.cljs @@ -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?) diff --git a/frontend/translations/en.po b/frontend/translations/en.po index 68035ff76..4349e2fc8 100644 --- a/frontend/translations/en.po +++ b/frontend/translations/en.po @@ -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" diff --git a/frontend/translations/es.po b/frontend/translations/es.po index 37e58d679..299c97681 100644 --- a/frontend/translations/es.po +++ b/frontend/translations/es.po @@ -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"