Making sidebyside elements the same height?

[Peter Seibel]

I sometimes use <sidebyside> to juxtapose two <program> elements or two <listing>s. But unless the code is the same number of lines I get something that looks like this (Salem theme, fwiw):

Is there any easy way to get the two elements to be the same height?

--

BHS Bell Schedule app: https://gigamonkeys.com/misc/bhs/

[Andrew Scholer]

Making the captions/titles of figures/listings line up when placed in sidebysides has come up before.

I think there is consensus that it would be desirable if it could be done well without breaking anything else.

An almost solution is to make the correct children of sbspanels have flex-grow so they expand, and also be display: flex in the column axis with justify-content: space between. That can produce something like this:

Note the captions are aligned at their bottom. They really should be top aligned so all the "Figure XX.X" are lined up. (plus getting that CSS to only activate in the right situations would be non-trivial).

A proper solution would have to decompose the sbsrow into two rows, one for the content and one for the captions.

Andrew Scholer (he/him/his)

Computer Science Instructor

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

--
You received this message because you are subscribed to the Google Groups "PreTeXt support" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pretext-suppo...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/pretext-support/CAMiqbmnWDCCHZAOEOZry2qvR4Xx2w2qxNBz%2BwFEiStgQ1ATGRQ%40mail.gmail.com.

[Andrew Scholer]

Sorry, I forgot to start with:

Short answer: no.

Andrew Scholer (he/him/his)

Computer Science Instructor

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

[Sean Fitzpatrick]

You can put `valign="bottom"` as an attribute on the sidebyside to get the captions to align.

But there's no mechanism I'm aware of to stretch vertically to align both top and bottom.

To view this discussion visit https://groups.google.com/d/msgid/pretext-support/CACm44N-iPdQ2j1mp03hcbqG9MQimGeBZHHwkryU8vkBjPzbRSg%40mail.gmail.com.

[Alex Jordan]

> A proper solution would have to decompose the sbsrow into two rows, one for the content and one for the captions.

And then the issue switches to an accessibility issue. The keyboard navigation from the panel to its caption should be fairly direct, and not ask you to navigate across the first row just to get to the first panel's caption. So it's a head scratcher.

To view this discussion visit https://groups.google.com/d/msgid/pretext-support/CAH%2BNcPbuaPtW1O_pspehgS%2BdnvD5mF84P2C41bvQmHKqTtP1KA%40mail.gmail.com.

[Rob Beezer]

At one time, we had three rows for #sidebyside in HTML, since we put titles
*above* the main contents, in addition to captions below. That had its own
issues, and now we put stuff below, no matter what the panel might be. Vertical
alignment and Alex's accessibility remarks have been waiting for solutions.

Rob

On 7/16/25 16:04, Alex Jordan wrote:
> > A proper solution would have to decompose the sbsrow into two rows, one for
> the content and one for the captions.
>
> And then the issue switches to an accessibility issue. The keyboard navigation
> from the panel to its caption should be fairly direct, and not ask you to
> navigate across the first row just to get to the first panel's caption. So it's
> a head scratcher.
>
>
> On Wed, Jul 16, 2025 at 3:07 PM Sean Fitzpatrick <dsfitz...@gmail.com
> <mailto:dsfitz...@gmail.com>> wrote:
>
> You can put `valign="bottom"` as an attribute on the sidebyside to get the
> captions to align.
> But there's no mechanism I'm aware of to stretch vertically to align both
> top and bottom.
>
> On Wed, Jul 16, 2025, 2:11 p.m. Andrew Scholer <andrew....@chemeketa.edu
> <mailto:andrew....@chemeketa.edu>> wrote:
>
> Sorry, I forgot to start with:
>
> Short answer: no.
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor
> Chemeketa Community College
> 503.589.7649

> computerscience.chemeketa.edu/people/andrew-scholer/ <http://

> computerscience.chemeketa.edu/people/andrew-scholer/>
>
>
> On Wed, Jul 16, 2025 at 1:10 PM Andrew Scholer
> <andrew....@chemeketa.edu <mailto:andrew....@chemeketa.edu>> wrote:
>
> Making the captions/titles of figures/listings line up when placed
> in sidebysides has come up before.
>
> I think there is consensus that it would be desirable if it could be
> done well without breaking anything else.
>
> An almost solution is to make the correct children of sbspanels have
> flex-grow so they expand, and also be display: flex in the column
> axis with justify-content: space between. That can produce something
> like this:

> image.png
>
> Note the captions are aligned at their bottom. They really should be
> top aligned so all the "Figure XX.X" are lined up. (plus getting
> that CSS to only activate in the right situations would be non-trivial).
>
> A proper solution would have to decompose the sbsrow into two rows,
> one for the content and one for the captions.
>
> Andrew Scholer (he/him/his)
> Computer Science Instructor
> Chemeketa Community College
> 503.589.7649

> computerscience.chemeketa.edu/people/andrew-scholer/ <http://

