Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #25979 > unrolled thread

Capturing 'new line' info from div

Back to article view | Back to comp.lang.javascript

Contents

  Capturing 'new line' info from div Ed Jay <edMbj@aes-intl.com> - 2014-10-23 17:36 -0700
    Re: Capturing 'new line' info from div Chris Winter <thepoet@a-za-z0-9.de> - 2014-10-24 13:23 +0200
      Re: Capturing 'new line' info from div Ed Jay <edMbj@aes-intl.com> - 2014-10-24 08:31 -0700

#25979 — Capturing 'new line' info from div

My application creates contenteditable divs as child elements of a
another div. Each created div is given the id of 'mrkr'+i, where i is
the number of divs created, i.e., the first created div has
id='mrkr0,' etc. I enter text into those divs. If the text is longer
than the div min-width dimension, the text is word-wrapped to a new
line. Alternatively, I hit ctrl-return to manually create the new
line.

I want to place the contents of each div onto a canvas
("save_canvas"), at the same location as the original text,
which locations are stored in two arrays (x_pos_array and
y_pos_array), and with the same line breaks as in the created divs. I
[attempt] this with the following:

cnt = x_pos_array.length;
for (var i = 0; i < cnt; i++) {  //look at all child divs
   test_div = document.getElementById('mrkr'+i).innerHTML; 
   if(test_div !='') { //if there's text in the div
      x = x_pos_array[i];
      y = y_pos_array[i];
      save_canvas.fillStyle = 'white';
      save_canvas.font = "12pt 'Arial Narrow'";
      save_canvas.fillText(test_div, x, y);
   }
}

This works, with the exception that none of the line breaks,
whether word wrapped or manually entered, are effected on the
canvas. The text flows to the right, out of the canvas.

Is there a method for capturing the line breaks in the original
divs on the canvas?

I needn't be provided with code...a simple yes or no will guide me.

Thanks,
-- 
Ed Jay (remove 'M' to respond by email)

[toc] | [next] | [standalone]

#25981

Am 24.10.2014 02:36, schrieb Ed Jay:
[...]
> I want to place the contents of each div onto a canvas
> ("save_canvas"), at the same location as the original text,
> which locations are stored in two arrays (x_pos_array and
> y_pos_array), and with the same line breaks as in the created divs.
[...]
>
> This works, with the exception that none of the line breaks,
> whether word wrapped or manually entered, are effected on the
> canvas. The text flows to the right, out of the canvas. [...]

fillText ignores line wrapping. You'll probably have to roll
your own solution that splits the text appropriately and calls
fillText for each line. Be wary of solutions out there in
the web, as they often use unreliable shortcuts to "calculate"
line heights. If you're making a one-platform, one-font solution,
you can probably survive with hard-coding line offsets. Otherwise
you'll have to decide which downsides of the approaches you can
live with.

-Chris

[toc] | [prev] | [next] | [standalone]

#25982

On Fri, 24 Oct 2014 13:23:57 +0200, Chris Winter wrote:

>Am 24.10.2014 02:36, schrieb Ed Jay:
>[...]
>> I want to place the contents of each div onto a canvas
>> This works, with the exception that none of the line breaks,
>
>fillText ignores line wrapping. You'll probably have to roll
>your own solution that splits the text appropriately and calls
>fillText for each line. Be wary of solutions out there in
>the web, as they often use unreliable shortcuts to "calculate"
>line heights. If you're making a one-platform, one-font solution,
>you can probably survive with hard-coding line offsets. Otherwise
>you'll have to decide which downsides of the approaches you can
>live with.
>
Thanks, Chris. 

I am using a single-platform/font, so I guess my weekend is cut out
for me. :-)  Thanks, again.
-- 
Ed Jay (remove 'M' to respond by email)

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web