Re: Getting checkboxes in HTML output?

[Peter Davis <pfd@pfdstudio.com>]

On 11/29/13, 11:11 AM, Rick Frankel wrote:
> On 2013-11-28 16:58, Matt Price wrote:
>> On Thu, Nov 28, 2013 at 4:26 PM, Sebastien Vauban
>> <sva-news@mygooglest.com> wrote:
>> Achim Gratz wrote:
>> Rick Frankel writes:
>> For xhtml compatibility, it would need to be 'checked="checked"'. I've
>> done a quick look at the html dtd, and i does look like input elements
>> are allowed outside of forms, but i would need to double
>> check... Also, the fallback to "[-]" for the partially checked state
>> is a bit inconsistent, perhaps changing background color or other
>> attributre of the checkbox would be better.
>>
>> I'd much prefer if you'd be using character entities for that since you
>> can't do any input on the HTML anyway (WHITE MEDIUM SQUARE, SQUARE WITH
>> LOWER RIGHT DIAGONAL BLACK and BLACK MEDIUM SQUARE look like good
>> candidates).  That probably makes it UTF-8 only since I don't think
>> these symbols are defined for plain (X)HTML, so for other encodings
>> things should probably stay as they are.
>>
>> FWIW, here's what I do for the HTML export:
>>
>> In JS:
>>
>> #+begin_src js
>> $(function () {
>> $('li > code:contains("[X]")')
>> .parent()
>> .addClass('checked')
>> .end()
>> .remove();
>> $('li > code:contains("[-]")')
>> .parent()
>> .addClass('halfchecked')
>> .end()
>> .remove();
>> $('li > code:contains("[ ]")')
>> .parent()
>> .addClass('unchecked')
>> .end()
>> .remove();
>> });
>> #+end_src
>>
>> In CSS:
>>
>> #+begin_src css
>> li.checked {
>> list-style-image: url('../images/checked.png');
>> }
>>
>> li.halfchecked {
>> list-style-image: url('../images/halfchecked.png');
>> }
>>
>> li.unchecked {
>> list-style-image: url('../images/unchecked.png');
>> }
>> #+end_src
>>
>> with 3 nice pictures of green V, red X, and blue || (line "pause" on
>> recorders).
>>
>>
>>
>> so, I don't know if I'm the only one here who feels this way, but I
>> would like to be able to export to an HTML file with ACTUAL HECKBOXES
>> that I cna check off, say on a phone, when I put the milk in the
>> shopping art, or pack the swim goggles in the vacation bag, or
>> whatever.  Maybe though I should be thinking in terms of some other
>> export application, remember the milk or something.  Am I describing a
>> different use case than other users here, perhaps?
>
> My 3 cents:
>
> I don't see that active checkboxes would help since i don't see a use
> case where you can save the html back with the modified input. The
> github usecase mentioned in anothre thread requires a bunch of
> javascript to work (and write-out the modified file).
>
> While Sebastien's solution is visually appealing, i don't think
> requiring image assets is viable for the core exporter (note that it
> could be done w/o javascript, another dependency i would like to
> avoid).
>
> I've attached an html file which shows the various possible options. My
> comments:
>
> 1. As mentioned above, I don't see active checkboxes as useful
> since the modified state is transient.
> 2. I don't really like the disabled checkboxes visually.
> 3. Either of the other two approaches (the list item style, which
> parallels Sebastien's approach w/o using images) works for me.
> Visually I like the list item style solution, but doesn't really
> make the intent clear.
>
> So, my vote is to change the exporter to use the BALLOT BOX and BALLOT
> BOX WITH CHECK instead of the ascii character currently used and
> indicate partially checked boxes ([-]) with greyed text.
>
> Opinions?
>
> rick
>

Thanks for the handy comparison page, Rick. Visually, I'm happy with 
either actual HTML <input ...> checkbox elements or the Unicode BALLOT 
BOX and BALLOT BOX WITH CHECK characters. Semantically, I suppose it's 
better to avoid having active input elements, since, as you point out, 
they're completely transient, and so potentially misleading.

Unfortunately, I don't think any of the "partial" options is very clear. 
They graying out is not particularly clear. But I could live with it if 
no better alternatives are found.

-pd

-- 
----
Peter Davis
The Tech Curmudgeon
www.techcurmudgeon.com