Validating custom HTML5 data- attributes

Post by **vsteller** » Tue Dec 25, 2012 8:56 pm

Hello there,
is there any way to avoid validation errors regarding HTML5's supported custom data- attributes?

The following is valid HTML5 code:

Code: Select all

<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

    <head>

        <title></title>

    </head>

    <body>

        <div data-test="value"/>

    </body>

</html>

But Oxygen displays the following error message:

E [Jing] attribute "data-test" not allowed here; expected attribute "accesskey", "aria-activedescendant", "aria-atomic", "aria-autocomplete", "aria-busy", "aria-checked", "aria-controls", "aria-describedby", "aria-disabled", "aria-dropeffect", "aria-expanded", "aria-flowto", "aria-grabbed", "aria-haspopup", "aria-hidden", "aria-invalid", "aria-label", "aria-labelledby", "aria-level", "aria-live", "aria-multiline", "aria-multiselectable", "aria-orientation", "aria-owns", "aria-posinset", "aria-pressed", "aria-readonly", "aria-relevant", "aria-required", "aria-selected", "aria-setsize", "aria-sort", "aria-valuemax", "aria-valuemin", "aria-valuenow", "aria-valuetext", "class", "contenteditable", "contextmenu", "dir", "draggable", "dropzone", "hidden", "id", "lang", "ns1:type", "ns2:alphabet", "ns2:ph", "onabort", "onblur", "oncanplay", "oncanplaythrough", "onchange", "onclick", "oncontextmenu", "ondblclick", "ondrag", "ondragend", "ondragenter", "ondragleave", "ondragover", "ondragstart", "ondrop", "ondurationchange", "onemptied", "onended", "onerror", "onfocus", "oninput", "oninvalid", "onkeydown", "onkeypress", "onkeyup", "onload", "onloadeddata", "onloadedmetadata", "onloadstart", "onmousedown", "onmousemove", "onmouseout", "onmouseover", "onmouseup", "onmousewheel", "onpause", "onplay", "onplaying", "onprogress", "onratechange", "onreadystatechange", "onreset", "onscroll", "onseeked", "onseeking", "onselect", "onshow", "onstalled", "onsubmit", "onsuspend", "ontimeupdate", "onvolumechange", "onwaiting", "role", "spellcheck", "style", "tabindex", "title", "xml:base", "xml:lang" or "xml:space" (with xmlns:ns1="http://www.idpf.org/2007/ops" xmlns:ns2="http://www.w3.org/2001/10/synthesis")

Im using the default document type associations shipped with OxygenXML 14.1. I think this version by default uses Epub3 schemas (RelaxNG based) to validate HTML5.

Is there any way to work around this issue?

Thanks in advance,
vivian

Post by **Radu** » Thu Dec 27, 2012 10:28 am

Hi Vivian,

Oxygen 14.2 will no longer report these extension attributes as errors. It will probably be released in a couple of months in the spring of 2013.

Such a fix unfortunately cannot be made by modifying the Relax NG schemas because you cannot specify in any schema language that a certain attribute which has a name starting with a certain prefix should be skipped from validation or validated in a certain way. We had to make the fix in the Relax NG parser Java code. So I cannot give you a workaround for now.

Regards,
Radu

Post by **vsteller** » Fri Dec 28, 2012 1:23 pm

Thanks, very much for the prompt reply.

In my opinion, this situation is really bad. Why so ever is the W3C releasing a recommendation this way? Why do they break validation support with any major schema language, force any tool vendor to change parsing algorithms... that's really disappointing.
Btw. custom data attributes are really bad design anyway: why custom names? What about naming clashes across frameworks? Why did we introduced namespaces or nested elements?
In this way, HTML5 is a step back but even worse that this train can't be stopped anymore.

Anyway, all the best for the next year!
Vivian

Post by **Radu** » Fri Dec 28, 2012 3:03 pm

Hi Vivian,

We build an XML editor so we couldn't agree with you more.

Happy new year.
Regards,
Radu

Post by **Radu** » Thu Feb 14, 2013 3:27 pm

Hi Vivian,

Oxygen 14.2 was just released and it should ignore for validation the data- attributes.

Regards,
Radu

Post by **kdolan** » Thu Feb 14, 2013 11:27 pm

Radu,

I just downloaded 14.2 and loaded up my HTML 5 doc full of data- attributes into the 14.2 version.
Sadly, the margin lighted up bright red, as usual, for rows with the "data-" attributes.

Error: E [Xerces] Attribute "data-role" must be declared for element type "div".

