Skip to content

using microdata and semantic html to represent python objects¤

microdata attributes exist to append metadata to html elements. it is possible to use [microdata] to describe python types, and in doing so we have standard selectors for styling python objects. lists, sequences, and containers can and should be summarized by screen reader technology. the outcome of these codes great accessible representation of common python objects that are assistive to assistive technology users.

image.png

    import midgy

https://www.tpgi.com/making-numbers-in-web-content-accessible/

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/time

%%
## representing constants

there are python constants that have most natural respresentations use the [`data`](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/data)s tag.

```html
<data value="true">True</data>,
<data value="false">False</data>,
<data value="">None</data>,
<style>
data[value] {
    /**recapture the style used in the code editor for the constants.**/
    font-family: monospace;
    color: var(--jp-mirror-editor-keyword-color, green);
    font-weight: bold;
}
</style>
```

representing constants¤

there are python constants that have most natural respresentations use the datas tag.

<data value="true">True</data>,
<data value="false">False</data>,
<data value="">None</data>,
<style>
data[value] {
    /**recapture the style used in the code editor for the constants.**/
    font-family: monospace;
    color: var(--jp-mirror-editor-keyword-color, green);
    font-weight: bold;
}
</style>
True, False, None, 
%%
## representing strings

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp

```html
<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#str">a string representation makes sense as a samp</samp>
<br/>
<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#str" style="--nb-quote-style: var(--nb-single-quote);">a single quoted string</samp>
<style>
:root {
    /**its hard to write quotes inside of html tags so it helps to have constants to use.**/
    --nb-single-quote: "'";
    --nb-double-quote: "\"";
    --nb-quote-style: var(--nb-double-quote);
}
samp[itemtype$="str"] {
    &::before, &::after {content: var(--nb-quote-style);}
}
</style>
```

representing strings¤

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp

<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#str">a string representation makes sense as a samp</samp>
<br/>
<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#str" style="--nb-quote-style: var(--nb-single-quote);">a single quoted string</samp>
<style>
:root {
    /**its hard to write quotes inside of html tags so it helps to have constants to use.**/
    --nb-single-quote: "'";
    --nb-double-quote: "\"";
    --nb-quote-style: var(--nb-double-quote);
}
samp[itemtype$="str"] {
    &::before, &::after {content: var(--nb-quote-style);}
}
</style>
a string representation makes sense as a samp
a single quoted string 
%%
## representing numbers


https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp

```html
<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#int">42</samp>
<br/>
<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#float">3.141596</samp>
```

representing numbers¤

https://developer.mozilla.org/en-US/docs/Web/HTML/Element/samp

<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#int">42</samp>
<br/>
<samp itemscope="" itemtype="https://docs.python.org/3/library/functions.html#float">3.141596</samp>
42
3.141596

representing containers¤

containers allow presenting multiple constants, strings, numbers, or other containers.

%%
### representing lists


```html
<ol itemscope="" itemtype="https://docs.python.org/3/library/functions.html#list">
<li>1</li><li>2</li><li>3</li>
</ol>
<style>
ol[itemtype$="#list"] {
    font-family: mono-space;
    li {
        display: inline-block;
        &:not(:last-child)::after {content: ",";}
    }
    list-style: none;
    &::before {content: "[";}
    &::after {content: "]";}
}
</style>
```

representing lists¤

<ol itemscope="" itemtype="https://docs.python.org/3/library/functions.html#list">
<li>1</li><li>2</li><li>3</li>
</ol>
<style>
ol[itemtype$="#list"] {
    font-family: mono-space;
    li {
        display: inline-block;
        &:not(:last-child)::after {content: ",";}
    }
    list-style: none;
    &::before {content: "[";}
    &::after {content: "]";}
}
</style>
  1. 1
  2. 2
  3. 3
%%
### representing tuples

