ol cols="2" of images

[Steven Clontz]

An author has four images with the same aspect ratio in an ordered list, but they are being rendered in different sizes due to margins:

Is there a fix or more appropriate way to express this?

<activity xml:id="activity-lf3-point-slope">
          <statement>
          <p> A line contains the point <m>(-3,-2)</m> and has slope <m>\frac{1}{5} </m>. Which of the following is the graph of that line?
          </p>
          <ol marker= "A." cols="2">  
            <li> <image>
              <sageplot>
                f(x) = (-.2*(x+3)-2)
                p=point({(-3,-2),(2,-3)},pointsize=50,color='blue')
                p+=plot(f, (x, -8, 8), ymin=-8, ymax=8, color='blue', thickness=3, gridlines=[[-8,-7,..,8],[-8,-7,..,8]])                
                p
              </sageplot>
            </image> </li>
            <li> <image>
              <sageplot>
                f(x) = (.2*(x+3)-2)
                p=point({(-3,-2),(2,-1)},pointsize=50,color='blue')
                p+=plot(f, (x, -8, 8), ymin=-8, ymax=8, color='blue', thickness=3, gridlines=[[-8,-7,..,8],[-8,-7,..,8]])                
                p
              </sageplot>
            </image> </li>
            <li> <image>
              <sageplot>
                f(x) = (5*(x+3)-2)
                p=point({(-3,-2),(-2,3)},pointsize=50,color='blue')
                p+=plot(f, (x, -8, 8), ymin=-8, ymax=8, color='blue', thickness=3, gridlines=[[-8,-7,..,8],[-8,-7,..,8]])                
                p
              </sageplot>
            </image> </li>
            <li> <image>
              <sageplot>
                f(x) = (-5*(x+3)-2)
                p=point({(-3,-2),(-2,-7)},pointsize=50,color='blue')
                p+=plot(f, (x, -8, 8), ymin=-8, ymax=8, color='blue', thickness=3, gridlines=[[-8,-7,..,8],[-8,-7,..,8]])                
                p
              </sageplot>
            </image> </li>
          </ol>
        </statement>
    </activity>

[Steven Clontz]

Context: https://github.com/TeamBasedInquiryLearning/precalculus/blob/main/source/03-LF/03.ptx

https://github.com/TeamBasedInquiryLearning/precalculus/issues/185

[Rob Beezer]

The author could try a "sbsgroup" with each image in a figure, or additionally,
place this whole "sbsgroup" in a figure). The figures will cause numbering that
would allow reference to each (but maybe not the same numbering as for a list).

On 5/7/24 12:36, Steven Clontz wrote:
> Context: https://github.com/TeamBasedInquiryLearning/precalculus/blob/main/source/03-LF/03.ptx
>
> https://github.com/TeamBasedInquiryLearning/precalculus/issues/185
>
> On Tuesday, May 7, 2024 at 2:34:59 PM UTC-5 Steven Clontz wrote:
>
> An author has four images with the same aspect ratio in an ordered list, but
> they are being rendered in different sizes due to margins:
>

> --
> 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 on the web visit
> https://groups.google.com/d/msgid/pretext-support/4fa8e078-c577-4996-9ae8-65a2a10c17cfn%40googlegroups.com <https://groups.google.com/d/msgid/pretext-support/4fa8e078-c577-4996-9ae8-65a2a10c17cfn%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Alex Jordan]

Sorry that this is not the point of the post. But would the author like a non-multiple choice version of this question? If using WeBWorK, there is a graphing tool for a Cartesian grid where you construct a line (or a parabola, or a circle, shaded region, etc.)

--

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 on the web visit https://groups.google.com/d/msgid/pretext-support/3fb1c744-f2d2-464d-900c-ccc8c020f7a9n%40googlegroups.com.

[Steven Clontz]

Thanks for the ideas. The purpose of this activity is an in-class multiple choice question to be engaged with by a group of students, so WeBWorK isn't the appropriate choice. 

I can look into sbsgroup or recreating the figures as a single image, but it still seems unintentional that the width of each column is unequal here.

