Nested tables: HTML writer bug?

Nested tables: HTML writer bug?

[William Lupton]

[-- Attachment #1.1: Type: text/plain, Size: 3855 bytes --]

All,

[Forked from
https://groups.google.com/g/pandoc-discuss/c/5O6iYmUwFJ8/m/biiwj2njAAAJ]

In the above thread I presented the grid.md example shown at the bottom of
this message. I also couldn't resist trying another level of nesting,
resulting in the grid2.md example shown below. This works, but I'm
wondering whether there's a bug (in the HTML writer) relating to how nested
grid table widths are calculated:

   - pandoc -s grid2.md -o grid2.html gives the first image shown below
   the markdown, in which the nested grid table has a scroll bar
   - The table and column widths are as shown immediately below and I'm
   wondering where the width:44% came from. Removing it gives the second
   image below the markdown (no scroll bar)

I'm not seriously suggesting actually using a text editor to create deeply
nested tables such as these... but given that it works I wanted to
understand what was going on with the table width calculation.

Thanks,
William

% xmllint -format grid2.html | egrep -e '<(\/?table|col )'
    <table style="width:79%;">
        <col style="width: 18%"/>
        <col style="width: 11%"/>
        <col style="width: 50%"/>
            <table style="width:44%;">
                <col style="width: 18%"/>
                <col style="width: 26%"/>
                    <table>
                    </table>
            </table>
    </table>

*grid2.md*

+------------+-------+-----------------------------------+
| Fruit      | Price | Advantages                        |
+============+=======+===================================+
| Bananas    | $1.34 | - built-in wrapper                |
|            |       | - bright color                    |
+------------+-------+-----------------------------------+
| Oranges    | $2.10 | - cures scurvy                    |
|            |       | - tasty                           |
+------------+-------+-----------------------------------+
| Apple (pi) | $3.14 | +------------+------------------+ |
|            |       | | One        | Two              | |
|            |       | +============+==================+ |
|            |       | | my         | table            | |
|            |       | +------------+------------------+ |
|            |       | | is         | | Three | Four | | |
|            |       | |            | |-------+------| | |
|            |       | |            | | very  | nice | | |
|            |       | +------------+------------------+ |
+------------+-------+-----------------------------------+

[image: Screenshot 2022-07-22 at 11.46.56.png]

[image: Screenshot 2022-07-22 at 11.57.56.png]

*grid.md*

+---------------+---------------+--------------------+
| Fruit         | Price         | Advantages         |
+===============+===============+====================+
| Bananas       | $1.34         | - built-in wrapper |
|               |               | - bright color     |
+---------------+---------------+--------------------+
| Oranges       | $2.10         | - cures scurvy     |
|               |               | - tasty            |
+---------------+---------------+--------------------+
| Apple (pi)    | $3.14         | | One | Two   |    |
|               |               | |-----+-------|    |
|               |               | | my  | table |    |
|               |               | | is  | nice  |    |
+---------------+---------------+--------------------+

[image: Screenshot 2022-07-20 at 23.36.36.png]

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAEe_xxg174vpMGdEwzx-USMNPPodVOC0LqVCx9SEGxpGA7pDiA%40mail.gmail.com.

[-- Attachment #1.2: Type: text/html, Size: 5769 bytes --]

[-- Attachment #2: Screenshot 2022-07-22 at 11.46.56.png --]
[-- Type: image/png, Size: 94944 bytes --]

[-- Attachment #3: Screenshot 2022-07-22 at 11.57.56.png --]
[-- Type: image/png, Size: 97185 bytes --]

[-- Attachment #4: Screenshot 2022-07-20 at 23.36.36.png --]
[-- Type: image/png, Size: 83221 bytes --]

Re: Nested tables: HTML writer bug?

[John MacFarlane]

The `width: 44%` comes in because the nested table is 44% of the overall column width.

Browsers then interpret this as 44% of the containing cell, I guess, which is why you get the odd output.

I don't see a good solution here.  The problem is that 44% will be interpreted relative to line length in other formats (e.g. Markdown, LaTeX), so we don't want to change the markdown reader so that it assigns this embedded table a higher relative width.  Nor is it clear how we'd change the HTML writer to interpret this width differently.  I suppose we could keep track of the width of the containing cell and recompute based on that.  You can submit a bug report if you like.

> On Jul 22, 2022, at 1:00 PM, William Lupton <wlupton-QSt+ys/nuMyEUIsrzH9SikB+6BGkLq7r@public.gmane.org> wrote:
> 
> All,
> 
> [Forked from https://groups.google.com/g/pandoc-discuss/c/5O6iYmUwFJ8/m/biiwj2njAAAJ]
> 
> In the above thread I presented the grid.md example shown at the bottom of this message. I also couldn't resist trying another level of nesting, resulting in the grid2.md example shown below. This works, but I'm wondering whether there's a bug (in the HTML writer) relating to how nested grid table widths are calculated:
> 	• pandoc -s grid2.md -o grid2.html gives the first image shown below the markdown, in which the nested grid table has a scroll bar
> 	• The table and column widths are as shown immediately below and I'm wondering where the width:44% came from. Removing it gives the second image below the markdown (no scroll bar)
> I'm not seriously suggesting actually using a text editor to create deeply nested tables such as these... but given that it works I wanted to understand what was going on with the table width calculation.
> 
> Thanks,
> William
> 
> % xmllint -format grid2.html | egrep -e '<(\/?table|col )'
>     <table style="width:79%;">
>         <col style="width: 18%"/>
>         <col style="width: 11%"/>
>         <col style="width: 50%"/>
>             <table style="width:44%;">
>                 <col style="width: 18%"/>
>                 <col style="width: 26%"/>
>                     <table>
>                     </table>
>             </table>
>     </table>
> 
> grid2.md
> 
> +------------+-------+-----------------------------------+
> | Fruit      | Price | Advantages                        |
> +============+=======+===================================+
> | Bananas    | $1.34 | - built-in wrapper                |
> |            |       | - bright color                    |
> +------------+-------+-----------------------------------+
> | Oranges    | $2.10 | - cures scurvy                    |
> |            |       | - tasty                           |
> +------------+-------+-----------------------------------+
> | Apple (pi) | $3.14 | +------------+------------------+ |
> |            |       | | One        | Two              | |
> |            |       | +============+==================+ |
> |            |       | | my         | table            | |
> |            |       | +------------+------------------+ |
> |            |       | | is         | | Three | Four | | |
> |            |       | |            | |-------+------| | |
> |            |       | |            | | very  | nice | | |
> |            |       | +------------+------------------+ |
> +------------+-------+-----------------------------------+
> 
> <Screenshot 2022-07-22 at 11.46.56.png>
> 
> <Screenshot 2022-07-22 at 11.57.56.png>
> 
> grid.md
> 
> +---------------+---------------+--------------------+
> | Fruit         | Price         | Advantages         |
> +===============+===============+====================+
> | Bananas       | $1.34         | - built-in wrapper |
> |               |               | - bright color     |
> +---------------+---------------+--------------------+
> | Oranges       | $2.10         | - cures scurvy     |
> |               |               | - tasty            |
> +---------------+---------------+--------------------+
> | Apple (pi)    | $3.14         | | One | Two   |    |
> |               |               | |-----+-------|    |
> |               |               | | my  | table |    |
> |               |               | | is  | nice  |    |
> +---------------+---------------+--------------------+
> 
> <Screenshot 2022-07-20 at 23.36.36.png>
> 
> -- 
> You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAEe_xxg174vpMGdEwzx-USMNPPodVOC0LqVCx9SEGxpGA7pDiA%40mail.gmail.com.

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/8576E560-B7B5-49B5-9DDC-87EF9AC48F81%40gmail.com.

Re: Nested tables: HTML writer bug?

[William Lupton]

[-- Attachment #1: Type: text/plain, Size: 6249 bytes --]

Thanks!

> I suppose we could keep track of the width of the containing cell and
recompute based on that.

This seems like the right thing to do.

> You can submit a bug report if you like.

OK.

On Fri, 22 Jul 2022 at 12:16, John MacFarlane <fiddlosopher-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org>
wrote:

> The `width: 44%` comes in because the nested table is 44% of the overall
> column width.
>
> Browsers then interpret this as 44% of the containing cell, I guess, which
> is why you get the odd output.
>
> I don't see a good solution here.  The problem is that 44% will be
> interpreted relative to line length in other formats (e.g. Markdown,
> LaTeX), so we don't want to change the markdown reader so that it assigns
> this embedded table a higher relative width.  Nor is it clear how we'd
> change the HTML writer to interpret this width differently.  I suppose we
> could keep track of the width of the containing cell and recompute based on
> that.  You can submit a bug report if you like.
>
> > On Jul 22, 2022, at 1:00 PM, William Lupton <wlupton-QSt+ys/nuMyEUIsrzH9SisXa4x6EXUF0@public.gmane.orgg>
> wrote:
> >
> > All,
> >
> > [Forked from
> https://groups.google.com/g/pandoc-discuss/c/5O6iYmUwFJ8/m/biiwj2njAAAJ]
> >
> > In the above thread I presented the grid.md example shown at the bottom
> of this message. I also couldn't resist trying another level of nesting,
> resulting in the grid2.md example shown below. This works, but I'm
> wondering whether there's a bug (in the HTML writer) relating to how nested
> grid table widths are calculated:
> >       • pandoc -s grid2.md -o grid2.html gives the first image shown
> below the markdown, in which the nested grid table has a scroll bar
> >       • The table and column widths are as shown immediately below and
> I'm wondering where the width:44% came from. Removing it gives the second
> image below the markdown (no scroll bar)
> > I'm not seriously suggesting actually using a text editor to create
> deeply nested tables such as these... but given that it works I wanted to
> understand what was going on with the table width calculation.
> >
> > Thanks,
> > William
> >
> > % xmllint -format grid2.html | egrep -e '<(\/?table|col )'
> >     <table style="width:79%;">
> >         <col style="width: 18%"/>
> >         <col style="width: 11%"/>
> >         <col style="width: 50%"/>
> >             <table style="width:44%;">
> >                 <col style="width: 18%"/>
> >                 <col style="width: 26%"/>
> >                     <table>
> >                     </table>
> >             </table>
> >     </table>
> >
> > grid2.md
> >
> > +------------+-------+-----------------------------------+
> > | Fruit      | Price | Advantages                        |
> > +============+=======+===================================+
> > | Bananas    | $1.34 | - built-in wrapper                |
> > |            |       | - bright color                    |
> > +------------+-------+-----------------------------------+
> > | Oranges    | $2.10 | - cures scurvy                    |
> > |            |       | - tasty                           |
> > +------------+-------+-----------------------------------+
> > | Apple (pi) | $3.14 | +------------+------------------+ |
> > |            |       | | One        | Two              | |
> > |            |       | +============+==================+ |
> > |            |       | | my         | table            | |
> > |            |       | +------------+------------------+ |
> > |            |       | | is         | | Three | Four | | |
> > |            |       | |            | |-------+------| | |
> > |            |       | |            | | very  | nice | | |
> > |            |       | +------------+------------------+ |
> > +------------+-------+-----------------------------------+
> >
> > <Screenshot 2022-07-22 at 11.46.56.png>
> >
> > <Screenshot 2022-07-22 at 11.57.56.png>
> >
> > grid.md
> >
> > +---------------+---------------+--------------------+
> > | Fruit         | Price         | Advantages         |
> > +===============+===============+====================+
> > | Bananas       | $1.34         | - built-in wrapper |
> > |               |               | - bright color     |
> > +---------------+---------------+--------------------+
> > | Oranges       | $2.10         | - cures scurvy     |
> > |               |               | - tasty            |
> > +---------------+---------------+--------------------+
> > | Apple (pi)    | $3.14         | | One | Two   |    |
> > |               |               | |-----+-------|    |
> > |               |               | | my  | table |    |
> > |               |               | | is  | nice  |    |
> > +---------------+---------------+--------------------+
> >
> > <Screenshot 2022-07-20 at 23.36.36.png>
> >
> > --
> > You received this message because you are subscribed to the Google
> Groups "pandoc-discuss" group.
> > To unsubscribe from this group and stop receiving emails from it, send
> an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> > To view this discussion on the web visit
> https://groups.google.com/d/msgid/pandoc-discuss/CAEe_xxg174vpMGdEwzx-USMNPPodVOC0LqVCx9SEGxpGA7pDiA%40mail.gmail.com
> .
>
> --
> You received this message because you are subscribed to the Google Groups
> "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pandoc-discuss/8576E560-B7B5-49B5-9DDC-87EF9AC48F81%40gmail.com
> .
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAEe_xxiXYY7V5J5t0HEc1tNrdTuHhXhny2rizBw%3DRsY-1dEFqA%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 8651 bytes --]

Re: Nested tables: HTML writer bug?

[EBkysko]

[-- Attachment #1.1: Type: text/plain, Size: 696 bytes --]

A possible temporary solution (for html, not extensively tested) is to add 
this to the style sheet (or as `header-includes` in yaml):

`table table {display:table}`

ie, normal table behavior for inner tables; the default style for the 
pandoc html writer is `table {display:block}`.

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/1e1779ab-afde-43e0-8c07-ffa63125e07en%40googlegroups.com.

[-- Attachment #1.2: Type: text/html, Size: 1210 bytes --]

Re: Nested tables: HTML writer bug?

[William Lupton]

[-- Attachment #1: Type: text/plain, Size: 1684 bytes --]

Interesting. I wonder why the default HTML style has table{display:
block;}. If it didn't, the problem would go away, yes?

Note that this setting was part of https://github.com/jgm/pandoc/pull/6601,
which was merged on 20 Sep 2020
<https://github.com/jgm/pandoc/pull/6601#event-3785590344>.

On Sat, 23 Jul 2022 at 22:24, EBkysko <ebkysko-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:

> A possible temporary solution (for html, not extensively tested) is to add
> this to the style sheet (or as `header-includes` in yaml):
>
> `table table {display:table}`
>
> ie, normal table behavior for inner tables; the default style for the
> pandoc html writer is `table {display:block}`.
>
> --
> You received this message because you are subscribed to the Google Groups
> "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pandoc-discuss/1e1779ab-afde-43e0-8c07-ffa63125e07en%40googlegroups.com
> <https://groups.google.com/d/msgid/pandoc-discuss/1e1779ab-afde-43e0-8c07-ffa63125e07en%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAEe_xxgpYb4c4JnkpZFZHq-ogsEw2n-C2rkjNMxs9VGz9%2BDjFg%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 3149 bytes --]

Re: Nested tables: HTML writer bug?

[EBkysko]

[-- Attachment #1.1: Type: text/plain, Size: 614 bytes --]

usually a hack to display tables on small screens

see:
Displaying large tables in small spaces 
<https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/4137c27d-9458-47d4-8a81-af1002db785an%40googlegroups.com.

[-- Attachment #1.2: Type: text/html, Size: 1006 bytes --]

Re: Nested tables: HTML writer bug?

[William Lupton]

[-- Attachment #1: Type: text/plain, Size: 1418 bytes --]

Any opinions on whether the proposed fix should be to the HTML table width
calculation or to the style?

On Sun, 24 Jul 2022 at 19:16, EBkysko <ebkysko-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:

> usually a hack to display tables on small screens
>
> see:
> Displaying large tables in small spaces
> <https://developer.mozilla.org/en-US/docs/Web/HTML/Element/table#displaying_large_tables_in_small_spaces>
>
> --
> You received this message because you are subscribed to the Google Groups
> "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an
> email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit
> https://groups.google.com/d/msgid/pandoc-discuss/4137c27d-9458-47d4-8a81-af1002db785an%40googlegroups.com
> <https://groups.google.com/d/msgid/pandoc-discuss/4137c27d-9458-47d4-8a81-af1002db785an%40googlegroups.com?utm_medium=email&utm_source=footer>
> .
>

-- 
You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAEe_xxj%3DLxGTmE%2BY5rum7%2B6JQ7PmfFhRcgP4ppo-gH_%3DpyT78g%40mail.gmail.com.

[-- Attachment #2: Type: text/html, Size: 2293 bytes --]

Re: Nested tables: HTML writer bug?

[John MacFarlane]

I'd like to hear from Mauro Bieg about why the style says 'display: block' before deciding about this.

> On Jul 25, 2022, at 9:44 AM, William Lupton <wlupton-QSt+ys/nuMyEUIsrzH9SikB+6BGkLq7r@public.gmane.org> wrote:
> 
> Any opinions on whether the proposed fix should be to the HTML table width calculation or to the style?
> 
> On Sun, 24 Jul 2022 at 19:16, EBkysko <ebkysko-Re5JQEeQqe8AvxtiuMwx3w@public.gmane.org> wrote:
> usually a hack to display tables on small screens
> 
> see:
> Displaying large tables in small spaces
> 
> 
> -- 
> You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/4137c27d-9458-47d4-8a81-af1002db785an%40googlegroups.com.
> 
> -- 
> You received this message because you are subscribed to the Google Groups "pandoc-discuss" group.
> To unsubscribe from this group and stop receiving emails from it, send an email to pandoc-discuss+unsubscribe-/JYPxA39Uh5TLH3MbocFF+G/Ez6ZCGd0@public.gmane.org
> To view this discussion on the web visit https://groups.google.com/d/msgid/pandoc-discuss/CAEe_xxj%3DLxGTmE%2BY5rum7%2B6JQ7PmfFhRcgP4ppo-gH_%3DpyT78g%40mail.gmail.com.