HTML5 and WYSIWYG

harlenweb's Avatar

harlenweb

05 Apr, 2012 02:51 PM

The (outdated) html attributes that are generated in 6.8 (align, hspace, vspace, etc.) when content editors style images and tables in the WYSIWYG are not validating under the HTML 5 doctype. Is this fixed in future releases (6.10 or 7)? The validator actually generates errors and not warnings.

  1. 1 Posted by Bradley Wagner on 06 Apr, 2012 08:15 PM

    Bradley Wagner's Avatar

    Hey thanks for posting this. Cascade is doctype agnostic so while HTML5 nor XHTML strict allow it, XHTML transitional does. I definitely think encouraging people to do this with CSS by modifying the WYSIWYG's behavior makes sense going forward.

  2. 2 Posted by harlenweb on 06 Apr, 2012 08:27 PM

    harlenweb's Avatar

    Hi Bradley,

    I apologize, but I'm not sure I understand your response. What do you mean by "modifying WYSIWYG's behavior"? Editors don't supply CSS, so I'm not sure how they might do this (e.g. set the padding on an image or within table cells). Are you suggesting that they shouldn't do this (they would have to abide with a standard CSS padding, e.g.) or are you suggesting that the WYSIYWG might generate CSS?

  3. 3 Posted by Bradley Wagner on 06 Apr, 2012 08:34 PM

    Bradley Wagner's Avatar

    That the WYSIWYG would generate inline styles like we do other places.

  4. 4 Posted by harlenweb on 06 Apr, 2012 08:39 PM

    harlenweb's Avatar

    That would be great - thanks!

    --
    Sara Haradhvala
    Manager, Harlen Web Consulting LLC
    [email blocked]

  5. 5 Posted by harlenweb on 06 Apr, 2012 08:57 PM

    harlenweb's Avatar

    ...and that should solve another issue i ran into where if i set certain table or image properties with css, then the content editor's changes (e.g. hspace on images) wouldn't take effect. the inline styles, however, should properly override the standard styles, so this problem should go away.

  6. 6 Posted by harlenweb on 11 Apr, 2012 05:47 PM

    harlenweb's Avatar

    Hi Bradley,

    What HTML attributes are added by the WYSIWYG (as vspace and hspace are added to img tags)? Do you have a list of these? I'd like to see if these are supported by HTML5, and if they aren't, I'll have to strip them out -- hmm, I wonder why Tidy doesn't do this if you're using an HTML5 doctype. (I assume there is no way to keep editors from entering these attributes in the first place, is there?) For some attributes that are supported by HTML5 (width, height on img tags, e.g.), I may have to strip them out to support a responsive design.

    Sara

  7. 7 Posted by Bradley Wagner on 12 Apr, 2012 04:35 PM

    Bradley Wagner's Avatar

    Sara, sure. Ii thought we had this in our WYSIWYG documentation but it looks like we don't.

    Going from left-to-right and top-to-bottom on the WYSIWYG:

    • subscript - uses <sub> element
    • superscript - uses <sup> element
    • bold - uses <strong> element
    • italic - uses <em> element
    • underline - wraps the content in a <span> with an inline style="text-decoration: underline;" attribute
    • strikethrough - wraps the content in a <span> with an inline style="text-decoration: strikethrough;" attribute
    • alight left - Uses an inline style="text-align: left;"
    • alight center - Uses an inline style="text-align: center;"
    • alight right - Uses an inline style="text-align: right;"
    • alight full - Uses an inline style="text-align: justify;"
    • unordered lists - uses <ul>, <li>
    • ordered lists - uses <ol>, <li>
    • links
      • href attribute for the link
      • title attribute for the title
      • class attribute for a selected class
    • images
      • src for the image source
      • width attribute for the width
      • height attribute for the height
      • vspace attribute for the vertical space
      • hspace attribute for the horizontal space
      • border attribute
      • alt attribute
      • align attribute
    • horizontal rules:
      • width attribute for the width of the rule
      • size for the height
      • noshade attribute for no shadow
      • style attribute for height, width, color, border. Height and width are repeats from the width and size attributes
    • tables:
      • summary attribute for table summary
      • class attribute for a selected CSS class
      • align attribute for alignment
      • cellspacing attribute
      • cellpadding attribute
      • border attribute for simple border width
      • style attribute for width, height, more fine-grained border control
      • <td> elements have valign,align,style, scope attributes
      • <tr> elements have valign,align,style attributes

    Let me know if you have any other questions.

  8. Bradley Wagner closed this discussion on 12 Apr, 2012 04:35 PM.

  9. harlenweb re-opened this discussion on 12 Apr, 2012 04:56 PM

  10. 8 Posted by harlenweb on 12 Apr, 2012 04:56 PM

    harlenweb's Avatar

    Thanks so much, Bradley - this is terrific!

    Sara

    --
    Sara Haradhvala
    Manager, Harlen Web Consulting LLC
    [email blocked]

  11. 9 Posted by harlenweb on 12 Apr, 2012 05:01 PM

    harlenweb's Avatar

    Bradley,

    One other question on this,

    Are there attributes on table td and th tags? I think I ran into some problems with those and HTML5.

    Sara
    --
    Sara Haradhvala
    Manager, Harlen Web Consulting LLC
    [email blocked]

  12. 10 Posted by Bradley Wagner on 12 Apr, 2012 05:08 PM

    Bradley Wagner's Avatar

    Good point. I've updated my above comment to include the attributes on <tr> and <td> elements

  13. Bradley Wagner closed this discussion on 12 Apr, 2012 05:08 PM.

  14. harlenweb re-opened this discussion on 12 Apr, 2012 05:29 PM

  15. 11 Posted by harlenweb on 12 Apr, 2012 05:29 PM

    harlenweb's Avatar

    It looks like the following are deprecated in HTML5:
    (http://www.w3.org/TR/html5-diff/#obsolete-elements)

    images - vspace, hspace, align
    hr - width, size, noshade
    table - summary, align, cellspacing, cellpadding
    td and td - valign, align

    Thanks so much for your help on this. I am hoping to strip these out.

    Sara

  16. 12 Posted by Bradley Wagner on 17 Apr, 2012 01:11 PM

    Bradley Wagner's Avatar

    Thanks Sara,

    It looks like an updated version of the image, table and horizontal rule plugins for TinyMCE do these with styles instead of attributes.

  17. 13 Posted by Bradley Wagner on 17 Apr, 2012 01:14 PM

    Bradley Wagner's Avatar

    Actually the horizontal rule plugin duplicates the styles in the attributes and using an inline style with: height, width, border-width, border-style, border-color, and color

  18. 14 Posted by harlenweb on 23 Apr, 2012 08:53 PM

    harlenweb's Avatar

    Hi Bradley,

    That's good news (a possibility for an updated TinyMCE version). As for the horizontal rule, I guess these would still generate validation errors, and would have to be stripped out with that version as well. This was so helpful - thanks again.

    Sara

  19. 15 Posted by Bradley Wagner on 25 Apr, 2012 03:18 PM

    Bradley Wagner's Avatar

    Definitely, Sara. We'll be evaluating an upgrade to TinyMCE soon and we'll test out the changes to the plugins that generate this markup.

  20. Bradley Wagner closed this discussion on 25 Apr, 2012 03:18 PM.

Comments are currently closed for this discussion. You can start a new one.

Keyboard shortcuts

Generic

? Show this help
ESC Blurs the current field

Comment Form

r Focus the comment reply box
^ + ↩ Submit the comment

You can use Command ⌘ instead of Control ^ on Mac