sidebyside containing only one thing

[David Farmer]

We need to discuss the use of sidebyside containing just
one thing. (I know there have been discussions on this,
but I did not go back to re-read those.)

Karl-Dieter did this with a table, with the unfortunate
effect that on narrow screen the table did not fit, and
it was impossible to scroll to see it all. Adding a
scroll bar to the table did not solve the problem, because
the table was not overflowing its container. The .sidebyside
containing everything was wider than the browser.

Thus, it is the .sidebyside which needs the scroll bar.

Karl-Dieter's problem solved, yay!

But wait. Now Jeremy reports undesirable scroll bars on
images in a sidebyside. Images should never need scroll bars
because they shrink to fit (they should: report if not). You
can click to see a large version.

So I took away those scroll bars. So Karl-Dieter's problem is back.

Let's discuss why someone would put something by itself
in a sidebyside, ignoring the fact that a person can be beside
themself but an image or table cannot.

I assume it is only for sizing and shifting left or right on
the page?

In Karl-Dieter's case, it seems to be doing nothing at all.
We end up with HTML like:

.sidebyside .sbsrow .sbspanel table

instead of just

table

My main question is: could we have the XSL just ignore the
wrapping sidebyside when it is there for no real purpose?

My long-term question: Is there actually any good reason for
having one thing in a sidebyside, and if so, is there a better
way to do it?

My question for Rob: I suspect you have already done something
like this for a sidebyside containing only an image: while
investigating Jeremy's question I saw that the click-to-magnify
feature for images was not working. What I think we need is
a class on the div in:

figure div img

That div is for sizing, so maybe that can be used for the class.
(Note: I think I have fixed the click-to-magnify.)

Final question for everyone: how can we test things like "click
on img to make it bigger" when a change might break that, and not
be noticed for a while?

David

[Rob Beezer]

I have work in place to support:

p
image/@width
p

which would center the image.

I cannot recall exactly what I did to allow greater control. I do recall some
CSS adjustments being requested, which have not been implemented. I think the
beta is gone now, it was on mathbook.pugetsound.edu.

Rather than speculate, let me do my homework (it'll need to be Wednesday) and I
can report on plans and current status.

Rob

[Fraboni, Michael]

My long-term question:  Is there actually any good reason for
having one thing in a sidebyside, and if so, is there a better
way to do it?

Not sure if this is a good reason, but I've placed a figure alone inside a sidebyside so that the caption of the figure is wrapped to the same width as the figure.  I felt this made the figure caption stand out more clearly. 

Though now that I write this I suppose that's a hack I shouldn't be thinking of as an author, and as a publisher I should just modify the xsl if I want captions to appear differently.  So perhaps this isn't the good reason you were looking for.  :)

Mike

[Rob Beezer]

That is a feature. ;-)

sidebyside
figure
image

is subtley different from

figure
image

Rob

> --
> 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 post to this group, send email to pretext...@googlegroups.com
> <mailto:pretext...@googlegroups.com>.
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pretext-support/CAFDT%3D0j1HBwd3Bnt-gO3S7XEgjO88U6pZEStbeBTmEz6fhaYZA%40mail.gmail.com
> <https://groups.google.com/d/msgid/pretext-support/CAFDT%3D0j1HBwd3Bnt-gO3S7XEgjO88U6pZEStbeBTmEz6fhaYZA%40mail.gmail.com?utm_medium=email&utm_source=footer>.
> For more options, visit https://groups.google.com/d/optout.

[Rick Roesler]

My long-term question:  Is there actually any good reason for
having one thing in a sidebyside, and if so, is there a better
way to do it?

I was working on a problem today that I thought would require a sidebyside with only one element. I want to build a stack of three JSXGraph objects controlled by a single slider. (Similar to the 'piecewise function' example in the sample-article, but stacked vertically.)

My conclusion was that I would need to so something like:

<figure>

<caption/>

<interactive> 

<sbsgroup>

<sidebyside>

<slate/>

</sidebyside>

<sidebyside>

<slate/>

</sidebyside>

<sidebyside>

<slate/>

</sidebyside>

</sbsgroup>

</interactive> 

</figure>

Rick

[Rob Beezer]

Or you might try:

<figure>
<caption/>
<interactive>
<sidebyside>
<stack>
<slate/>
<slate/>
<slate/>
</stack>
</sidebyside>
</interactive>
</figure>

