Prettying up HTML export

#1 Posted: 7/3/2012 12:54:58 PM

1 likes in 4 posts.

Group: User

Hi,

I've been using SMath for a few projects that I am going to share with other people. For simple review (no editing) HTML output seems to be the way to go.

However, the markup right now is a bit messy and hard to edit. The best solution is to use a CSS header instead of specifying style information in each HTML tag. For example, adding a few pixels of padding to the span element makes text with boxes appear more like it does in the original .sm file. Defining the font in the header would also let the user quickly change the appearance of their document.

Example:

Quote

A more advanced approach would be to specify a few classes, like "boxed", that would let the user change the default border color for boxed elements, etc. A little Java script could easily add support for collapsing/uncollapsing Areas, which would be awesome for an HTML document.

It would be great if this approach could be taken in a future version. Thanks for making this awesome tool!

#2 Posted: 7/5/2012 2:15:42 AM

kilele

133 likes in 397 posts.

Group: User

Wrote
A little Java script could easily add support for collapsing/uncollapsing Areas, which would be awesome for an HTML document.

somethink like this ? it's the best script I was able to find as for browsers compatibility
http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

#3 Posted: 7/5/2012 1:09:47 PM

amk

1 likes in 4 posts.

Group: User

Wrote

Wrote
A little Java script could easily add support for collapsing/uncollapsing Areas, which would be awesome for an HTML document.

somethink like this ? it's the best script I was able to find as for browsers compatibility
http://www.dynamicdrive.com/dynamicindex1/navigate2.htm

I don't think it's necessary to save the collapsed state or anything like that. Two very simple JavaScripts could be written that show/hide specific elements:


   <!--
	function show(x) {
		document.getElementById(x).style.display = "block";
		}
		
	function hide(x) {
		document.getElementById(x).style.display = "none";
		}
   // -->

<a onclick="show('area1'">Show</a> | <a onclick="hide('area1'">Hide</a> <hr /><br />
	<div id="area1">
   		<div>stuff that can be toggled on/off</div>
	</div>
<a onclick="show('area2'">Show</a> | <a onclick="hide('area2'">Hide</a> <hr /><br />
	<div id="area2">
   		<div><span>some text that you want to hide<span></div>
	</div>

I didn't include the position information, but that could be pulled from the area toggle in the .sm file, I assume. Also, both buttons are always visible but that could be changed.

EDIT: Actually, there is a problem. Using absolute positions in the document means that the Areas don't collapse, but rather just turn blank. A workaround might be to specify the pixel height of the Area elements, relative-position them, then subtract the initial position from absolute y-values of the elements inside the Area. I don't think is such a quick fix any more, unfortunately.

9/3/2012

I attached a modified .cs file from the SVN repo. Made a few minor changes that clean up the output a little and made it so font changes carry through the whole document; if someone could look over it and then make a commit if they are comfortable with it, that would be great.

SavePageToHTML.zip (1 KiB) downloaded 30 time(s).

SMath Forum

Prettying up HTML export - Messages