diff --git a/frontend/src/app/main/ui/shapes/text/svg_text.cljs b/frontend/src/app/main/ui/shapes/text/svg_text.cljs index 75648bbfe..b2747ab37 100644 --- a/frontend/src/app/main/ui/shapes/text/svg_text.cljs +++ b/frontend/src/app/main/ui/shapes/text/svg_text.cljs @@ -51,8 +51,8 @@ [:> :g group-props (for [[index data] (d/enumerate position-data)] (let [props (-> #js {:x (mth/round (:x data)) - :y (mth/round (:y data)) - :dominantBaseline "ideographic" + :y (mth/round (- (:y data) (:height data))) + :alignmentBaseline "text-before-edge" :style (-> #js {:fontFamily (:font-family data) :fontSize (:font-size data) :fontWeight (:font-weight data) diff --git a/frontend/src/app/main/ui/workspace/shapes/text.cljs b/frontend/src/app/main/ui/workspace/shapes/text.cljs index 18bf8fc09..85e635161 100644 --- a/frontend/src/app/main/ui/workspace/shapes/text.cljs +++ b/frontend/src/app/main/ui/workspace/shapes/text.cljs @@ -27,6 +27,7 @@ [app.util.timers :as timers] [app.util.webapi :as wapi] [beicon.core :as rx] + [debug :refer [debug?]] [okulary.core :as l] [rumext.alpha :as mf])) @@ -224,4 +225,22 @@ (when show-svg-text? [:g.text-svg {:pointer-events "none"} - [:& svg/text-shape {:shape shape}]])]])) + [:& svg/text-shape {:shape shape}]]) + + (when (debug? :text-outline) + (for [data (:position-data shape)] + (let [{:keys [x y width height]} data] + [:* + ;; Text fragment bounding box + [:rect {:x x + :y (- y height) + :width width + :height height + :style {:fill "none" :stroke "red"}}] + + ;; Text baselineazo + [:line {:x1 (mth/round x) + :y1 (mth/round (- (:y data) (:height data))) + :x2 (mth/round (+ x width)) + :y2 (mth/round (- (:y data) (:height data))) + :style {:stroke "blue"}}]])))]])) diff --git a/frontend/src/debug.cljs b/frontend/src/debug.cljs index 867df6455..21b6881a0 100644 --- a/frontend/src/debug.cljs +++ b/frontend/src/debug.cljs @@ -46,6 +46,9 @@ ;; When active we can check in the browser the export values :show-export-metadata + + ;; Show text fragments outlines + :text-outline }) ;; These events are excluded when we activate the :events flag