- Karen

Post by **george** » Thu Feb 14, 2013 11:36 pm

Hi Karen,

Please make sure you add

Code: Select all


<!DOCTYPE html>

at the top of your document to allow oXygen know that is an HTML5 document. By default the validation is performed against the XHTML DTD and thus the reported problem.
If you do not want to add this declaration there is a way to have oXygen default XHTML validation set to validate XHTML5 but you should do this only if you cannot use the above solution.

Regards,
George

Post by **kdolan** » Thu Feb 14, 2013 11:42 pm

George,
Thank you, that worked! I changed <html> to <!DOCTYPE html>
Karen

Post by **george** » Thu Feb 14, 2013 11:58 pm

Hi Karen,

I am not sure I follow what change you made - the <html> root element should not be deleted, you only need to add the HTML5 doctype declaration to your document.

Regards,
George

Post by **vsteller** » Fri Feb 15, 2013 2:04 pm

Thanks, folks - this works nicely!

Anyway: I've two other validation issues, may be you can help out:
* Oxygen claims that the tag "<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />" is not a valid header tag. Not sure, what the (X)HTML spec sais about this, but I think it is common practice used by many modern frameworks such as Twitter Bootstrap et al. Can we do anything about it, somehow?
* I've custom tags (for server side processing) in a non-html namespace in my HTML5 document. Can I get rid of these messages somehow, or even better integrate another schema to validate these custom elements? (I think NVDL is the technology of choice here, right? Can NVDL be used with HTML5 validation in Oxygen?)

Thanks very much!
Cheers,
vivian

Post by **george** » Fri Feb 15, 2013 3:49 pm

Hi Vivian,

Actually oXygen uses NVDL also now for validation. The NVDL script is located in
"[oXygen]/frameworks/xhtml/xhtml5 (epub3)/epub-xhtml-30.nvdl" and you can modify it to ignore content in a specified namespace by replacing the content of the above NVDL script with

Code: Select all


<?xml version="1.0" encoding="UTF-8"?>

<rules xmlns="http://purl.oclc.org/dsdl/nvdl/ns/structure/1.0" startMode="html">

  <mode name="html">

    <namespace ns="http://www.w3.org/1999/xhtml">

      <validate schema="epub-xhtml-30.rnc" schemaType="application/relax-ng-compact-syntax"

        useMode="attach"/>

      <validate schema="epub-xhtml-30.sch" useMode="attach"/>

    </namespace>

  </mode>

  <mode name="attach">

    <anyNamespace>

      <attach/>

    </anyNamespace>

    <namespace ns="http://your.ns.here/" match="attributes elements">

      <unwrap/>

    </namespace>

  </mode>

</rules>

If you use the Show Definition action from the contextual menu of the http-echiv attribute in your HTML5 document oXygen will open the schema definition for you. That should be "[oXygen]/frameworks/xhtml/xhtml5 (epub3)/mod/html5/html5-document-30.rnc" at the following fragment

Code: Select all


   html5.meta.http-equiv.attr = attribute http-equiv { html5.meta.http-equiv.attr.content }

   html5.meta.http-equiv.attr.content = xsd:string { pattern = "([Dd][Ee][Ff][Aa][Uu][Ll][Tt]\-[Ss][Tt][Yy][Ll][Ee])|([Rr][Ee][Ff][Rr][Ee][Ss][Hh])" }

You may want to remove the pattern constraint or update the pattern to match also your value. For example if you remove the constraint then the schema fragment above should be replaced with

Code: Select all


   html5.meta.http-equiv.attr = attribute http-equiv { html5.meta.http-equiv.attr.content }

   html5.meta.http-equiv.attr.content = xsd:string

Best Regards,
George

Post by **vsteller** » Fri Feb 15, 2013 4:11 pm

Thanks, very much, George, this works great and helps a lot!

I'd have one last question to make the scenario really perfect: about Code Completion.

Let's say I've the following HTML5 snippet with my custom namespaced elements:

Code: Select all


<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml" xmlns:custom="http://custom.ns.here/">

    <head>

        ...

    </head>

    <body>

        <h1>Hello World!</h1>

        <custom:element attribute="value">

              Custom Stuff goes here.

        </custom:element>

    </body>

</html>

Can I trigger Oxygen somehow to offer code completion for elements with the custom namespace according to an XSD Schema, e.g. custom.xsd?
I think this works for single namespace'd documents by simply attaching the schema to the document's root element, right? How about NVDL scenarios and code completion?