I say "try" because "stack" may not be implemented in this situation.

> --
> 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 post to this group, send email to pretext...@googlegroups.com
> <mailto:pretext...@googlegroups.com>.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/f18d70ad-9704-4b2f-b4ee-45c84246310d%40googlegroups.com
> <https://groups.google.com/d/msgid/pretext-support/f18d70ad-9704-4b2f-b4ee-45c84246310d%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Alex Jordan]

The history is that once upon a time, it was expected that you could just

have a naked image and a naked tabular (naked meaning, no figure parent).

But to bring uniformity/consistency to the XSLT and also in a sense to
authors' source, that went away and it became a requirement to use a

sidebyside parent.

So there are parallel systems. The captioned kind:

figure

  image

table

  tabular

And the uncaptioned kind:

sidebyside

  image (just one)

sidebyside

  tabular (just one)

It's kind of a lie that these are parallels. Where do the following fit in that idea?

figure

  sidebyside

    image (just one)

sidebyside

  figure (just one)

    image

?

I thought we would move toward requiring sidebyside have 2 or more children,

and introduce a "display" element that took on the role of the current sidebyside

with one child, except display would not permit a figure or table child.

But apparently we can do a naked image with recent changes, so maybe that is not

the plan.

Karl-Dieter did this with a table, with the unfortunate
effect that on narrow screen the table did not fit, and
it was impossible to scroll to see it all.  Adding a
scroll bar to the table did not solve the problem, because
the table was not overflowing its container.  The .sidebyside
containing everything was wider than the browser.

Did KDC put a "table" in a sidebyside, or a "tabular"?

Understanding that a PTX "table" becomes an HTML "figure"

and a PTX "tabular" becomes an HTML "table".

I am trying to understand if KDC's problem would also be a

problem when the sidebyside has two things, and one of them is

a table or tabular. That is, I am trying to understand if the genesis

of this post is really about sidebysides with one child after all.

--

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 post to this group, send email to pretext...@googlegroups.com.
To view this discussion on the web visit https://groups.google.com/d/msgid/pretext-support/f18d70ad-9704-4b2f-b4ee-45c84246310d%40googlegroups.com.

[Rick Roesler]

Thanks, Rob. I'll do both and see how they compare. I probably won't get to this until Thursday earliest.

Rick

[Rob Beezer]

