This page is not created by, affiliated with, or supported by Slack Technologies, Inc.
- # announcements (35)
- # aws (20)
- # babashka (4)
- # beginners (88)
- # cider (9)
- # clara (1)
- # clj-kondo (6)
- # cljsrn (3)
- # clojure (107)
- # clojure-dev (7)
- # clojure-europe (99)
- # clojure-nl (3)
- # clojure-spec (9)
- # clojure-uk (2)
- # clojurescript (28)
- # core-async (53)
- # cursive (11)
- # datascript (1)
- # datomic (2)
- # emacs (20)
- # fulcro (3)
- # graalvm (4)
- # holy-lambda (18)
- # jobs (1)
- # kaocha (7)
- # leiningen (2)
- # lsp (25)
- # luminus (1)
- # membrane-term (52)
- # missionary (8)
- # nextjournal (19)
- # off-topic (16)
- # other-languages (3)
- # podcasts (2)
- # polylith (23)
- # re-frame (4)
- # reclojure (6)
- # remote-jobs (1)
- # rewrite-clj (36)
- # ring (1)
- # sci (10)
- # shadow-cljs (7)
- # spacemacs (5)
- # sql (20)
- # uncomplicate (1)
- # vscode (3)
- # xtdb (27)
I’m entertaining myself by learning how membrane positions fonts vs how plain old skia positions text.
Am I understanding correctly in that when skia is asked to draw text at
y is the position of the text’s baseline,
but membrane sees
y as the top of the text’s bounding box?
I'd like to have better support for text generally, but I also don't want to make too many half-baked versions
I was trying to clean up some of the askew-ness of the unicode glyphs… which led me to the rabbit hole of understanding how text is rendered.
I do want to improve it, but I also want to spend some time thinking about it to try and come up with a decent API
I’m just exploring and learning, I think I could commit font support almost as is and we could create separate issues for unicode support.
but I'd be happy to explain how things currently work and help come up with work arounds
Well… my current confusion is around finding the font’s baseline. The font metrics returned are all based off that. This isn’t a problem for skia, because the font is drawn on the baseline, but I’m not sure how to find the baseline with membrane.
Ah… ok, I just have to negate the ascent and I’ve got the baseline! Hmm… a picture is worth many words!
Aha! @smith.adriane, I think I might have found what was throwing me off. Label text, when converted https://github.com/phronmophobic/membrane/blob/f8fe28a7b262fe8ca92b6f101534d89c60879402/csource/skia.cpp#L219.
Which seems like a bug to me, but maybe intentional for some reason I don’t yet understand.
The basic reasoning at the time was that every other drawing primitive had its origin in the top left corner.
I have some different ideas for what a better text primitive might look like, but that's what label does
I wouldn't update label's implementation at this point, but I do intend on adding newer text primitives that give better layout options
I'm away from keyboard, but I guess I would just draw rectangles for ascent, descent, and leading on top of the text
That’s my unadjusted version. But if I compensate for the descent gap. Things look better.
Anyway, without having used membrane much, I don’t know if the gap is helpful in the general. In the specific here, it was confusing for me, but if you want to keep the behavior as is, a note in the docs would do the trick.
yea, changing it would be more likely to break existing code than fix it, so I’m unlikely to change it, but adding newer, better text primitives and deprecating label is definitely on the cards
Hey at least it prints labels, right? Poor label, you’re going to give it a complex! But yeah, I’m good now. I understand how it works and can work with it.
not sure if you've seen https://vimeo.com/66085662, but being able to quickly throw together adhoc visual tools is one of the goals I'm working towards
I really enjoy doing a REPL eval and immediately seeing the effect of my change. So very cool. Have not seen that video yet, thanks, will put on my watch list. I’m happy to tweak docs here and there, as I learn this and that, if that would be helpful.
if you're feeling extra ambitious, I would love your take on some of the design notes: • https://blog.phronemophobic.com/what-is-a-user-interface.html • https://blog.phronemophobic.com/ui-model.html • https://blog.phronemophobic.com/reusable-ui-components.html