tabs from "tabbed from PyMdown Extensions" does not get processed correctly

[honschi19]

the pdf generator was working nice until we decided to use the tabbed extension. https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/

The issue is simple -the content from other tab then the first tab is not rendered,

• if the TAB content is longer then one page then then it is cut of after first page

would be nice to see the support for that.

[orzih]

Hi @honschi19.

I think this problem is due to a "page break rules" mismatch.

e.g.: Try adding the following to your custom CSS:

article div.tabbed-content--wrap {
  page-break-inside: auto !important;
}
article div.tabbed-content--wrap * {
  page-break-before: auto !important;
  page-break-inside: auto !important;
}

and, check to build with debug_html option.

---

See also: this plugin defaults:

https://github.com/orzih/mkdocs-with-pdf/blob/dce2c65004d979e4abc310e61178ff859cc5762e/mkdocs_with_pdf/styles/_paging.scss#L58-L88

[honschi19]

hi @orzih

thanks. I tried it, but no success.

When I use weasyprint directly it does the right page breaks as expected also on the tabbed content.

Just out of curiosity then I put auto and then inherit to each of the parameters specified in the default styles of the package in my local .scss. But the result for the tabs did not change. I tried couple of other settings but the tabs did not change. I changed the color of the font just to confirm the .scss is being loaded. The result on the tabs is not changing regardless on what I change.

tnx

[orzih]

page-break full reset sample: (SCSS format)

article,
section + section {
  page-break-before: always;

  %headings,
  img {
    page-break-after: auto !important;
    page-break-inside: auto !important;
  }

  a,
  blockquote,
  table,
  ul,
  ol {
    page-break-before: auto !important;
    page-break-inside: auto !important;
  }

  pre,
  dt + dd {
    page-break-before: auto !important;
  }

  %headings + ul,
  %headings + ol {
    page-break-inside: auto !important;
  }

  div.admonition {
    page-break-inside: auto !important;
  }

  div.tabbed-content--wrap {
    page-break-inside: auto !important;
  }

  * + div.highlight,
  * + div.tabbed-set {
    page-break-before: auto !important;
  }
}

[honschi19]

thank you, unfortunately it did not help.

to make the issue more clear I attached the generated PDF. on Page 11 is the content getting lost. IoTC-documentation.pdf

The source webpage is here: https://iotconnector-docs.readthedocs.io/en/latest/

The tabs which are rendered in the PDF wrong are here: https://iotconnector-docs.readthedocs.io/en/latest/#end-points

When using weasyprint it failes in the rendering due to other issues but the tabs are rendered correctly. also attached test.pdf page 10.

Not sure what could be the reason.

[animalart]

Hi @orzih

I also had issues with tabs so I went through the code of the generator and to the tab utils.

It looks that using the feature 'html.parser' of beautifulsoup4 in self._soup_from_content in on_post_page change the way <input /> tags are parsed.

Indeed, after being parsed, input tags are split in an open and a closing tags. As an example:

<div class="tabbed-set" data-tabs="1:2">
    <input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" />
    <label for="__tabbed_1_1">Windows</label><div class="tabbed-content">
    ...
</div>

becomes:

<div class="tabbed-set" data-tabs="1:2">
    <input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio">
    <label for="__tabbed_1_1">Windows</label><div class="tabbed-content">
    ...
    </input>
</div>

As you can see, this is why tabs are wrapped in a big tabbed-content--wrap and then a smaller one, etc.

To fix this, I used 'html5lib' as feature in the beautifulsoup4 constructors of the generator script which is more complete and just a little slower.

I also had to comment the line tag.text = self._mixed_script in the _render_js function of the script generator as it was not used with 'html.parser' and it was trying to set data to a property (AttributeError). I do not know what it is used for so I will need I little help on this.

Thank you for your work on this repository and I hope it will help.

[abby-cyber]

the pdf generator was working nice until we decided to use the tabbed extension. https://facelessuser.github.io/pymdown-extensions/extensions/tabbed/

The issue is simple -the content from other tab then the first tab is not rendered,

• if the TAB content is longer then one page then then it is cut of after first page

would be nice to see the support for tha

had the same issue to me

[abby-cyber]

Hi @orzih

I also had issues with tabs so I went through the code of the generator and to the tab utils.

It looks that using the feature 'html.parser' of beautifulsoup4 in self._soup_from_content in on_post_page change the way <input /> tags are parsed.

Indeed, after being parsed, input tags are split in an open and a closing tags. As an example:

<div class="tabbed-set" data-tabs="1:2">
    <input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio" />
    <label for="__tabbed_1_1">Windows</label><div class="tabbed-content">
    ...
</div>

becomes:

<div class="tabbed-set" data-tabs="1:2">
    <input checked="checked" id="__tabbed_1_1" name="__tabbed_1" type="radio">
    <label for="__tabbed_1_1">Windows</label><div class="tabbed-content">
    ...
    </input>
</div>

As you can see, this is why tabs are wrapped in a big tabbed-content--wrap and then a smaller one, etc.

To fix this, I used 'html5lib' as feature in the beautifulsoup4 constructors of the generator script which is more complete and just a little slower.

I also had to comment the line tag.text = self._mixed_script in the _render_js function of the script generator as it was not used with 'html.parser' and it was trying to set data to a property (AttributeError). I do not know what it is used for so I will need I little help on this.

Thank you for your work on this repository and I hope it will help.

Can you share your code? I met the same issue. Thank you!