13 replies [Last post]
Keys88
Keys88's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-5
Joined: 2010-02-19
Posts: 10
Points: 15

Slightly off-topic, but maybe relevant to some css writers:

Is there any program in Mac, short of DreamWeaver, that can do wysiwyg text editing, using the project’s own html/css formating?

KompoZer and SeaMonkey do this, but they produce messy mark-up that gets chaotic with extended editing. WordPress and RapidWeaver do it, but only with problematic templates.

Preview mode, in Coda or Espresso, is helpful -- but can any mid-level program edit content in wysiwyg mode?

Thanks.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

Keys88 wrote: Is there any

Keys88 wrote:

Is there any program in Mac, short of DreamWeaver, that can do wysiwyg text editing, using the project’s own html/css formating?

In my opinion, all so called "wysiwyg" editors are an inappropriate tool for web editing because there is no real "what you get" on the web. The web is not paper and using a paper paradigm for creating web pages is a sure route to trouble.

Stay away from wysiwyg! Write logical semantic html first, without considering layout at all. Then add your CSS to style it so it looks (or sounds!) good. Remember that every browser will show (or speak!) a different version of your page and keep that always in mind.

You want it to be usable and decent looking on any visual browser, with any monitor (remember that some "monitors" do not show your page at all, but rather speak it), at any resolution. Because there's no way to avoid the fact that everybody will see (or not see but hear) your page differently - that's how the web works, and how the web was designed to work.

"Wysiwyg" is a delusion on the web and will only result in big headaches to produce pages that don't work properly.

As said above, in my opinion.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Are you talking about for

Are you talking about for creating web pages or for letting clients edit pages? If it's the latter, look at TinyMCE or CKEditor.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Keys88
Keys88's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-5
Joined: 2010-02-19
Posts: 10
Points: 15

wysiwyg text editing

Thanks for these responses.

I agree about wysiwyg site design. I’m hand-coding my site in html/css/php.

The wysiwyg editor would be for my own writing that I’m adding daily -- roughly like a blog but without blog features like comments and tags. Just pages of a book-in-progress with simple navigation. I’ve tried adapting a WordPress theme, but the WP structure is so complicated with blog features that cutting it down to what I want is more work than hand-coding from scratch.

The missing link is a way to add and edit new writing. I have my template pages, and they work well. I have my articles in php files containing nothing but my paragraphs tagged with a half-dozen of my own defined p and h styles. All I want with an editor is to write and edit fluently in wysiwyg, and save into markup.