On 4/14/19 9:28 AM, Rob Beezer wrote:
> Rather than speculate, let me do my homework (it'll need to be Wednesday) and I
> can report on plans and current status.

Not Wednesday. Tuesday.

Here is what I see *now* based on reviewing the HTML conversion. Likely not
reflected in the schema, since in flux.

Source, single image:

p
image @margins, @width
p

or

figure
caption
image @margins, @width

Source, panel of a side-by-side:

sidebyside @margins, @widths, @valign, etc
tabular
image
p

(So no need for the once mooted "display" element.)


Rendering into HTML

div style="width: nn%; margin-left: nn%; margin-right: nn%;"
img src="foo.png" style="width: 100%; height: auto;"

This is definitely how a single image is rendered, and a sidebyside panel is
similar.


1. The first @style is necessary, since the percentages will be a function of
the author's source values.

2. I've requested a CSS class for the second @style, it never changes.

3. The various combinations, defaults, "auto" values, robust error-checking,
etc for margins, widths, valigns, etc are all handled by one (monster) template
in -common. So the single-image case is utilizing that code and ignoring things
like @valign.

4. If this gets nailed down, then single-tabulars can follow. So maybe fix
scroll bars etc for image/img and then turn our attention to tabular/table?

Rob

[Rick Roesler]

My approach worked as expected. (I used the code from the sample-article to test.) This PreTeXt xml yields the iframe html that follows. Note that I just changed 'aspect' from '20:8' to '8:20' in order to remove scrollbars. I just guessed; not really sure why that worked. 

<figure>

<caption>Three stacked.</caption>

<interactive xml:id="interactive-piecewise-stacked-1" platform="jsxgraph" aspect="8:20" source="../src/piecewise.js">

<sbsgroup>

<sidebyside width="60%" margins="0%">

<slate xml:id="box_p3" surface="jsxboard" aspect="6:6" />

</sidebyside>

<sidebyside width="60%" margins="0%">

<slate xml:id="box2_p3" surface="jsxboard" aspect="6:6" />

</sidebyside>

<sidebyside width="60%" margins="0%">

<slate xml:id="box3_p3" surface="jsxboard" aspect="6:6" />

</sidebyside>

</sbsgroup>

<instructions>

<p>The slider of the top panel will trace out the piecewise function. Simultaneously, the domain will be traced in the middle panel, and the range in the bottom panel.</p>

</instructions>

</interactive>

</figure>

yields the following html for the iframe:

<div style="width:600px; height:1500px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

<div class="sidebyside">

<div class="sbsrow" style="margin-left:0%;margin-right:0%;">

<div class="sbspanel" style="width:60%;justify-content:flex-start;">

<div id="box_p3" class="jxgbox" style="width:360px; height:360px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>

</div>

</div>

</div> <div class="sidebyside">

<div class="sbsrow" style="margin-left:0%;margin-right:0%;">

<div class="sbspanel" style="width:60%;justify-content:flex-start;">

<div id="box2_p3" class="jxgbox" style="width:360px; height:360px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>

</div>

</div>

</div> <div class="sidebyside">

<div class="sbsrow" style="margin-left:0%;margin-right:0%;">

<div class="sbspanel" style="width:60%;justify-content:flex-start;">

<div id="box3_p3" class="jxgbox" style="width:360px; height:360px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>

</div>

</div>

</div> <script src="../src/piecewise.js"></script> </div>

[Rick Roesler]

On Monday, April 15, 2019 at 8:53:41 PM UTC-7, Rob Beezer wrote:

Or you might try:

<figure>
     <caption/>
     <interactive>
         <sidebyside>
              <stack>
                 <slate/>
                 <slate/>
                 <slate/>
              </stack>
         </sidebyside>
     </interactive>
</figure>

I say "try" because "stack" may not be implemented in this situation.

 The 'stack' approach did not work. It resulted in this iframe html:

<div style="width:600px; height:240px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

    <div class="sidebyside">

        <div class="sbsrow" style="margin-left:0%;margin-right:0%;">

            <div class="sbspanel" style="width:30%;justify-content:flex-start;"></div>

[Rob Beezer]

Dear Rick,

Thanks for all the testing and the reports. I just "turned on" the "slate"
element within a "stack". So you will get that with a pull.

Would you mind testing your stack version now? I did almost zero testing.

If your example behaves, would you be willing to donate it to the sample
article? (With attribution, of course!)

Thanks,
Rob

> --
> 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 post to this group, send email to pretext...@googlegroups.com
> <mailto:pretext...@googlegroups.com>.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/0b904e98-7837-40c6-8c3b-c7bc87449e0d%40googlegroups.com
> <https://groups.google.com/d/msgid/pretext-support/0b904e98-7837-40c6-8c3b-c7bc87449e0d%40googlegroups.com?utm_medium=email&utm_source=footer>.

[Rick Roesler]

On Wednesday, April 17, 2019 at 9:34:37 AM UTC-7, Rob Beezer wrote:

Dear Rick,

Thanks for all the testing and the reports.  I just "turned on" the "slate"
element within a "stack".  So you will get that with a pull.

Would you mind testing your stack version now?  I did almost zero testing.

If your example behaves, would you be willing to donate it to the sample
article? (With attribution, of course!)

Thanks,
Rob

This PreTeXt 'stack' approach now works and yields the iframe html that follows

<figure>

<caption>Three stacked - stacked.</caption>

<interactive xml:id="interactive-piecewise-stacked-2" platform="jsxgraph" aspect="8:20" source="../src/piecewise.js">

<sidebyside width="30%" margins="0%">

<stack>

<slate xml:id="box_p3" surface="jsxboard" aspect="6:6" />

<slate xml:id="box2_p3" surface="jsxboard" aspect="6:6" />

<slate xml:id="box3_p3" surface="jsxboard" aspect="6:6" />

</stack>

</sidebyside>

<instructions>

<p>The slider of the top panel will trace out the piecewise function. Simultaneously, the domain will be traced in the middle panel, and the range in the bottom panel.</p>

</instructions>

</interactive>

</figure> 

And yields the following iframe html

<div style="width:600px; height:1500px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">

    <div class="sidebyside">

        <div class="sbsrow" style="margin-left:0%;margin-right:0%;">

            <div class="sbspanel" style="width:30%;justify-content:flex-start;">

                <div id="box_p3" class="jxgbox" style="width:180px; height:180px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>

                <div id="box2_p3" class="jxgbox" style="width:180px; height:180px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>

                <div id="box3_p3" class="jxgbox" style="width:180px; height:180px; display: block; box-sizing: border-box; -moz-box-sizing: border-box; -webkit-box-sizing: border-box;"></div>

            </div>

        </div>

    </div>

    <script src="../src/piecewise.js"></script>

</div>

Happy to contribute. But I needs some instructions on what you need and how to get it to you. My 'git' kung fu is very weak. But I need to learn.

Rick

[Rick Roesler]

Closing the loop on the initial topic of this thread: Now that the 'stack' approach works for my stacked JSXGraph problem, I have no examples where I need a sidebyside with only a single element. 

Rick

[Rob Beezer]

Dear Rick,

Excellent! Thanks for the additional testing. Small miracle that the widths
all turned out OK in the HTML. ;-)

