W3C Compliance
Jay Matwichuk - October 2, 2008 - 06:30
| Project: | Flash Node |
| Version: | 6.x-3.1 |
| Component: | Code |
| Category: | bug report |
| Priority: | normal |
| Assigned: | shaggy_machine |
| Status: | needs review |
Jump to:
Description
I am using Flash Node and SwfTools. Everything works fine, except that when I use the filter to embed the node in other pages, it adds extra
tags to my code, invalidating it. Here is the code I am getting:
<p><div class="swftools-wrapper swftools-swf"><div id="swfobject2-id-12229286621" class="swftools swfobject2">
<p>You are missing some Flash content that should appear here! Perhaps your browser cannot display it, or maybe it did not initialise correctly.</p>
</div>
<script type="text/javascript">
swfobject.embedSWF("http://qqeigo.com/system/files/flash/Qenglish_3_audio_changed.swf", "swfobject2-id-12229286621", "280", "220", "8", "", { "width": "280", "height": "220" }, { "swliveconnect": "default", "play": "true", "loop": "false", "menu": "false", "quality": "autohigh", "scale": "showall", "align": "l", "salign": "tl", "wmode": "transparent", "bgcolor": "#FFFFFF", "version": "8", "allowfullscreen": "true", "width": 280, "height": 220, "base": "http://qqeigo.com/system/files/", "allowFullScreen": null, "": "", "true;": null, "src": "http://qqeigo.com/system/files/flash/Qenglish_3_audio_changed.swf" }, { "id": "swf12229286621" });
</script>
</div></p>The opening
tag at the start, and the closing
tag at the end are no good, because there is a < div> tag that goes inside that
tag. Divs cannot be in Ps.
I believe that the filter is what's causing this, for if I go to the actual node itself (node type = flash), the p tags aren't there, and my code validates. It's only on pages with the filter that these p tags appear.
Thank you for your help (and your good module!)
#1
Sorry, I tried to add < p > tags to my code, but they all disappeared. Look at the irregular line breaks - those were originally < p > tags.
#2
You're right - and this was something I fixed for SWF Tools recently, so I just ported a version of the fix from there to the HEAD branch for flash node if you want to test it out (you'll need to pick it up from CVS).
The problem does only occur with the filter, and with the modified code it will strip the <p></p> tags if they wrap around the macro.
In practical terms this means you can get valid code from a macro that appears on a line by itself, where the other filters may have added line breaks. However, you can't get valid code from macros that appear inline with text. Basically, the substituted code for the flash includes a div, and div isn't valid inside a p tag. In practice the page will render, but it won't validate.
I'm assuming that in most cases the macro is on a line by itself. If you really want in-line flash then you'd need to use a full HTML input format so you can control the placement of p tags relative to the flash.
Although not a "patch" since I committed to HEAD I am changing the status to Patch - Code needs review since there is a solution ready for testing.
#3
I think I found a valid code for W3C Compliance. It works and validates my swf files and just need to change a few lines.
Based changes on this article How to correctly insert a Flash into XHTML. This is a better method than Flash Satay proposed by "A List Apart".
I changed this lines (1066-1075) :
// Use t() to substitute parameters in to basic Flash markup$output = t('<div class="flashnode"><object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0" width="!width" height="!height" id="myMovieName"><param name="allowScriptAccess" value="sameDomain" /><param name="allowFullScreen" value="true" /><param name="movie" value="!filepath" /><param name="quality" value="high" /><param name="flashvars" value="!flashvars" /><param name="base" value="!base" /><embed src="!filepath" allowScriptAccess="sameDomain" allowFullScreen="true" quality="high" width="!width" height="!height" flashvars="!flashvars" name="myMovieName" align="" type="application/x-shockwave-flash" base="!base" pluginspage="http://www.macromedia.com/go/getflashplayer" /></object></div>',
array(
'!height' => $flashnode['height'],
'!width' => $flashnode['width'],
'!filepath' => file_create_url($flashnode['filepath']),
'!flashvars' => $flashnode['flashvars'],
'!base' => $flashnode['base'],
)
);
For this:
// Use t() to substitute parameters in to basic Flash markup
$output = t('<div class="flashnode"><!--[if !IE]> -->
<object type="application/x-shockwave-flash"
data="!filepath" width="!width" height="!height">
<!-- <![endif]-->
<!--[if IE]>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000"
codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=9,0,0,0"
width="!width" height="!height">
<param name="movie" value="!filepath" />
<!--><!---->
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="quality" value="high" />
<param name="flashvars" value="!flashvars" />
<param name="base" value="!base" />
<param name="loop" value="true" />
<param name="menu" value="false" />
</object>
<!-- <![endif]-->
</div>',
array(
'!height' => $flashnode['height'],
'!width' => $flashnode['width'],
'!filepath' => file_create_url($flashnode['filepath']),
'!flashvars' => $flashnode['flashvars'],
'!base' => $flashnode['base'],
)
);
This code it is valid for W3C but I don't know if needs a review yet. I didn't test it so much but for this moment, it works. Now I have my Drupal site offline but you could see this method working very soon on SM Design
#4
I try it and it works fine
good job
#5
The suggested code looks about right - I recently rewrote SWF Tools "direct embed" method to use a version of the code above (can't recall offhand where I found the link) but I know it uses the trick to work around IE.
I didn't get round to migrating the code to flash node as I thought I would test it out a bit on SWF Tools first! I've not heard anyone complain, so I'll port it back officially sometime in the near (?) future.
In the meantime, the above replacement should work ok!
#6
Is this still an issue in the 3.x versions?