Solved

Drawing complex html tables in wysiwyg editor

Posted on 2015-02-13
8
128 Views
Last Modified: 2015-04-28
I'm working with html documents that are made to look like a paper form, with lots of lines and boxes, where different text is placed (by my application) in the proper locations.
Normally I design these html "paper forms" manually, with traditional html coding, but now some other non-tech people will begin designing the forms instead.

I've tried letting them use MSWord and "save as html", which almost works. Word does quite a good job at handling complex structures. There is lots of "garbage" in the resulting html, but I can quite easily automatically tidy up/filter away such MS stuff.

However, there are limitations. Word kind of "links" different table cells with eachother, and the designing users have difficulties drawing the forms as they would like to.
Also, the Word html result is not static enough. Depending on the text content, the lines and boxes "move around" a little too much.

So... I've been looking for some WYSIWYG editor that generates html, letting the user "paint tables" more or less on free-hand.
All the editors I've tested (including Adobe dreamweaver etc) however are stuck in the idea that a "table is X times Y cells" and only allows more complex structures by having the user painstakingly create tables in tables in tables, etc etc. Much too advanced for the users that I'm working with.

I would like to find something more "free hand"-like, where the user "draws the lines" that is to be printed on the paper form, and the html editor then calculates how a corresponding table should be designed.
Does anybody know of a tool/editor like that? Commercial (expensive) is ok.

Of course it doesn't have to be <tables> - other types of html markup might be ok as well, but I'd really like the user to "draw lines", as much as possible, rather then be thinking of html structures.

In the end, the html is passed to wkhtml2pdf - so I'm limited to the kind of html that this tool (based on webkit) can handle.

Any ideas/experiences?
/Thanks
0
Comment
Question by:stefanlennerbrant
  • 4
  • 3
8 Comments
 

Author Comment

by:stefanlennerbrant
Comment Utility
Just an idea...

One alternative would of course be to create a monter page with 1000 x 1000 very small <td> cells.
Then the editor/tool would "only" need to insert colspan and rowspan attributes (and borders) at proper locations.
Possibly, this could even be done using a sed script that worked on the "save as html" result of MSExcel, or similar. Thus, the user would "paint" in Excel, using the very small cells as a grid.

Has anybody done something like this?

As the html (in my case) is only used by wkhtml2pdf to generate a PDF file, it doesn't matter if the html input is a "monster table" - as long as the resulting PDF is ok. I however haven't tested what wkhtml2pdf would do with such a html input.

Just an idea... :-)
I'm open for all suggestions
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
if the resulting document is a pdf, why bother with html at all? in acrobat pro you can design forms, and pro isnt prohibitively expensive
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
in fact, illustrator is the answer to your dilema. totally free form design, then save as pdf
0
 

Author Comment

by:stefanlennerbrant
Comment Utility
I need to insert a lot of text (quite complex stuff) into the document, and I cannot do such operations working directly on PDF.
Thus I need to use html as an intermediate format - most of all because all other parts of the application works on html data, and we need to re-use that logic.
0
How your wiki can always stay up-to-date

Quip doubles as a “living” wiki and a project management tool that evolves with your organization. As you finish projects in Quip, the work remains, easily accessible to all team members, new and old.
- Increase transparency
- Onboard new hires faster
- Access from mobile/offline

 
LVL 30

Expert Comment

by:Alexandre Simões
Comment Utility
Have you considered Microsoft Publisher?
If your users are familiar with MS Word,, MS Publisher will give you the same experience but way more power.
0
 
LVL 25

Expert Comment

by:Kyle Hamilton
Comment Utility
In that case,  Adobe dreamweaver is actually a really good option. Dreamweaver does allow col spans and row spans. You can change the view in dreamweaver so that you can see the table borders as you are editing. You can also 'combine' cells in a wyswyg fashion. It's not "table is X times Y cells" like you say. You just have to know the features of dreamweaver that you need for your project. Then you can show your designers how to do what they need to do. It's not rocket science. Your designers will only need to learn a very limited number of features. If they are able for Word or Exel, then they should be able for this.
0
 

Accepted Solution

by:
stefanlennerbrant earned 0 total points
Comment Utility
Using Dreamwaver proved to be much to limited in document/form layout handling. MSWord is much much more powerful and versatile.
I had to work hard to get around all "tricks" that is the downside of MSWord, but eventually it payed off. I've also looked into several other editors, but none is even close to the functionality/complexity of MSWord. Unfortunately.
0
 

Author Closing Comment

by:stefanlennerbrant
Comment Utility
Unfortunately, there has proven to be nothing like MSWord. One has to cope with the downside of its "stupid intelligence" and the somewhat weird html output that it generates.
0

Featured Post

Top 6 Sources for Identifying Threat Actor TTPs

Understanding your enemy is essential. These six sources will help you identify the most popular threat actor tactics, techniques, and procedures (TTPs).

Join & Write a Comment

Why do we like using grid based layouts in website design? Let's look at the live examples of websites and compare them to grid based WordPress themes.
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
The purpose of this video is to demonstrate how to exclude a particular blog category from the main blog page. This is can be used when a category already has its own tab, or you simply want certain types of posts not to show up on the main blog. …
The purpose of this video is to demonstrate how to integrate Mailchimp with WordPress, by placing a Mailchimp signup form on a WordPress Page or Post. This will be demonstrated using a Windows 8 PC. Mailchimp will be used. Log into your Mailchi…

763 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now