Two options for getting this in:

1. I copy your source from this post, you send me piecewise.js as an
attachment, and I do the rest, with your name on it in the sample article. Easy
for you and me.

2. We walk you through making a pull request via GitHub and your name is also
on teh resulting commit, and I use it as an excuse to start the Developer's
Guide with careful documentation on this process. Laborious for you and me, but
personal and PreTeXt improvement results. ;-)

Rob

> *
> *

> And yields the following iframe html

> *
> *

> <div style="width:600px; height:1500px; display: block; box-sizing: border-box;
> -moz-box-sizing: border-box; -webkit-box-sizing: border-box;">
>     <div class="sidebyside">
>         <div class="sbsrow" style="margin-left:0%;margin-right:0%;">
>             <div class="sbspanel" style="width:30%;justify-content:flex-start;">
>                 <div id="box_p3" class="jxgbox" style="width:180px;
> height:180px; display: block; box-sizing: border-box; -moz-box-sizing:
> border-box; -webkit-box-sizing: border-box;"></div>
>                 <div id="box2_p3" class="jxgbox" style="width:180px;
> height:180px; display: block; box-sizing: border-box; -moz-box-sizing:
> border-box; -webkit-box-sizing: border-box;"></div>
>                 <div id="box3_p3" class="jxgbox" style="width:180px;
> height:180px; display: block; box-sizing: border-box; -moz-box-sizing:
> border-box; -webkit-box-sizing: border-box;"></div>
>             </div>
>         </div>
>     </div>
>     <script src="../src/piecewise.js"></script>
> </div>
>
> Happy to contribute. But I needs some instructions on what you need and how to
> get it to you. My 'git' kung fu is very weak. But I need to learn.
>
> Rick
>

> --
> 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 post to this group, send email to pretext...@googlegroups.com
> <mailto:pretext...@googlegroups.com>.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/520ed2f4-4f4a-4e0a-ad6c-6ff6b352d530%40googlegroups.com
> <https://groups.google.com/d/msgid/pretext-support/520ed2f4-4f4a-4e0a-ad6c-6ff6b352d530%40googlegroups.com?utm_medium=email&utm_source=footer>.

[David Farmer]

On the contrary: in the new example the sidebyside contains only
one thing: the thing it contains is a stack.

So I don't think we have resolved whether sidebysides containing
one thing are reasonable. And in that example the html still contains
several nested div's that don't seem to be logically necessary.

> --
> 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 post to this group, send email to pretext...@googlegroups.com.
> To view this discussion on the web visithttps://groups.google.com/d/msgid/pretext-support/58fcc5e3-eb96-4a9e-93c8-94a76cb1d6f9%40googlegroup
> s.com.

[Rob Beezer]

On 4/17/19 12:02 PM, David Farmer wrote:
> So I don't think we have resolved whether sidebysides containing
> one thing are reasonable.

Necessary.

Your side-by-side group ("sbsgroup") has 13 similar items (say, small images or
simple plots from a scientific experiment).

Three "sidebyside" with four images each and a fourth with the thirteenth image.

Layout on the "sbsgroup" keeps the first three aligned, then you can choose to
have the last image in the first column, or centered, or...

[David Farmer]

Okay, *within a sbsgroup* there is a use case for a sidebyside
containing only one thing.

But that is not the use case which is causing the headaches.