The Mac’s Text-Edit and Bean produce clean markup, but only with auto-generated multiple p.class styles, which I would then have to replace with the styles in my own design. KompoZer and SeaMonkey do this (KompoZer has a drop-down menu of the user's own styles), but the code they produce is a mess and it gets worse with extended editing.

Thanks for suggesting TinyMCE and CKEditor. I’ve downloaded them and will see what they do.

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 11 years 45 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

Ed Seedhouse wrote: Stay away

Ed Seedhouse wrote:

Stay away from wysiwyg! Write logical semantic html first, without considering layout at all. Then add your CSS to style it so it looks (or sounds!) good. Remember that every browser will show (or speak!) a different version of your page and keep that always in mind.

As said above, in my opinion.

How can you write html without taking the layout into account? Your html really makes no sense if it's not made with a layout in mind. I'd say draw a layout on paper and then make corresponding html without taking into account specific styling.

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

josephbm91 wrote: How can you

josephbm91 wrote:

How can you write html without taking the layout into account? Your html really makes no sense if it's not made with a layout in mind. I'd say draw a layout on paper and then make corresponding html without taking into account specific styling.

Well, I always appreciate an opposing view if expressed reasonably.

Still, I think you are quite wrong and misunderstand html. There is some history on the web you can look into, and if you do you will find that, first, the inventor of html intended it to be a markup language for meaning, a semantic language, and left presentational and layout elements out altogether.

The introduction of presentational tags by web browsers caused a right mess in the 1990's, and in reaction to this CSS was invented with an intention to again remove presentational elements from html. There has been some progress in this, and most presentational elements are now at least deprecated in strict document types.

HTML is NOT a presentational or layout language, it is a semantic language intended to markup the meaning of a document, not it's presentation or it's layout.

Now of course no one can entirely separate presentation from meaning in the real world. But if you do some research and some serious thinking about html and it's relationship with CSS you will find that it is indeed quite possible to do markup with layout pushed to at least the back of your mind, and that if you do, and understand the concept of semantic markup, the whole process will become a lot easier for you and the resulting web pages will be better and far more robust. AND it has a positive effect on your SEO as well, very slight but I think perfectly real.

I will leave you to a reference to the seminal article "A Dao of Web Design", which explains these ideas quite well, and far better than I have the space and time to do here.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 11 years 45 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

I fully understand separating

I fully understand separating presentation and content, that's simple. I'm asking how can you know when to code a

without knowing where you want it to be located visually? Divs are order dependent, right? How would you know the order to list divs with their corresponding content if you didn't consider the layout?

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

josephbm91 wrote: Divs are

josephbm91 wrote:

Divs are order dependent, right?

No they're not. Ed's right: you should be able to layout the HTML of your document without any thought to its finished design and then apply CSS to achieve whatever layout you require (in some cases you may need to add additional markup to provide hooks to attach different imagery too).

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 11 years 45 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

Ah. I see. I was under the

Ah. I see. I was under the assumption that the precedence given to floated items was determined by the order of appearance in the html. Which is why things don't jump out of order in columns, because the first thing to be floated is read first, and so on.

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 15 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

You can still source order

You can still source order floats or use other alternatives to floats.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Ed Seedhouse
Ed Seedhouse's picture
Offline
Guru
Victoria British Columbia
Last seen: 49 weeks 3 days ago
Victoria British Columbia
Timezone: GMT-8
Joined: 2005-12-14
Posts: 3570
Points: 675

josephbm91 wrote: I fully

josephbm91 wrote:

I fully understand separating presentation and content, that's simple. I'm asking how can you know when to code a <div> without knowing where you want it to be located visually?

Well, for each logical "bit" of content there is usually a tag that will describe it's meaning, and for the first pass I normally use only those and no DIVS. Then I look and see where the logical divisions of the content are, and if I need to mark up a logical division, usually consisting of several elements, then I will wrap those divisions in a DIV tag unless some other tag describes the logical division better. DIVS are semantically pretty neutral so I generally only use them when nothing else is available in the language.

Then I'll have a look at the page in a web browser, and determine if it is usable without any styling at all. It always should be, and if it isn't I'll jigger my markup a bit.

Then finally I will start my style sheet. Positioning elements or divisions of the page may require a few more DIVs or may not.

I am not always absolutely pure about this, I will sometimes have a layout in mind in advance and I may do a bit of styling as I go, but I always make sure the markup without the CSS will make sense and be usable when viewed un-styled in a browser. Occasionally when I do I will change my mind about what is the best layout. Layout and positioning should be used to make the page more usable, not just because I or someone thinks it looks cool that way.

I find that doing things this way is much easier and takes a lot less time than trying to code "to" a specific layout.

Of course even when writing markup this way one is in some sense having to consider position in the source because html has positioning defaults we call "normal page flow".

If I've done things well, then I can if I like sometimes later change the page style and the positions of elements without having to change a bit of the html simply be editing the CSS.

Ed Seedhouse

Posting Guidelines

Watch out! I am carrying irony, sarcasm and satire, and know how to use them.

Keys88
Keys88's picture
Offline
newbie
Last seen: 11 years 23 weeks ago
Timezone: GMT-5
Joined: 2010-02-19
Posts: 10
Points: 15

Writing to format

It’s inspiring when a practical question like the initial query can open into essential themes of how we think.

Ed and Tyssen, your focus on html as a semantic rather than a visual element is helpful. I’d never seen html in that light, nor considered writing my html as a step of creating the meaning before applying the css. This makes sense. Something like using nested outline form as a step of clear writing.

Still, writing to format is an art unto itself. Few writers do it, and most writers would reject the idea out of hand. But I’ve done it for a long time, with good results.

It’s not a matter of pouring words into jello molds to get nice design. It’s deeper than that, a whole other thing. It’s more like how in music school we were made to solve the same counterpoint problems over and over, even after good solutions had been shown, because doing so forced us to look ever closer into essence.

The point of writing to format is not to create a visual effect but rather to submit thinking to a discipline of penetrating deeper into what’s real. Yes, the method is arbitrary. But it works, and the result is the opposite of arbitrary. The result, reliably, is better clarity.

In this sense, format is more than a visual element, in fact it’s only incidentally visual. It’s the music teacher pushing us to think again, think deeper.

This habit of writing to format is my reason for wanting a wysiwyg editor for publishing online. It’s not because I’m too lazy to code my html/css/php. I like hand-coding. It’s because for me, writing to format is basic clear thinking.

josephbm91
josephbm91's picture
Offline
Regular
Texas
Last seen: 11 years 45 weeks ago
Texas
Timezone: GMT-5
Joined: 2010-02-07
Posts: 17
Points: 17

Change

Actually, after attempting Ed's mechanism of coding HTML, I feel things make a LOT more sense. I've been able to replace <div>'s with proper elements, like having <ul id="navigation"> instead of using <div id="navigation">,which Is more semantic. This "revelation" came about when I was beginning the redesign my site. Although my code validates strict and I thought it was clean code, I realized there were just too many wrappers, and I could get rid of those by using more semantic HTML. The html is SO much cleaner now, it's almost unreal, haha.

So thanks for tolerating my thick skull. Some things you just have to learn for yourself!

Deuce
Deuce's picture
Offline
Guru
Somewhere, USA
Last seen: 4 years 28 weeks ago
Somewhere, USA
Timezone: GMT-5
Joined: 2005-11-20
Posts: 4424
Points: 1843

ya, I had a guy show me a

ya, I had a guy show me a design he coded and it had about 50 divs to compensate for the design. I recoded it and showed him the code. it took 4 divs. Just remember that elements like HTML and BODY are your friend. They are block level elements and you can use them for your benefit!

all » http://dictionary.reference.com/browse/all

Google isn't a bunch of guys reading and grading web sites, it's more like a bunch of monkeys sniffing food and putting the good bananas at the top. -Triumph