Only s Each element on this page is a SPAN element. No elements are dynamically added to the page. Styles Each SPAN specifies styling properties through the `style` attribute. This is bold This is italicized These effects are impossible Show Code ```html This is bold This is italicized These effects are impossible ``` Line Breaks Newline characters are normally treated like spaces. They do not force a line break. `BR` elements force line breaks. Normally, newline characters do not actually break lines. They are treated like space characters. Show Code ```html Normally, newline characters do not actually break lines. They are treated like space characters. ``` When SPAN elements have the styling property white-space: pre-wrap, newline characters in the HTML code are treated as line breaks. With pre-wrap, newline characters actually break lines and are not treated like space characters Show Code ```html With pre-wrap, newline characters actually break lines and are not treated like space characters ``` CSS Tables CSS Level 3 supports special values for the `display` styling property: Value Behavior table Acts like TABLE table-row Acts like TR table-cell Acts like TD Show Code ```html Value Behavior table Acts like TABLE ``` Using these special style properties, SPAN elements can create simple table layouts. Unfortunately there is no equivalent of `colspan` and `rowspan` ("merge cells" in Excel parlance) Images Images can be added to pages using the `background-image` inline style. To ensure spans are displayed, the `width`, `height` and `display` attributes are set: Show Code ```html ``` Dynamic Elements Inline event handlers allow for some scripting without introducing explicit SCRIPT tags. The following example uses the `onclick` inline event handler to increment a counter: The blue span has been clicked 0 times Show Code ```html 0 ``` Effectuating `onload` SPAN elements do not receive a `load` event. Instead, this page uses a `contenteditable` SPAN with an `autofocus` attribute. This ensures the `onfocus` inline handler is called. If multiple elements have the `autofocus` attribute, only the first element will receive focus. To simplify the page, the `contenteditable autofocus` SPAN will send a synthetic double click (`dblclick`) event to each SPAN element on the page before hiding itself: The relevant SPAN is at the top of the page (line 6 in the source). If it were placed here, the browser would scroll to this SPAN. Show Code ```html <span contenteditable autofocus onfocus="(function(){ [...document.getElementsByTagName('SPAN')].forEach(function(n) { var evt = document.createEvent('MouseEvents'); evt.initEvent('dblclick', true, true); n.dispatchEvent(evt); }); event.target.style.visibility = 'hidden'; })()"> ``` Within the `ondblclick` inline handler, the SPAN DOM element can be referenced with the `target` property of the `event` global. The following example shows the current time. The `ondblclick` event handler uses `setInterval` to set up a loop that updates the time. Clearing the `ondblclick` property ensures that a real double click will not invoke the original handler. The time is now Show Code ```html <span style="font-family: monospace" ondblclick="(function() { var last = new Date().toString(), tgt = event.target; tgt.innerText = last; setInterval(function() { var cur = new Date().toString(); if(last != cur) tgt.innerText = last = cur; }, 100); tgt.ondblclick = null; })()"> ``` Emulating CSS Classes Within the `onfocus` handler of the `autofocus` SPAN, every SPAN element on the page is visited. The `classList` property is a list of class names. Code can manually apply styling properties. The code blocks that are displayed with the "Show Code" buttons use the `codeblock` class. Show Code ```html <span contenteditable autofocus onfocus="(function(){ [...document.getElementsByTagName('SPAN')].forEach(function(n) { /* configure 'codeblock' spans */ if(n.classList.contains('codeblock')) { var S = n.style; S['font-family'] = 'monospace'; S['display'] = 'none'; } })()"> ``` Fetching Data The `ondblclick` handler can fetch data. The following example fetches a text file: The current version of SheetJS Community Edition is Show Code ```html ``` Editable Elements The `contenteditable` attribute allows users to edit the content of SPAN elements. An `input` event is dispatched when the content has changed. The following example includes one `contenteditable` SPAN and one non-editable SPAN. The `oninput` event handler of the first SPAN changes the `innerText` property of the second SPAN. Click the text span below and start typing: Click here and start typing! The following span will update when the previous span is edited: Edit the previous span External Scripts External scripts can be fetched and evaluated using `eval`. The following example fetches the SheetJS SSF Library and displays the version number. The current version of the SheetJS SSF number formatting library is Show Code ```html ``` This example uses the SheetJS SSF Library to format values. The SPAN elements with green borders are editable. When either SPAN is changed, the "Number Value" SPAN content is interpreted as a JS `Number` and formatted using the Format Code. The "Formatted Text" is automatically calculated from the "Format Code" and "Number Value". Try setting the "Format Code" to #,##0.00 and the value to 314159.265 Format Code $0.00 Number Value 3.5 Formatted Text $3.50 SheetJS LLC has been "making sheet happen" with creative use of HTML, CSS and JS since 2012. If pushing the limits of the web tickles your fancy, consider joining us!