2

I'm currently trying to create textareas to display dialogue in a screenplay format. So far, I've come up with this:

<textarea style="width: 140pt; border: 0px; resize: none; overflow:hidden;">

I've tried adding stuff like height: auto;, overflow: auto; or just removing the height altogether (as I have done in the code above) - but this hasn't worked. All I want it to do is increase the height of the textarea so that it fits its text, whilst keeping the width at 140pt. How should I do this?

Thanks, J

5
  • 1
    Why on earth are you using pt units? Most systems aren't calibrated to display them correctly.
    – Quentin
    Oct 8, 2013 at 9:45
  • I don't think you'll be able to achieve what you want without Javascript
    – George
    Oct 8, 2013 at 9:45
  • possible duplicate of Autosizing textarea using prototype
    – Quentin
    Oct 8, 2013 at 9:46
  • You might want to have a look at the output of the Fountain Scrippets plugin. It accepts a Markdown-like text format for screenplays, and outputs... possibly HTML formatted with CSS to look like a screenplay, possibly text in a <pre> element with screenplay spacing. I'm not sure which. Oct 8, 2013 at 9:54
  • 1
    Why do you use a textarea control to display dialogue? If you just put the content in a div element, it will automatically take the height needed for its content. Oct 8, 2013 at 9:56

3 Answers 3

1

If you're just trying to get your screenplay text to display in a monospace font with multiple spaces preserved, you'd be better off using a different element with white-space:pre assigned to it:

HTML

<div class="screenplay">
EXT. FOREST / ELSEWHERE - DAY

Susan is on a cell-phone call. She smiles at Melissa, who walks by with two cups of coffee.

                        SUSAN (V.O.)
            Right now, this is probably our top pilot. But things change.
</div>

CSS

.screenplay {
    white-space: pre;
    font-family: monospace;
}

See http://jsfiddle.net/GhMjq/

However, you might also want to take a look at the output of the Fountain Scrippets plugin. I believe this outputs screenplay snippets in sensible HTML that's formatted according to standard screenplay conventions using CSS.

0

You can use jQuery autoresize Plugin on keyup like this jsfiddle exemple

 $(document).ready(function() {
 $('textarea').on('keyup',function() {
     $('textarea').autosize();
 });

});

0

this code works for me, I hope it will help you,

<!DOCTYPE html>
<html>
<body>

<textarea  id="textarea" style="width: 140pt;  resize: none; overflow:hidden;">fdsf</textarea>

<script>
function setHeight()
{
var elem=document.getElementById("textarea");
var h=elem.offsetHeight;
var scrollHeight=elem.scrollHeight;
var innerHeight=elem.innerHeight;

if(scrollHeight>=h)
{
    elem.style.height=scrollHeight+"px";
}else
{
    elem.style.height=scrollHeight-2+"px";
}
}
setInterval(function(){setHeight()},30);
</script>

</body>
</html>

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.