Solved

Drawing complex html tables in wysiwyg editor

Posted on 2015-02-13
8
132 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
ID: 40607669
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
ID: 40607709
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
ID: 40607710
in fact, illustrator is the answer to your dilema. totally free form design, then save as pdf
0
Windows Server 2016: All you need to know

Learn about Hyper-V features that increase functionality and usability of Microsoft Windows Server 2016. Also, throughout this eBook, you’ll find some basic PowerShell examples that will help you leverage the scripts in your environments!

 

Author Comment

by:stefanlennerbrant
ID: 40607716
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
 
LVL 30

Expert Comment

by:Alexandre Simões
ID: 40607732
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
ID: 40607742
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
ID: 40739692
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
ID: 40747861
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

Efficient way to get backups off site to Azure

This user guide provides instructions on how to deploy and configure both a StoneFly Scale Out NAS Enterprise Cloud Drive virtual machine and Veeam Cloud Connect in the Microsoft Azure Cloud.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Suggested Solutions

SASS allows you to treat your CSS code in a more OOP way. Let's have a look on how you can structure your code in order for it to be easily maintained and reused.
This article discusses how to create an extensible mechanism for linked drop downs.
The purpose of this video is to demonstrate how to reset a WordPress password if you are locked out and cannot reset the password. A typical use would be if you cannot access the email to which WordPress would send the password recovery email to…
HTML5 has deprecated a few of the older ways of showing media as well as offering up a new way to create games and animations. Audio, video, and canvas are just a few of the adjustments made between XHTML and HTML5. As we learned in our last micr…

820 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