So, I still don't think we have resolved whether sidebysides
containing only one thing, that are direct children of a
(sub)section, are reasonable.

> --
> 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 post to this group, send email to pretext...@googlegroups.com.
> To view this discussion on the web visit

> https://groups.google.com/d/msgid/pretext-support/f19f840c-67b8-b6e5-3b10-14136ab8f1fa%40ups.edu.

[Rob Beezer]

Okay, do we need a "sidebyside" when it is only wrapping one item?

Let's start simple and common, in other words, save things like "stack" for later.

I want to start adjusting XSL to accomodate

image @width @margins

as a child of a division, i.e. mixed in with peers like "p", "theorem", etc.
And also mixed in with "p" that might constitute an "example".

"Start" is wrong, I think I already have. The first two images in Subsection
22.4 are authored as just an "image", no enclosing "sidebyside". It took me a
while to get the enclosing "div" of the "img" to work properly. How does it seem?

If we get a bare "image" right, we can work on a bare "tabular" next. Don't try
to get scrollbars correct on both at the same time?

If we make a "sidebyside" with one panel unnecessary, we can express that in the
schema.

Rob

[David Farmer]

> The first two images in Subsection
> 22.4 are authored as just an "image", no enclosing "sidebyside". It took me
> a while to get the enclosing "div" of the "img" to work properly. How does
> it seem?

Right now it does not look good, because there needs to be
vertical space above that image. I think that should be
on the div enclosing the img.

Give that div a class and then I can style it.

Maybe it would be good for the sample article to also have a
bare image with no set width, just to see how that works.
(Unless you always want a width to be set?)

David

[Rob Beezer]

Dear David,

Presently, *every* HTML "img" has a

style="width: 100%; height: auto;"

on it. This is to make it fill an enclosing div horizontally, keep the aspect
ratio unchanged, and grow the div to match the height of the image. If there is
a better way you know, I'm all for it.

In the beta below, I have removed all of these style attributes. An "img" will
be inside an "div.sbspanel" when it is authored as part of a PTX "sidebyside".
So I am suggesting the width and height attributes need to go on sbspanel > img.
I think.

For an image *not* authored within a "sidebyside" I've made the HTML mirror the
case above.

div.imagepanel
img

No more constant "style" attribute. The div.imagepanel will have variable
margins and width derived from author's source.

Section 22.4 has the previous two non-sidebyside images, and I added a third
bare image with absolutely no layout information (no width, no margins).
PreTeXt writes 100% width, with 0% margins, as a default. If img.width=100%
and img.height=auto are in place the image seems to bump up against a
max-width=550px, and is left-justified (despite an attempt to center?).

Proposal: You and I both agree that images like this should have a bit of
indentation on either side. I'm not particular about the amount (presently
4.1666%?). I would like to control/enforce this via the PreTeXt layout
templates rather than with CSS. In other words, I'd like to have the PreTeXt
default change away from 100%.

Why? The very complicated, but very robust, templates to accomodate all the
different sidebyside layout parameters is (a) conversion-independent and (b)
recyclable for these non-sidebyside placements. In order to have an author's
source implemented faithfully in LaTeX and it HTML, it will mean accomodating in
the LaTeX conversion the implicit 600:550 scaling factor present in the HTML
conversion. Better long-term to unify as much as possible into the -common
templates.

https://pretextbook.org/beta/2019-04-21-images

Section 22.4, first three images, as discussed.

Section 22.7, SVG and JPG images, since mostly PNG elsewhere.

Section 9, many single images, authored outside a "sidebyside", but given inside
a "figure"

Thanks for working on this, I've wanted to nail this down for some time. Let's
finish styling here, I am going to move the general "single item sidebyside"
discussion to -dev just now.

Rob

[Rob Beezer]

On 4/17/19 10:37 AM, Rob Beezer wrote:
> Two options for getting this in:
>

> 2.  We walk you through making a pull request via GitHub and your name is also
> on teh resulting commit, and I use it as an excuse to start the Developer's
> Guide with careful documentation on this process.  Laborious for you and me, but
> personal and PreTeXt improvement results.  ;-)

For the record, Rick's (very nice) stacked-slate interactive is now in the
sample article. Show it to your Calculus I students.

Figure 14.5 at

https://pretextbook.org/examples/sample-article/html/section-interactive-authored.html

Rob