You received this message because you are subscribed to a topic in the Google Groups "PreTeXt support" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/pretext-support/rGAmEbUfF0E/unsubscribe.
To unsubscribe from this group and all its topics, send an email to pretext-suppo...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/CA%2BR-jrfy-xqXn4%3Dz-8dprzEk7p56kS_tW9M4cqLxJvNZjXP0XA%40mail.gmail.com.

[Sean Fitzpatrick]

I think I've done this with sbsgroup. I don't recall if I used figure (with empty captions) for the labels, or just manually added labels. 

But if you're doing this in-class then you probably want slides?

I think there were some recent improvements, but I've found that the slide conversion ignores any image attributes (width, margin, etc). Sidebyside works, but panel widths don't. To get a gap between sidebyside panels I usually added a third panel whose contents were something like <m>\phantom{ABCD}</m>

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/CAOWT6Tht0mNngjxtaJy5_6mzNzFM1SMR3byw%3DfcG4G2PDJfjcQ%40mail.gmail.com.

[Drew Lewis]

I tried to share this yesterday, but my message seems to have been deleted.

We do have an example of how to do this with sbsgroup elsewhere in our book, see Activity 4.6.16. (source). But I agree with Steven that I think this author's code is very reasonable, and PreTeXt should be displaying it properly.

Thanks,
Drew

[David W. Farmer]

I'm not sure a live version was shared, in order to see what is up with
the PreTeXt.

And, we have to check that adjusting margins in this case does not
mess up some more common case (which presumably is why that CSS
is in place).

Regards,

David

On Wed, 8 May 2024, Drew Lewis wrote:

> I tried to share this yesterday, but my message seems to have been deleted.
> We do have an example of how to do this with sbsgroup elsewhere in our book, see Activity 4.6.16. (source). But I agree with Steven that I think this
> author's code is very reasonable, and PreTeXt should be displaying it properly.
>
> Thanks,
> Drew
>
> On Wednesday, May 8, 2024 at 6:01:13 AM UTC-7 dsfitz...@gmail.com wrote:
> I think I've done this with sbsgroup. I don't recall if I used figure (with empty captions) for the labels, or just manually added labels. 
> But if you're doing this in-class then you probably want slides?
>
> I think there were some recent improvements, but I've found that the slide conversion ignores any image attributes (width, margin, etc).
> Sidebyside works, but panel widths don't. To get a gap between sidebyside panels I usually added a third panel whose contents were something like
> <m>\phantom{ABCD}</m>
>
> On Wed, May 8, 2024, 6:01 a.m. Steven Clontz <steven...@gmail.com> wrote:
> Thanks for the ideas. The purpose of this activity is an in-class multiple choice question to be engaged with by a group of students,
> so WeBWorK isn't the appropriate choice. 
> I can look into sbsgroup or recreating the figures as a single image, but it still seems unintentional that the width of each column is
> unequal here.
>
> On Tue, May 7, 2024, 3:54 PM Alex Jordan <jordanc...@gmail.com> wrote:
> Sorry that this is not the point of the post. But would the author like a non-multiple choice version of this question? If
> using WeBWorK, there is a graphing tool for a Cartesian grid where you construct a line (or a parabola, or a circle, shaded
> region, etc.)
>
>
>
> On Tue, May 7, 2024 at 12:35 PM Steven Clontz <steven...@gmail.com> wrote:
> An author has four images with the same aspect ratio in an ordered list, but they are being rendered in different sizes
> due to margins:

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/6c9bc210-6db4-4099-b380-2cffc31d132an%40googlegroups.com.
>
>

[Drew Lewis]

>I'm not sure a live version was shared, in order to see what is up with the PreTeXt.

Steven's second post had a link to our source, here it is again (activity begins at line 302): https://github.com/TeamBasedInquiryLearning/precalculus/blob/main/source/03-LF/03.ptx#L302-L350

And the HTML output is at  https://teambasedinquirylearning.github.io/precalculus/2024/LF3.html#activity-lf3-point-slope

Thanks,
Drew

[David W. Farmer]

In pretext_add_on.css, line 2055, is set a padding-right.

This seems to be needed to have the markers in the right column
be visible.

*In this particular case* changing the padding-right to
margin-right makes it look better.

