User:GWicke/DOM structure development

Possible updates for Parsoid/RDFa_vocabulary.

Thumbnails

• rename data-mw to data-rt (round trip). Private to Parsoid; not necessarily in JSON format.
• add data-attribs, a JSON encoding of non-semantic (presentational) attributes. Public and editable. Alternative names: data-json or data-attribs-json?
• represent semantically interesting information as RDFa attributes:

  resource

  The canonical URL of the used image (image page)

  caption

  The caption belonging to this image. Also implied by figcaption really, so questionable if needed.

• Look at http://schema.org/ImageObject, and perhaps map our semantic attributes to those

697 chars:

[[Image:Foo.jpg|thumb|165x164px|left|baseline|Caption content]]
<figure typeof="mw:Thumb" class="thumb tleft thumbinner" style="width: 170px; float: left;"
        data-attribs='{"width":"165px","height":"165px","format":"thumb","halign":"left","valign":"baseline"}'
        data-rt="private round-trip data">
   <a href="/wiki/File:Foo.jpg" class="image">
     <img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Foo.jpg" width="165px" class="thumbimage" alt="Foo.jpg" 
        resource="/wiki/Image:Foo.jpg" />
   </a>
   <a href="/wiki/File:Foo.jpg" class="internal sprite details magnify" title="View photo details"></a>
   <figcaption class="thumbcaption" 
               property="mwt:caption">
        Caption content
   </figcaption>
</figure>

This will normally actually serialize to 797 chars:

[[Image:Foo.jpg|thumb|165x164px|left|baseline|Caption content]]
<figure typeof="mw:Thumb" class="thumb tleft thumbinner" style="width: 170px; float: left;"
        data-attribs="{&quot;width&quot;:&quot;165px&quot;,&quot;height&quot;:&quot;165px&quot;,&quot;format&quot;:&quot;thumb&quot;,&quot;halign&quot;:&quot;left&quot;,&quot;valign&quot;:&quot;baseline&quot;}"
        data-rt="private round-trip data">
   <a href="/wiki/File:Foo.jpg" class="image">
     <img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Foo.jpg" width="165px" class="thumbimage" alt="Foo.jpg" 
        resource="/wiki/Image:Foo.jpg" />
   </a>
   <a href="/wiki/File:Foo.jpg" class="internal sprite details magnify" title="View photo details"></a>
   <figcaption class="thumbcaption" 
               property="mwt:caption">
        Caption content
   </figcaption>
</figure>

Alternative solution without JSON for public attributes (822 chars):

[[Image:Foo.jpg|thumb|165x164px|left|baseline|Caption content]]
<figure typeof="Thumb" vocab="http://mediawiki.org/s/" class="thumb tleft thumbinner" style="width: 170px; float: left;"
        data-rt="private round-trip data">
   <meta property="width" value="165px">
   <meta property="height" value="165px">
   <meta property="format" value="thumb">
   <meta property="halign" value="left">
   <meta property="valign" value="baseline">
   <a href="/wiki/File:Foo.jpg" class="image">
     <img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Foo.jpg" width="165px" class="thumbimage" alt="Foo.jpg" 
        resource="/wiki/Image:Foo.jpg" />
   </a>
   <a href="/wiki/File:Foo.jpg" class="internal sprite details magnify" title="View photo details"></a>
   <figcaption class="thumbcaption" 
               property="caption">
        Caption content
   </figcaption>
</figure>

811 chars:

[[Image:Foo.jpg|thumb|165x164px|left|baseline|Caption content]]
<figure typeof="mw:Thumb" class="thumb tleft thumbinner" style="width: 170px; float: left;"
        data-rt="private round-trip data">
   <meta property="mw:width" value="165px">
   <meta property="mw:height" value="165px">
   <meta property="mw:format" value="thumb">
   <meta property="mw:halign" value="left">
   <meta property="mw:valign" value="baseline">
   <a href="/wiki/File:Foo.jpg" class="image">
     <img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Foo.jpg" width="165px" class="thumbimage" alt="Foo.jpg" 
        resource="/wiki/Image:Foo.jpg" />
   </a>
   <a href="/wiki/File:Foo.jpg" class="internal sprite details magnify" title="View photo details"></a>
   <figcaption class="thumbcaption" 
               property="mw:caption">
        Caption content
   </figcaption>
</figure>

Newlines between meta elements removed: 795 chars

[[Image:Foo.jpg|thumb|165x164px|left|baseline|Caption content]]
<figure typeof="mw:Thumb" class="thumb tleft thumbinner" style="width: 170px; float: left;"
        data-rt="private round-trip data">
   <meta property="mw:width" value="165px"><meta property="mw:height" value="165px"><meta property="mw:format" value="thumb"><meta property="mw:halign" value="left"><meta property="mw:valign" value="baseline">
   <a href="/wiki/File:Foo.jpg" class="image">
     <img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Foo.jpg" width="165px" class="thumbimage" alt="Foo.jpg" 
        resource="/wiki/Image:Foo.jpg" />
   </a>
   <a href="/wiki/File:Foo.jpg" class="internal sprite details magnify" title="View photo details"></a>
   <figcaption class="thumbcaption" 
               property="mw:caption">
        Caption content
   </figcaption>
</figure>

Or, CSS-style? 676 chars:

[[Image:Foo.jpg|thumb|165x164px|left|baseline|Caption content]]
<figure typeof="mw:Thumb" class="thumb tleft thumbinner" style="width: 170px; float: left;"
        data-attribs='width:165px;height:165px;format:thumb;halign:left;valign:baseline;'
        data-rt="private round-trip data">
   <a href="/wiki/File:Foo.jpg" class="image">
     <img src="http://upload.wikimedia.org/wikipedia/commons/0/06/Foo.jpg" width="165px" class="thumbimage" alt="Foo.jpg" 
        resource="/wiki/Image:Foo.jpg" />
   </a>
   <a href="/wiki/File:Foo.jpg" class="internal sprite details magnify" title="View photo details"></a>
   <figcaption class="thumbcaption" 
               property="mwt:caption">
        Caption content
   </figcaption>
</figure>