Thanks very much for your help in advance!
Cheers,
vivian

Post by **george** » Fri Feb 15, 2013 4:21 pm

It depends on how you want to validate that, if it can contain XHTML content or content from another namespace. If we have a simple case when you have content from that namespace only and you do not want to embed other content there then replace the unwrap action (which you can read like ignore) with a validate action pointing to your XML Schema:

Code: Select all


<?xml version="1.0" encoding="UTF-8"?>

<rules xmlns="http://purl.oclc.org/dsdl/nvdl/ns/structure/1.0" startMode="html">

  <mode name="html">

    <namespace ns="http://www.w3.org/1999/xhtml">

      <validate schema="epub-xhtml-30.rnc" schemaType="application/relax-ng-compact-syntax"

        useMode="attach"/>

      <validate schema="epub-xhtml-30.sch" useMode="attach"/>

    </namespace>

  </mode>

  <mode name="attach">

    <anyNamespace>

      <attach/>

    </anyNamespace>

    <namespace ns="http://your.ns.here/" match="attributes elements">

      <validate schema="custom.xsd"/>

    </namespace>

  </mode>

</rules>

and make sure you have the custom.xsd schema available and defining correctly the targetNamespace to match the namespace/@ns attribute value, in the above case that is "http://your.ns.here/".

oXygen looks inside the NVDL script and extracts all the schemas from there and uses them for content completion.

Best Regards,
George

Post by **vsteller** » Fri Feb 15, 2013 4:40 pm

Cool, this also works nicely.

However, if I now hit "Ctrl+Space" within

Code: Select all

<custom:element <cursor>></custom:element>

Oxygen offers *all* HTML attributes as well... can I somehow tweak Oxygen to only offer the attributes specified in my schema?

And well, it sounded like you wanted me to tell the full story:

It depends on how you want to validate that, if it can contain XHTML content or content from another namespace. If we have a simple case when you have content from that namespace only and you do not want to embed other content there then replace the unwrap action

What if we don't have the simple case?

In fact I'd be great if I could restrict the content of custom to be HTML again... any hint on how to do this?

BTW, thanks very much for the exemplary, prompt support!

Post by **george** » Fri Feb 15, 2013 6:45 pm

I will look into the content completion part but for NVDL the idea was to offer as much as we can and then have that highlighted if it is invalid.

The script below performs two actions when it encounters a section in your namespace:
1. it ignores that and processes nested sections with the attachXHTML mode, attaching sections in other namespace to the original validation against the XHTML schema and ignoring possible nested sections in your namespace
2. it triggers a new validate action that uses the mode myNs that attaches any descendant section in your namespace while ignoring anything else

Code: Select all


<?xml version="1.0" encoding="UTF-8"?>

<rules xmlns="http://purl.oclc.org/dsdl/nvdl/ns/structure/1.0" startMode="html">

  <mode name="html">

    <namespace ns="http://www.w3.org/1999/xhtml">

      <validate schema="epub-xhtml-30.rnc" schemaType="application/relax-ng-compact-syntax"

        useMode="attach"/>

      <validate schema="epub-xhtml-30.sch" useMode="attach"/>

    </namespace>

  </mode>

  <mode name="attach">

    <anyNamespace><attach/></anyNamespace>

    <namespace ns="http://your.ns.here/">

      <unwrap useMode="attachXHTML"/>

      <validate schema="custom.xsd" useMode="myNs"/>

    </namespace>

  </mode>

  <mode name="attachXHTML">

    <anyNamespace><attach/></anyNamespace>

    <namespace ns="http://your.ns.here/"><unwrap/></namespace>

  </mode>

  <mode name="myNs">

    <namespace ns="http://your.ns.here/"><attach/></namespace>

    <anyNamespace><unwrap/></anyNamespace>

  </mode>

</rules>

Regards,
George

Post by **george** » Fri Feb 15, 2013 7:03 pm

The content completion issue seems to be related to how the attributes are defined in the schema for XHTML, that is in the epub-xhtml-30.rnc file. If I replace the validate action

Code: Select all


      <validate schema="epub-xhtml-30.rnc" schemaType="application/relax-ng-compact-syntax"

        useMode="attach"/>

with

Code: Select all


      <validate schema="http://www.w3.org/1999/xhtml/xhtml.rng"

        useMode="attach"/>

then the content completion does not offer XHTML attributes anymore.
I am afraid I have not identified exactly what triggers this behavior.

Regards,
George

Validating custom HTML5 data- attributes

Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes

Re: Validating custom HTML5 data- attributes