d1zhqq
Last Updated: February 25, 2016
·
2.101K
· tuptup
Avatar me

Flexible prototyping using contenteditable

By adding contenteditable="true" to any element containing text allows you to directly manipulate the copy of a page in the browser. This means you can add/remove to test the flexibility of you design with different amounts of copy, see how things wrap for translation and experiment with button copy.

It's also great when producing webtype specimen pages or typography style guides.

Pretty useful!

Say Thanks
Respond

6 Responses
Add your response

105
Avatar

Oh sweet, I did not know that - awesome tip! :)

Great example showing this here: http://html5demos.com/contenteditable

over 1 year ago ·
109
Photo on 08.01.2013 at 04.15

The best thing: it's supported even by IE6..

over 1 year ago ·
120
Avatar me

nice!

over 1 year ago ·
121
C8a88b7f02ecd118aa4a9d7bc69d6749

Add the below snippet as a bookmarklet/favlet an you can make use of contenteditable on any webpage.


javascript:document.body.contentEditable='true'; document.designMode='on'; void 0

over 1 year ago ·
127
Avatar me

@drawluap brilliant, just added this, works great!

over 1 year ago ·
5171
Cb05f0c37139db9ad3f8a8a632c653d6

@drawluap Tried this and its just gained a perma spot on my bookmark bar!

Also thanks to Peter I didn't know about this, this is pretty cool for me to use in the office :)

over 1 year ago ·