But in more common cases, where there are words in the
items, that makes more words appear on each line within
the item. In a couple cases I looked at, I thought that
was worse, with maybe not enough space between the columns
(but, maybe it was not so bad and I was just reacting
to the change?).

So, an immediate solution is not obvious to me.

> To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/7ed14326-bbd5-44b0-bae0-35d5e7f162ben%40googlegroups.com.
>
>

[Rob Beezer]

Some thoughts overnight. "sidebyside" and "sbsgroup" are two of our biggest
concessions to letting authors control layout (somewhat). So I really think
that "sbsgroup" is the right tool for the job here, as it will have the most
attention to issues like unbalanced margins, and will perform better in other
formats, such as braille. Maybe the numbers from "figure" are subpar, but that
would be the only pro for a 2-column list.

cols="2" is layout as well - it shouldn't convey any meaning. For example, in a
conversion to braille it'll just be ignored. A hint really. Whereas we do try
to convey the logical layout of a "sidebyside" in braille via transcriber notes.

Everything about images in list items and a two-column list is supported. And
we should investigate the observation here. But as David suggests, we shouldn't
let the tail wag the dog. If you want good layout, "sbsgroup" trumps
cols="2", unless I have missed something here.

Rob

[Andrew Scholer]

I would say that is a CSS bug. Padding-right here forces the left column to always have a smaller width to layout its content. Margin-right produces two items with the same width:

Same is true of text based 2-col lists - currently the left column is smaller than the right one. Margin-right makes them the same size.

PR submitted: https://github.com/PreTeXtBook/pretext/pull/2160

Related note - I notice that in the Pretext docs there is a note in the PreTeXt docs: 

"When one order, or the other, becomes workable in both variants, maybe we will be consistent in presentation. (Note that with just one row, it makes no difference.)"Lists 6  can have multiple columns. With HTML items displayed in row-major order (horizontally first) and 7  with LATEX items are displayed in column-major order (vertically first)."

CSS columns would produce column-major order:
https://developer.mozilla.org/en-US/docs/Web/CSS/columns

Have they ever been tested as a replacement for the homegrown multi-column code? 

Andrew Scholer (he/him/his)

Computer Science Instructor/Program Chair

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 on the web visit https://groups.google.com/d/msgid/pretext-support/MTAwMDA0Ny5iZWV6ZXI.1715183749%40quikprotect.

[David W. Farmer]

But is there still enough space between the words in the
left column and words in the right column?

On Wed, 8 May 2024, Andrew Scholer wrote:

> I would say that is a CSS bug. Padding-right here forces the left column to always have a smaller width to layout its content. Margin-right produces
> two items with the same width:
>

> https://groups.google.com/d/msgid/pretext-support/CACm44N9kgxKARWic7n1nyFWw1yYBGFTD4GNOpfH__R2K01%2Bw8A%40mail.gmail.com.
>
>

[Andrew Scholer]

Here is a text-heavy example from the Sample Article:

With padding-right, the gutter is actually just stolen space from the left columns content area:

margin-right produces a true gutter and equal columns

Andrew Scholer (he/him/his)

Computer Science Instructor/Program Chair

Chemeketa Community College

503.589.7649 

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

To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/2191c3ad-bf36-fd11-4a80-6c23b0ea51d%40aimath.org.

[David W. Farmer]

Okay. We'll see if someone finds a problematic case.

On Wed, 8 May 2024, Andrew Scholer wrote:

> Here is a text-heavy example from the Sample Article:
>
> With padding-right, the gutter is actually just stolen space from the left columns content area:
>

> image.png

> image.png
>
> margin-right produces a true gutter and equal columns

> image.png

> https://groups.google.com/d/msgid/pretext-support/CACm44N8z1Mz%3DO9zhKsUN1HS5rprKa2kL0qDbxNhUM-2Qv%3DyxLw%40mail.gmail.com.
>
>

[Rob Beezer]

Thanks for the catch and the discussion, and thanks to Andrew for the change.

Pull request has been merged (and a CLI release is imminent). Website has been
updated.

I don't see anything that has gone backwards, but did not look too carefully at
the actual improvement. So holler if you think this needs more work. Sections
5 and 11 of the sample article are good places to confirm observations.

Rob