From mboxrd@z Thu Jan  1 00:00:00 1970
From: Eric Abrahamsen <eric@ericabrahamsen.net>
Subject: Re: Getting checkboxes in HTML output?
Date: Fri, 29 Nov 2013 08:47:52 +0700
Message-ID: <87haawgerb.fsf@ericabrahamsen.net>
References: <20131127154534.GA12765@pdavismbp15.iscinternal.com>
	<8738mhal2d.fsf@alphaville.bos.redhat.com>
	<20131127182059.GB12765@pdavismbp15.iscinternal.com>
	<20131128133329.GA28945@eyeBook> <87vbzc9rmj.fsf@Rainer.invalid>
	<86haawtdya.fsf@somewhere.org>
Mime-Version: 1.0
Content-Type: text/plain
Return-path: <emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org>
Received: from eggs.gnu.org ([2001:4830:134:3::10]:57327)
	by lists.gnu.org with esmtp (Exim 4.71)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1VmDA0-0002AS-MC
	for emacs-orgmode@gnu.org; Thu, 28 Nov 2013 20:46:31 -0500
Received: from Debian-exim by eggs.gnu.org with spam-scanned (Exim 4.71)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1VmD9u-0004TY-HO
	for emacs-orgmode@gnu.org; Thu, 28 Nov 2013 20:46:24 -0500
Received: from plane.gmane.org ([80.91.229.3]:44971)
	by eggs.gnu.org with esmtp (Exim 4.71)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1VmD9u-0004TU-Ac
	for emacs-orgmode@gnu.org; Thu, 28 Nov 2013 20:46:18 -0500
Received: from list by plane.gmane.org with local (Exim 4.69)
	(envelope-from <geo-emacs-orgmode@m.gmane.org>) id 1VmD9s-0004H8-QK
	for emacs-orgmode@gnu.org; Fri, 29 Nov 2013 02:46:16 +0100
Received: from 223.204.249.74 ([223.204.249.74])
	by main.gmane.org with esmtp (Gmexim 0.1 (Debian))
	id 1AlnuQ-0007hv-00
	for <emacs-orgmode@gnu.org>; Fri, 29 Nov 2013 02:46:16 +0100
Received: from eric by 223.204.249.74 with local (Gmexim 0.1 (Debian))
	id 1AlnuQ-0007hv-00
	for <emacs-orgmode@gnu.org>; Fri, 29 Nov 2013 02:46:16 +0100
List-Id: "General discussions about Org-mode." <emacs-orgmode.gnu.org>
List-Unsubscribe: <https://lists.gnu.org/mailman/options/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=unsubscribe>
List-Archive: <http://lists.gnu.org/archive/html/emacs-orgmode>
List-Post: <mailto:emacs-orgmode@gnu.org>
List-Help: <mailto:emacs-orgmode-request@gnu.org?subject=help>
List-Subscribe: <https://lists.gnu.org/mailman/listinfo/emacs-orgmode>,
	<mailto:emacs-orgmode-request@gnu.org?subject=subscribe>
Errors-To: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
Sender: emacs-orgmode-bounces+geo-emacs-orgmode=m.gmane.org@gnu.org
To: emacs-orgmode@gnu.org

"Sebastien Vauban" <sva-news@mygooglest.com>
writes:

> 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).

This seems like a much nicer solution -- JS seems semantically more
"right", since what you're doing is toggling display state, not actually
preparing content to input to a form...