Forum OpenACS Q&A: etp and automatic + uniform css/html tagging

1: etp and automatic + uniform css/html tagging

Posted by David Kuczek on 09/16/03 04:33 PM

I would like to layout the text that is being entered into etp with proper and uniform css/html tags.

I would like to have something similar to what Lars uses for his blogger: The automatic JavaScript inserts. But maybe something that also works for Mozilla/Netscape.

What I would like to see for the beginning ...

### 3 different kinds titles: Top, Sub_1, Sub_2

### 3 corresponding contents: Top_Content, Sub_1_Content, Sub_2_Content ... This would be a description below top or the main text below Sub_1.

### 1 general list.

### 1 general table with variable columns and rows.

###### Image inserts from Photo-Album

###### File inserts from File-Storage

###### Links (External, Internal)

What would be the most up to date and cross browser css examples?

I hope that I expressed myself clearly

Cheers

2: Re: etp and automatic + uniform css/html tagging (response to 1)

Posted by Tom Jackson on 09/16/03 06:08 PM

Try out the Tigris Style Sheets. Note that they do not forgo tables, because css doesn't really address side by side columns, without major tweaking at least. But this is a good example of how to use style sheets to get effects without inline images.

3: Re: etp and automatic + uniform css/html tagging (response to 2)

Posted by Alfred Werner on 09/16/03 06:22 PM

Not sure if you're looking for good stylesheets or a way to implement what Lars does with Blogger, but my favorite site for evaluating CSS features is http://www.csszengarden.com - you can see different style sheets on the site itself - everything is pure CSS - and the variations are IMPRESSIVE :)

4: Re: etp and automatic + uniform css/html tagging (response to 1)

Posted by David Kuczek on 09/16/03 06:35 PM

I am actually looking for both... Examples how to do it right and cross browser compliant + some gpl software/javascript that I can use with the main etp text input field...

5: Re: etp and automatic + uniform css/html tagging (response to 4)

Posted by Bart Teeuwisse on 09/16/03 07:13 PM

David,

from my experience it is from easy to create cross browser compliant
CSS based pages. There are many differences and idiosyncrasies between
even the most recent versions of Mozilla, IE and Opera. Not to mention
the differences within the same browser of the same version across
various platforms.

What might work in one browser, on one page might not necessary work
on a different page using the same CSS classes an IDs but with
(slightly) different HTML.

Now, don't get me wrong, I do think that CSS is the way to go. But be
aware that CSS support even in today's browsers fluctuates
significantly.

Creating a style sheet for ETP that works with all ETP content will
require a conservative approach. Stick to CSS 1 where possible as
browsers support this CSS version the best. And even then you'll have
to test your style sheet extensively.

Ask your self which browsers and platforms you intent to support.

/Bart

6: Re: etp and automatic + uniform css/html tagging (response to 1)

Posted by Andrei Popov on 09/22/03 06:57 PM

David,

I am not sure I 100% follow -- are you saying that you want to just apply consistent stylesheet, or that you want to parse textarea feed, in a manner similar to that done by txt2html (http://txt2html.sourceforge.net/), and then apply CSS/HTML to it?

I suppose the latter.

In which case it's a question of doing something that is similar to Wiki process, is it not?

On a subject of consistency in look and browser behavior -- I don't agree that the same style on a different HTML may give you different results on the same browser. No. The only varioable part in this whole equation is the browser -- other things are constants. If IE 5 is brain-dead about something -- it is consistently brai-dead about it.

Also, using the @import trick helps to "enrich" a basic CSS1 layout that maybe safer unfitting for an older ot non-compliant browser. Same goes for overloading as in:

P { color: red; }
DIV.notice P { color green; }

7: Re: etp and automatic + uniform css/html tagging (response to 1)

Posted by David Kuczek on 09/22/03 08:28 PM

Hey Andrei,

my dream setup would be one big textarea with an advanced wysiwyg widget. The content would be saved as regular html in the db. The author wouldn't need to know html.

I would tell beginners: Don't define the way different parts of your content are getting displayed, but define what these parts represent. An example structure: Header1, Header2, Content1, Content2, Image1, Image2, Table1, Table2 etc. The author could centrally define and alter the style of each class. As long as the structure is well defined it can easily be exported into xml and be mapped to pdf, docbook and maybe even word etc.

So I don't want to tell people how to format things differently, which is what wiki does, but give them a wysiwyg widget and the content would be saved somehow intelligently.

8: Re: etp and automatic + uniform css/html tagging (response to 1)

Posted by Dave Bauer on 09/22/03 08:47 PM

David,

This is an intersting idea, defining the different elements using CSS class or ids.

Another way to do it would be to define content type attributes for each element of the page.

You'd need to have a seperate form element for each element of the content type though.

9: Re: etp and automatic + uniform css/html tagging (response to 1)

Posted by Dave Bauer on 09/22/03 08:52 PM

What solution you choose depends on how much HTML/CSS you want to teach to your content editors.

My solution, using content type attributes (basically columns in a database table) keeps the structure in an adp template.

This way the CSS information is in the adp template, and is not dependent on the content editor.

10: Re: etp and automatic + uniform css/html tagging (response to 1)

Posted by David Kuczek on 09/22/03 09:27 PM

I wouldn't like to force the author to know html. HTMLArea looks very promising. It is cross browser compatible, supported by a company, GPL and very advanced http://dynarch.com/htmlarea/

I also found the following document interesting: http://www.morphon.com/xmleditor/tutorials1.shtml#d0e141

I am not necessarily sure of how to save it in the db so that it can easily be imported/exported into all kind of different formats and applications.

11: Re: etp and automatic + uniform css/html tagging (response to 7)

Posted by Andrei Popov on 09/23/03 11:07 AM

I would tell beginners: Don't define the way different parts of your content are getting displayed, but define what these parts represent. An example structure: Header1, Header2, Content1, Content2, Image1, Image2, Table1, Table2 etc. The author could centrally define and alter the style of each class. As long as the structure is well defined it can easily be exported into xml and be mapped to pdf, docbook and maybe even word etc.

Hey -- tht's a holy grail of SGML, is it not? And that seems to be *exactly* the thing that tends to repell Joe The User. :) Joe really wants to be able to mess with font settings dilog -- sure Comic Sans looks much better tonight than plain Times, and Garamond Italic looks ah-so-much-sweeter than any breed of Helvetica to his eyes.

So, how to convinve him to only care about *structure*? If I knew -- I'd get most people to use something like XXE for most of their document editing.

This really does look/sound like an interesting thing to do, and getting some sort of neutral XML document storage, that could be displayed for editing in some way easy for a user... HTMLArea or RTE -- both look quite nice in that respect. Of course they both are out of the question for the 4.x browsers... But so is much of CSS2 (and chunks of CSS1).