> computerscience.chemeketa.edu/people/andrew-scholer/>
>
>
> On Wed, Jul 16, 2025 at 12:51 PM Peter Seibel
> <peter...@berkeley.net <mailto:peter...@berkeley.net>> wrote:
>
> I sometimes use <sidebyside> to juxtapose two <program> elements
> or two <listing>s. But unless the code is the same number of
> lines I get something that looks like this (Salem theme, fwiw):
>

> image.png
> Is there any easy way to get the two elements to be the same height?
>
> --
> BHS Bell Schedule app: https://gigamonkeys.com/misc/bhs/
> <https://gigamonkeys.com/misc/bhs/>
>
>
> --
> You received this message because you are subscribed to the
> Google Groups "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from
> it, send an email to pretext-

> support+u...@googlegroups.com <mailto:pretext-
> support+u...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/
> pretext-support/

> CAMiqbmnWDCCHZAOEOZry2qvR4Xx2w2qxNBz%2BwFEiStgQ1ATGRQ%40mail.gmail.com <https://groups.google.com/d/msgid/pretext-support/CAMiqbmnWDCCHZAOEOZry2qvR4Xx2w2qxNBz%2BwFEiStgQ1ATGRQ%40mail.gmail.com?utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google
> Groups "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it, send
> an email to pretext-suppo...@googlegroups.com

> <mailto:pretext-suppo...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/pretext-

> support/CACm44N-
> iPdQ2j1mp03hcbqG9MQimGeBZHHwkryU8vkBjPzbRSg%40mail.gmail.com <https://
> groups.google.com/d/msgid/pretext-support/CACm44N-
> iPdQ2j1mp03hcbqG9MQimGeBZHHwkryU8vkBjPzbRSg%40mail.gmail.com?
> utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it, send an

> email to pretext-suppo...@googlegroups.com <mailto:pretext-
> support+u...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/pretext-
> support/

> CAH%2BNcPbuaPtW1O_pspehgS%2BdnvD5mF84P2C41bvQmHKqTtP1KA%40mail.gmail.com
> <https://groups.google.com/d/msgid/pretext-support/
> CAH%2BNcPbuaPtW1O_pspehgS%2BdnvD5mF84P2C41bvQmHKqTtP1KA%40mail.gmail.com?
> utm_medium=email&utm_source=footer>.

>
> --
> You received this message because you are subscribed to the Google Groups
> "PreTeXt support" group.
> To unsubscribe from this group and stop receiving emails from it, send an email

> to pretext-suppo...@googlegroups.com <mailto:pretext-
> support+u...@googlegroups.com>.

> To view this discussion visit https://groups.google.com/d/msgid/pretext-support/

> CA%2BR-jrctdWpi_LSHqg8pcCM_ga1-vraZNfu%3DgsPsc-b8Xm573Q%40mail.gmail.com
> <https://groups.google.com/d/msgid/pretext-support/CA%2BR-
> jrctdWpi_LSHqg8pcCM_ga1-vraZNfu%3DgsPsc-b8Xm573Q%40mail.gmail.com?
> utm_medium=email&utm_source=footer>.

[Jeremy Sylvestre]

There is a related issue that if you have a sidebyside with @valign set to middle, captions are taken into account in determining the vertical middle of that panel, so it doesn't really look like the items are lined up by their vertical centres. The misalignment is even more apparent visually when some captions take up more lines (hence are "taller") than others, or when some panels contain objects that don't have captions.

Here is one possible solution for both issues: vertically align the contents of each div.sbsrow by javascript on page load/resize instead of via css.

Start out with css setting every sbsrow to be vertically aligned at top. Then, for each sbsrow:

1) Determine the panel in the sbsrow with the tallest content, excluding captions if present.

2) For every other panel, if alignment is "middle" or "bottom" then calculate the necessary margin-top to align the middle/bottom of that panel's content with the middle/bottom of the tallest content. (Captions excluded in these calculations.)

3) If alignment is "middle" and panel has a caption, additionally calculate the necessary margin-top for the caption to line it up with the caption of the tallest-content panel (or where that caption would be if the tallest-content panel doesn't have a caption).

However, needs more thought on what to do for sbsrows that contain stacks...

[Andrew Scholer]

Thought about this one while sitting on a plane yesterday...

I think there is a CSS-only approach that will work:

https://jsfiddle.net/ascholerChemeketa/4nbxjzc7/

This mockup uses HTML that is structurally the same as what is currently produced by pretext. The CSS could be simplified with some additional classes inserted in the HTML build, but should be doable without any HTML changes.

It maintains natural reading order (figure -> caption -> figure -> caption). Tip: use F7 in chrome to enter "cursor navigation" mode. Then you can click somewhere with the pointer to set the cursor and then use keyboard navigation to see the reading order of the document.

We may be straying into -dev territory. I'm going to suggest that if anyone wants to debate possible options we move there?

Andrew Scholer (he/him/his)

Computer Science Instructor

Chemeketa Community College

503.589.7649 

computerscience.chemeketa.edu/people/andrew-scholer/

To unsubscribe from this group and stop receiving emails from it, send an email to pretext-suppo...@googlegroups.com.
To view this discussion visit https://groups.google.com/d/msgid/pretext-support/6a338f3f-419b-422f-ad13-b368cd906837n%40googlegroups.com.