donpark / html2jade

Converts HTML to Jade template. Not perfect but useful enough for non-daily conversions.
MIT License
1.18k stars 157 forks source link

Nesting Issues with self-closing tags #74

Closed colelawrence closed 10 years ago

colelawrence commented 10 years ago

Nesting with self-closing tags goes not seem to work on html2jade@0.7.5 image Above photo captured from running my fork which has the dependencies fixed: https://github.com/ZombieHippie/html2jade-website

for reference: image

colelawrence commented 10 years ago

I wrote this short piece of code to fix my problem, it basically makes all self-closing tags into full tags.

It does not take into account whether the <something * /> is in quotes or in a CDATA so it is not enough to be implemented.


server.post('/convert', function (req, res) {
    var html = req.body.html;
    html = html.replace(/<([_\w\d]+)[^>]+\/>/g, function(match, tagname) {
        return match.replace("\/>", "></" + tagname + ">");
    })
    html2jade.convertHtml(html, {}, function (err, jade) {
        res.json({ jade: jade });
    });
});
donpark commented 10 years ago

Wondering if differences between jsdom and jsdom-little might be causing this.

colelawrence commented 10 years ago

For a lot of the previous versions html2jade's npm install uses node-gyp which errors out on windows, also hopefully that isnt the cause either :-| On May 28, 2014 8:22 PM, "Don Park" notifications@github.com wrote:

Wondering if differences between jsdom and jsdom-little might be causing this.

— Reply to this email directly or view it on GitHubhttps://github.com/donpark/html2jade/issues/74#issuecomment-44484641 .

colelawrence commented 10 years ago

*jsdom isnt the cause because it will complicate the install process when reverted.

Can we use just sax js? Or something like cheerio? On May 28, 2014 8:24 PM, "Cole Lawrence" msgzht@gmail.com wrote:

For a lot of the previous versions html2jade's npm install uses node-gyp which errors out on windows, also hopefully that isnt the cause either :-| On May 28, 2014 8:22 PM, "Don Park" notifications@github.com wrote:

Wondering if differences between jsdom and jsdom-little might be causing this.

— Reply to this email directly or view it on GitHubhttps://github.com/donpark/html2jade/issues/74#issuecomment-44484641 .

donpark commented 10 years ago

html2jade is also used client-side so DOM is required unfortunately.

donpark commented 10 years ago

Anyway, I'll take a look after a nap.

donpark commented 10 years ago

It appears that self-closing tags are not recognized in HTML5 specs nor in browsers and DOM implementations. Its use is also dwindling making it a legacy issue.

I think the best way to handle this is to write a separate processor that does essentially what you are doing above.

Please close this issue if you agree. Leave as is if not to serve as a point of contention for further discussion when enough request for built-in support gathers. Thanks.

colelawrence commented 10 years ago

So what we are dealing with is basically if the tag is recognized as self closing,
for example, then the "browser" (jsdom, or window) will interpret it as such && self closed tags that are not recognized as self closing will be open tags? On May 30, 2014 12:11 AM, "Don Park" notifications@github.com wrote:

It appears that self-closing tags are not recognized in HTML5 specs nor in browsers and DOM implementations. Its use is also dwindling making it a legacy issue.

I think the best way to handle this is to write a separate processor that does essentially what you are doing above.

Please close this issue if you agree. Leave as is if not to serve as a point of contention for further discussion when enough request for built-in support gathers. Thanks.

— Reply to this email directly or view it on GitHub https://github.com/donpark/html2jade/issues/74#issuecomment-44615658.

donpark commented 10 years ago

HTML predates XML and is a derivative of SGML. Both SGML and HTML supports tags with optional end tag in its DTD. Self-closing tag was introduced in XML which was created after HTML.

Browsers know that tags like <b> and <p> don't require end tags and uses known document structural constraints to figure out where the inferred end tag should be.

Self-closing tag was fairly widely used initially because browsers appeared to ignore them and their behavior appears to match user expectations for most common self-closing tags like <br>.

In your example, <g> tag is an out-of-place SVG (read XML) tag embedded in midst of HTML tags without proper hints to mark XML island nor XML namespace. I don't think html2jade should be smart enough to handle situations like this. Instead it should just let DOM implementation handle them.

colelawrence commented 10 years ago

Okay, I'll close this tomorrow at work.

I am using html2jade for converting an xml language to jade, so I had to do some preprocessing before using html2jade.

Thanks Don On May 30, 2014 12:34 AM, "Don Park" notifications@github.com wrote:

HTML predates XML and is a derivative of SGML. Both SGML and HTML supports tags with optional end tag in its DTD. Self-closing tag was introduced in XML which was created after HTML.

Browsers know that tags like * and *

don't require end tags and uses known document structural constraints to figure out where the inferred end tag should be.

Self-closing tag was fairly widely used initially because browsers appeared to ignore them and their behavior appears to match user expectations for most common self-closing tags like .

In your example, tag is an out-of-place SVG (read XML) tag embedded in midst of HTML tags without proper hints to mark XML island nor XML namespace. I don't think html2jade should be smart enough to handle situations like this. Instead it should just let DOM implementation handle them.

— Reply to this email directly or view it on GitHub https://github.com/donpark/html2jade/issues/74#issuecomment-44616642.

donpark commented 10 years ago

np.

I am using html2jade for converting an xml language to jade, so I had to do some preprocessing before using html2jade.

Then it should be fairly easy to workaround this problem. You may want to just use the source code to just generate Jade directly.