hb-append vs hbl-append and ht-append vs htl-append in pict

Question

Racket's pict, has several combinators for combining other pictures. These docs contain a nice table for how its *-append combinators work:

Most of these examples make sense. The first letter is v or h for vertical and horizontal respectively. The second letter is l, t, or r for vertical-left/center/right, or t c b, for horizontal-top/center/bottom.

However, this leaves out htl-append and hbl-append. Neither of them fit into this pattern. Additionally, they both seem to match hb-append on the table.

So, what is htl-append and hbl-append used for, and how does it differ from hb-append?

There's a comment in the source (`pict-lib/pict/private/main.rkt`): `htl-append` "align bottoms of ascents", `hbl-append` "aligns tops of descents (normal text alignments)" — Ben Greenman, Mar 30 '18 at 19:20
Uck, okay. That makes sense, although we should update the docs to reflect that. Care to answer the question? (Otherwise I'll type this up as an answer.) — Leif Andersen, Mar 30 '18 at 19:25

score 4 · Accepted Answer · answered Mar 31 '18 at 22:32

I wrote that example in the docs, so I guess this is sort of my fault and so I'll attempt to answer the question.

The example doesn't illustrate the difference very well because it's using shapes and not text.

Changing the example to use text + shapes shows that there is some differences between these functions:

#lang racket

(require pict)

(inset
 (cbl-superimpose
  (hb-append 10
             (frame (text "g" "Helvetica" 30))
             (rectangle 10 10 #:border-width 2))
  (hline 200 2))
 10)

(blank 1 30)

(inset
 (cbl-superimpose
  (hbl-append 10
              (frame (text "g" "Helvetica" 30))
              (rectangle 10 10 #:border-width 2))
  (hline 200 2))
 10)

(blank 1 30)

(inset
 (ctl-superimpose
  (ht-append 10
             (frame (text "i" "Helvetica" 30))
             (rectangle 10 10 #:border-width 2))
  (hline 200 2))
 10)

(blank 1 30)

(inset
 (ctl-superimpose
  (htl-append 10
              (frame (text "i" "Helvetica" 30))
              (rectangle 10 10 #:border-width 2))
  (hline 200 2))
 10)

If you run this example you'll get 4 pictures that show different cases. Depending on the letters, you get different alignments due to the ascenders/descenders. It would probably be more useful for the docs to show an example similar to this one with text.

If you want to mix pictures and text it often makes sense to use the l- variants to avoid an odd look where the picture sticks out:

#lang racket

(require pict)

(hb-append 10
           (text "hug" "Helvetica" 30)
           (rectangle 20 20 #:border-width 2)
           (text "hug" "Helvetica" 30))
(hbl-append 10
            (text "hug" "Helvetica" 30)
            (rectangle 20 20 #:border-width 2)
            (text "hug" "Helvetica" 30))

score 1 · Answer 2 · answered Oct 28 '19 at 16:14

1

The slideshow tutorial uses this picture to explain hbl-append and htl-append :

(With hb-append and ht-append, the frames around each pict would be aligned.)

answered Oct 28 '19 at 16:14

Ben Greenman

1,945
12
22

hb-append vs hbl-append and ht-append vs htl-append in pict

2 Answers2