We should add a few checks in the JS that if a pullquote is used within HTML tags other than <p>, for example <li> <ol> <ul> <quote> <blockquote> etc that it both renders the pullquote correctly and in compliance with W3C standards.

For example:
* adding pullquote to a list adds an orphaned span tag sitting with the <ul> tag which doesn't meet W3C specification. The JS should be changed to add an IF statement to check if the parent is a <li> and if so, place the pullquote above the <ul> tag.
* if text within the <blockquote> tag, is marked up with pullquote, the rendered pullquote loses the shaded background.

Comments

callison’s picture

StatusFileSize
new1.71 KB

Well, I'm a bit new to jQuery, so this may not be the most elegant solution, but it works.

I got to thinking about this and realized this not only affects list tags, but tables, blockquotes, and other things as well. So, what I did was a loop to continue moving the inserted content up until it's no longer inside any of the "bad" elements (which is included in an array and can easily be added to at any time should we think of something else). I'd love feedback on my implementation and if there's an easier/better way to do it. Thanks.

callison’s picture

Status: Active » Needs review
lliss’s picture

StatusFileSize
new2.62 KB

Nice work. Thanks very much. I tested this out and it got me thinking even more about the desired functionality. I think it would be optimal to add the span above any of the "bad" elements listed in your array. I combined your work with this idea to have the span tag simply applied above the "bad" elements (ul, li, table, etc.) and inside the "good" (p, div, span, etc.). The one weird situation is blockquotes which only allow block level elements inside of them so in this case we'll add a div tag.

We don't need to worry about the span tag applied above ul or table tags because the entire main content area is wrapped in a div so a free standing span is no trouble.

I'm attaching my new idea as a patch (which I also applied to the dev branch).

Try pasting this HTML into your content area and observe the results. The generated HTML should be pass validation at validator.w3.org (or at least the generated HTML we're responsible for). I think this covers most reasonable cases. Let me know if you feel otherwise.

<span class="pullquote">nothing test -- this is a test</span>
<p>Erat iustum neo nunc quis sagaciter. <span class="pullquote">P tag test - Comis iustum magna nisl quis saluto vulputate. Augue eum importunus.</span> Exerci genitus luctus nulla. Paratus proprius quadrum si zelus. Commoveo feugiat letalis singularis tum. Adipiscing blandit consectetuer duis hendrerit ideo interdico metuo si. Brevitas dignissim hos luctus probo suscipere velit vindico vulpes. Distineo saepius suscipit tum. Iaceo nimis pagus pneum sagaciter utinam. Blandit mauris pagus paulatim populus. Distineo loquor modo nulla rusticus saepius uxor vicis. Augue ibidem luptatum nobis occuro odio verto.</p>

<blockquote>Erat iustum neo nunc quis sagaciter. <span class="pullquote">blockquote test -- Comis iustum magna nisl quis saluto vulputate. Augue eum importunus.</span> Exerci genitus luctus nulla. Paratus proprius quadrum si zelus. Commoveo feugiat letalis singularis tum. Adipiscing blandit consectetuer duis hendrerit ideo interdico metuo si. Brevitas dignissim hos luctus probo suscipere velit vindico vulpes. Distineo saepius suscipit tum. Iaceo nimis pagus pneum sagaciter utinam. Blandit mauris pagus paulatim populus. Distineo loquor modo nulla rusticus saepius uxor vicis. Augue ibidem luptatum nobis occuro odio verto.</blockquote>

<ul>
<li>test</li>
<li><span class="pullquote">list test</span></li>
<li>test</li>
</ul>

<table><tbody><tr><td><span class="pullquote">table test</span></td></tr></tbody></table>
lliss’s picture

Status: Needs review » Fixed

This has been committed.

Status: Fixed » Closed (fixed)

Automatically closed -- issue fixed for 2 weeks with no activity.