Giters

mdgriffith / elm-markup

Elm-friendly markup

Home Page:https://package.elm-lang.org/packages/mdgriffith/elm-markup/latest/

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Server-side rendering of markup document

SocraticSam opened this issue · comments

commented

Hello!

I am working with @lzrski, I believe he's written you already about our project. We've creating a presentation using elm-markup. It's a great tool, thank you for all your work.

We've decided to support browsers with JavaScript disabled, so we're using puppeteer to capture the content server-side and deliver it to the client. However, we've run into an issue concerning the formatting of the markup document in the DOM.

I believe the issue comes from the fact that the eventual representation of the markup document in the DOM contains div elements nested in p elements. For example, the string:

"""
{Drop|Lorem Ipsum is simply---}dummy text of the printing and {Link|typesetting industry| url = http://mechanical-elephant.com}. Lorem Ipsum has been the industry's /standard/ dummy text ever since the 1500's, when an "unknown printer" took a galley of type and scrambled it to<>make a type specimen book.  
"""

After being parsed by elm-markup, will (with some simplification) ultimately be represented in the DOM as:

<p> 
  <div>
    <div>
      <div>Lorem Ipsum is simply---</div>
    </div>
  </div>  
  <div> 
    <div>dummy text of the printing and </div>
  </div>
  <a href="http://mechanical-elephant.com" rel="noopener noreferrer">
    <div style="display: inline-flex;">                                           
      <div>
        <div>typesetting industry</div>
      </div>
    </div>
  </a>
  <div>
    <div>. Lorem Ipsum has been the industry’s </div>
  </div>
  <div>
    <div>standard</div>
  </div>
  <div>
    <div> 
      dummy text ever since the 1500’s, when an “unknown printer” took a galley of type and scrambled it to&nbsp;make a type specimen book.
    </div>
  </div>
</p>

However, I've seen that <p><div></div></p> is not valid html. According to the HTML spec, an open p tag will be automatically closed when a div tag is encountered. Thus, <p><div></div></p> will be interpreted as <p></p><div></div><p></p>, and any styles associated with the first p will not be applied to the inner div(s).

I believe this issue could be solved by using span tags with a block display for the inner divs, or div tags instead of p tags. There are probably other solutions.

Thank you again for all your work!

commented

I think the problem is really in Elm UI, not Elm markup.

commented

I've posted a new issue in elm-ui. Will close this one.