in this example we introduce the `itemscope` and `itemtype` properties to describe the types of the output.
the outcome is the ability to tailor styling based on specific python types.
lists and tuples are both ordered lists and the `itemtype` attributes provide a way to disambiguate the ordered 
lists from each other.

tuples also have ordered list semantics, but their visual representation differs in the enclosing characters.1

```html
<ol itemscope="" itemtype="https://docs.python.org/3/library/functions.html#tuple">
<li>1</li><li>2</li><li>3</li>
</ol>
<style>
ol[itemtype$="#tuple"] {
    list-style: none;
    font-family: mono-space;
    li {
        display: inline-block;
        &:not(:last-child)::after {content: ", ";}
    }
    &::before {content: "(";}
    &::after {content: ")";}
}
</style>
```

representing tuples¤

in this example we introduce the itemscope and itemtype properties to describe the types of the output. the outcome is the ability to tailor styling based on specific python types. lists and tuples are both ordered lists and the itemtype attributes provide a way to disambiguate the ordered lists from each other.

tuples also have ordered list semantics, but their visual representation differs in the enclosing characters.1

<ol itemscope="" itemtype="https://docs.python.org/3/library/functions.html#tuple">
<li>1</li><li>2</li><li>3</li>
</ol>
<style>
ol[itemtype$="#tuple"] {
    list-style: none;
    font-family: mono-space;
    li {
        display: inline-block;
        &:not(:last-child)::after {content: ", ";}
    }
    &::before {content: "(";}
    &::after {content: ")";}
}
</style>
  1. 1
  2. 2
  3. 3
%%
### representing sets

sets different from lists and tuples because they are unordered. they use braces to wrap the output instead.

```html
<ul itemscope="" itemtype="https://docs.python.org/3/library/functions.html#set">
<li>30</li><li>3</li>
</ul>
<style>
ul[itemtype$="#set"] {
    font-family: mono-space;
    list-style: none;
    li {
        display: inline;
        &:not(:last-child)::after {content: ", ";}
    }
    &::before {content: "{";}
    &::after {content: "}";}
}
</style>
```

representing sets¤

sets different from lists and tuples because they are unordered. they use braces to wrap the output instead.

<ul itemscope="" itemtype="https://docs.python.org/3/library/functions.html#set">
<li>30</li><li>3</li>
</ul>
<style>
ul[itemtype$="#set"] {
    font-family: mono-space;
    list-style: none;
    li {
        display: inline;
        &:not(:last-child)::after {content: ", ";}
    }
    &::before {content: "{";}
    &::after {content: "}";}
}
</style>
  • 30
  • 3
%%
### representing dictionaries

definition lists are from capturing the structure python dictionaries.

```html
<dl itemscope="" itemtype="https://docs.python.org/3/library/functions.html#dict">
<dt>foo</dt><dd>1</dd>
<dt>bar</dt><dd>2</dd>
<dt>baz</dt><dd>3</dd>
</dl>
<style>
dl[itemtype$="#dict"] {
    display: inline;
    dd, dt {
        display: inline;
        float: unset; /** disable weird jupyter float thing**/
    } 
    dt {&::after {content: ": ";}}
    dd {&:not(:last-child)::after {content: ",";}}
    &::before {content: "{";}
    &::after {content: "}";}
}
</style>
```

representing dictionaries¤

definition lists are from capturing the structure python dictionaries.

<dl itemscope="" itemtype="https://docs.python.org/3/library/functions.html#dict">
<dt>foo</dt><dd>1</dd>
<dt>bar</dt><dd>2</dd>
<dt>baz</dt><dd>3</dd>
</dl>
<style>
dl[itemtype$="#dict"] {
    display: inline;
    dd, dt {
        display: inline;
        float: unset; /** disable weird jupyter float thing**/
    } 
    dt {&::after {content: ": ";}}
    dd {&:not(:last-child)::after {content: ",";}}
    &::before {content: "{";}
    &::after {content: "}";}
}
</style>
foo
1
bar
2
baz
3