Want to win a PS4? Go Premium and enter to win our High-Tech Treats giveaway. Enter to Win

x
?
Solved

Drawing complex html tables in wysiwyg editor

Posted on 2015-02-13
8
Medium Priority
?
169 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:Stefan Lennerbrant
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 4
  • 3
8 Comments
 

Author Comment

by:Stefan Lennerbrant
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
VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

 

Author Comment

by:Stefan Lennerbrant
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:
Stefan Lennerbrant 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:Stefan Lennerbrant
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

Get free NFR key for Veeam Availability Suite 9.5

Veeam is happy to provide a free NFR license (1 year, 2 sockets) to all certified IT Pros. The license allows for the non-production use of Veeam Availability Suite v9.5 in your home lab, without any feature limitations. It works for both VMware and Hyper-V environments

Question has a verified solution.

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

Originally, this post was published on Monitis Blog, you can check it here . Websites are getting bigger and more complicated by the day. Video, images and custom fonts are all great for showcasing your product or service. But the price to pay in…
Originally, this post was published on Monitis Blog, you can check it here . In business circles, we sometimes hear that today is the “age of the customer.” And so it is. Thanks to the enormous advances over the past few years in consumer techno…
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
Learn how to create flexible layouts using relative units in CSS.  New relative units added in CSS3 include vw(viewports width), vh(viewports height), vmin(minimum of viewports height and width), and vmax (maximum of viewports height and width).

636 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