OLD | NEW |
| (Empty) |
1 Some Text | |
2 And More Text | |
3 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque sit amet e
st sem. Aenean ut neque volutpat, posuere odio at, mollis nibh. Aenean sodales n
ulla et ligula efficitur sollicitudin blandit sed lectus. Duis orci enim, sodale
s ac lectus sed, hendrerit efficitur est. Quisque gravida facilisis viverra. | |
4 | |
5 Lets have a span | |
6 Rotated text! | |
7 | |
8 | |
9 LayoutTreeNodes result: | |
10 { | |
11 "layoutTreeNodes": [ | |
12 { | |
13 "nodeId": 1, | |
14 "boundingBox": { | |
15 "x": 0, | |
16 "y": 0, | |
17 "width": 785, | |
18 "height": 600 | |
19 } | |
20 }, | |
21 { | |
22 "nodeId": 2, | |
23 "boundingBox": { | |
24 "x": 0, | |
25 "y": 0, | |
26 "width": 785, | |
27 "height": 911 | |
28 }, | |
29 "styleIndex": 0 | |
30 }, | |
31 { | |
32 "nodeId": 9, | |
33 "boundingBox": { | |
34 "x": 8, | |
35 "y": 8, | |
36 "width": 769, | |
37 "height": 882 | |
38 }, | |
39 "styleIndex": 1 | |
40 }, | |
41 { | |
42 "nodeId": 10, | |
43 "boundingBox": { | |
44 "x": 8, | |
45 "y": 8, | |
46 "width": 769, | |
47 "height": 882 | |
48 }, | |
49 "styleIndex": 1 | |
50 }, | |
51 { | |
52 "nodeId": 11, | |
53 "boundingBox": { | |
54 "x": 8, | |
55 "y": 8, | |
56 "width": 769, | |
57 "height": 16 | |
58 }, | |
59 "styleIndex": 2 | |
60 }, | |
61 { | |
62 "nodeId": 12, | |
63 "boundingBox": { | |
64 "x": 8, | |
65 "y": 8, | |
66 "width": 144, | |
67 "height": 16 | |
68 }, | |
69 "layoutText": "Some Text", | |
70 "inlineTextNodes": [ | |
71 { | |
72 "boundingBox": { | |
73 "x": 8, | |
74 "y": 8, | |
75 "width": 144, | |
76 "height": 16 | |
77 }, | |
78 "startCharacterIndex": 0, | |
79 "numCharacters": 9 | |
80 } | |
81 ], | |
82 "styleIndex": 3 | |
83 }, | |
84 { | |
85 "nodeId": 13, | |
86 "boundingBox": { | |
87 "x": 8, | |
88 "y": 568, | |
89 "width": 224, | |
90 "height": 16 | |
91 }, | |
92 "layoutText": " And More Text\n ", | |
93 "inlineTextNodes": [ | |
94 { | |
95 "boundingBox": { | |
96 "x": 8, | |
97 "y": 568, | |
98 "width": 224, | |
99 "height": 16 | |
100 }, | |
101 "startCharacterIndex": 1, | |
102 "numCharacters": 14 | |
103 } | |
104 ], | |
105 "styleIndex": 3 | |
106 }, | |
107 { | |
108 "nodeId": 14, | |
109 "boundingBox": { | |
110 "x": 232, | |
111 "y": 24, | |
112 "width": 200, | |
113 "height": 576 | |
114 }, | |
115 "styleIndex": 4 | |
116 }, | |
117 { | |
118 "nodeId": 15, | |
119 "boundingBox": { | |
120 "x": 232, | |
121 "y": 40, | |
122 "width": 200, | |
123 "height": 480 | |
124 }, | |
125 "styleIndex": 5 | |
126 }, | |
127 { | |
128 "nodeId": 16, | |
129 "boundingBox": { | |
130 "x": 232, | |
131 "y": 40, | |
132 "width": 192, | |
133 "height": 480 | |
134 }, | |
135 "layoutText": "\n Lorem ipsum dolor sit amet, consectetur adipiscin
g elit. Pellentesque sit amet est sem.\n Aenean ut neque volutpat, posuer
e odio at, mollis nibh. Aenean sodales nulla et\n ligula efficitur sollic
itudin blandit sed lectus. Duis orci enim, sodales ac lectus sed,\n hendr
erit efficitur est. Quisque gravida facilisis viverra.\n ", | |
136 "inlineTextNodes": [ | |
137 { | |
138 "boundingBox": { | |
139 "x": 232, | |
140 "y": 40, | |
141 "width": 176, | |
142 "height": 16 | |
143 }, | |
144 "startCharacterIndex": 9, | |
145 "numCharacters": 11 | |
146 }, | |
147 { | |
148 "boundingBox": { | |
149 "x": 232, | |
150 "y": 56, | |
151 "width": 144, | |
152 "height": 16 | |
153 }, | |
154 "startCharacterIndex": 21, | |
155 "numCharacters": 9 | |
156 }, | |
157 { | |
158 "boundingBox": { | |
159 "x": 232, | |
160 "y": 72, | |
161 "width": 80, | |
162 "height": 16 | |
163 }, | |
164 "startCharacterIndex": 31, | |
165 "numCharacters": 5 | |
166 }, | |
167 { | |
168 "boundingBox": { | |
169 "x": 232, | |
170 "y": 88, | |
171 "width": 176, | |
172 "height": 16 | |
173 }, | |
174 "startCharacterIndex": 37, | |
175 "numCharacters": 11 | |
176 }, | |
177 { | |
178 "boundingBox": { | |
179 "x": 232, | |
180 "y": 104, | |
181 "width": 160, | |
182 "height": 16 | |
183 }, | |
184 "startCharacterIndex": 49, | |
185 "numCharacters": 10 | |
186 }, | |
187 { | |
188 "boundingBox": { | |
189 "x": 232, | |
190 "y": 120, | |
191 "width": 80, | |
192 "height": 16 | |
193 }, | |
194 "startCharacterIndex": 60, | |
195 "numCharacters": 5 | |
196 }, | |
197 { | |
198 "boundingBox": { | |
199 "x": 232, | |
200 "y": 136, | |
201 "width": 192, | |
202 "height": 16 | |
203 }, | |
204 "startCharacterIndex": 66, | |
205 "numCharacters": 12 | |
206 }, | |
207 { | |
208 "boundingBox": { | |
209 "x": 232, | |
210 "y": 152, | |
211 "width": 192, | |
212 "height": 16 | |
213 }, | |
214 "startCharacterIndex": 79, | |
215 "numCharacters": 12 | |
216 }, | |
217 { | |
218 "boundingBox": { | |
219 "x": 232, | |
220 "y": 168, | |
221 "width": 80, | |
222 "height": 16 | |
223 }, | |
224 "startCharacterIndex": 92, | |
225 "numCharacters": 5 | |
226 }, | |
227 { | |
228 "boundingBox": { | |
229 "x": 312, | |
230 "y": 168, | |
231 "width": 96, | |
232 "height": 16 | |
233 }, | |
234 "startCharacterIndex": 105, | |
235 "numCharacters": 6 | |
236 }, | |
237 { | |
238 "boundingBox": { | |
239 "x": 232, | |
240 "y": 184, | |
241 "width": 128, | |
242 "height": 16 | |
243 }, | |
244 "startCharacterIndex": 112, | |
245 "numCharacters": 8 | |
246 }, | |
247 { | |
248 "boundingBox": { | |
249 "x": 232, | |
250 "y": 200, | |
251 "width": 144, | |
252 "height": 16 | |
253 }, | |
254 "startCharacterIndex": 121, | |
255 "numCharacters": 9 | |
256 }, | |
257 { | |
258 "boundingBox": { | |
259 "x": 232, | |
260 "y": 216, | |
261 "width": 192, | |
262 "height": 16 | |
263 }, | |
264 "startCharacterIndex": 131, | |
265 "numCharacters": 12 | |
266 }, | |
267 { | |
268 "boundingBox": { | |
269 "x": 232, | |
270 "y": 232, | |
271 "width": 160, | |
272 "height": 16 | |
273 }, | |
274 "startCharacterIndex": 144, | |
275 "numCharacters": 10 | |
276 }, | |
277 { | |
278 "boundingBox": { | |
279 "x": 232, | |
280 "y": 248, | |
281 "width": 192, | |
282 "height": 16 | |
283 }, | |
284 "startCharacterIndex": 155, | |
285 "numCharacters": 12 | |
286 }, | |
287 { | |
288 "boundingBox": { | |
289 "x": 232, | |
290 "y": 264, | |
291 "width": 112, | |
292 "height": 16 | |
293 }, | |
294 "startCharacterIndex": 168, | |
295 "numCharacters": 7 | |
296 }, | |
297 { | |
298 "boundingBox": { | |
299 "x": 232, | |
300 "y": 280, | |
301 "width": 128, | |
302 "height": 16 | |
303 }, | |
304 "startCharacterIndex": 176, | |
305 "numCharacters": 8 | |
306 }, | |
307 { | |
308 "boundingBox": { | |
309 "x": 232, | |
310 "y": 296, | |
311 "width": 96, | |
312 "height": 16 | |
313 }, | |
314 "startCharacterIndex": 193, | |
315 "numCharacters": 6 | |
316 }, | |
317 { | |
318 "boundingBox": { | |
319 "x": 232, | |
320 "y": 312, | |
321 "width": 144, | |
322 "height": 16 | |
323 }, | |
324 "startCharacterIndex": 200, | |
325 "numCharacters": 9 | |
326 }, | |
327 { | |
328 "boundingBox": { | |
329 "x": 232, | |
330 "y": 328, | |
331 "width": 192, | |
332 "height": 16 | |
333 }, | |
334 "startCharacterIndex": 210, | |
335 "numCharacters": 12 | |
336 }, | |
337 { | |
338 "boundingBox": { | |
339 "x": 232, | |
340 "y": 344, | |
341 "width": 176, | |
342 "height": 16 | |
343 }, | |
344 "startCharacterIndex": 223, | |
345 "numCharacters": 11 | |
346 }, | |
347 { | |
348 "boundingBox": { | |
349 "x": 232, | |
350 "y": 360, | |
351 "width": 192, | |
352 "height": 16 | |
353 }, | |
354 "startCharacterIndex": 235, | |
355 "numCharacters": 12 | |
356 }, | |
357 { | |
358 "boundingBox": { | |
359 "x": 232, | |
360 "y": 376, | |
361 "width": 160, | |
362 "height": 16 | |
363 }, | |
364 "startCharacterIndex": 248, | |
365 "numCharacters": 10 | |
366 }, | |
367 { | |
368 "boundingBox": { | |
369 "x": 232, | |
370 "y": 392, | |
371 "width": 160, | |
372 "height": 16 | |
373 }, | |
374 "startCharacterIndex": 259, | |
375 "numCharacters": 10 | |
376 }, | |
377 { | |
378 "boundingBox": { | |
379 "x": 232, | |
380 "y": 408, | |
381 "width": 176, | |
382 "height": 16 | |
383 }, | |
384 "startCharacterIndex": 270, | |
385 "numCharacters": 11 | |
386 }, | |
387 { | |
388 "boundingBox": { | |
389 "x": 232, | |
390 "y": 424, | |
391 "width": 144, | |
392 "height": 16 | |
393 }, | |
394 "startCharacterIndex": 290, | |
395 "numCharacters": 9 | |
396 }, | |
397 { | |
398 "boundingBox": { | |
399 "x": 232, | |
400 "y": 440, | |
401 "width": 144, | |
402 "height": 16 | |
403 }, | |
404 "startCharacterIndex": 300, | |
405 "numCharacters": 9 | |
406 }, | |
407 { | |
408 "boundingBox": { | |
409 "x": 232, | |
410 "y": 456, | |
411 "width": 192, | |
412 "height": 16 | |
413 }, | |
414 "startCharacterIndex": 310, | |
415 "numCharacters": 12 | |
416 }, | |
417 { | |
418 "boundingBox": { | |
419 "x": 232, | |
420 "y": 472, | |
421 "width": 112, | |
422 "height": 16 | |
423 }, | |
424 "startCharacterIndex": 323, | |
425 "numCharacters": 7 | |
426 }, | |
427 { | |
428 "boundingBox": { | |
429 "x": 232, | |
430 "y": 488, | |
431 "width": 144, | |
432 "height": 16 | |
433 }, | |
434 "startCharacterIndex": 331, | |
435 "numCharacters": 9 | |
436 }, | |
437 { | |
438 "boundingBox": { | |
439 "x": 232, | |
440 "y": 504, | |
441 "width": 128, | |
442 "height": 16 | |
443 }, | |
444 "startCharacterIndex": 341, | |
445 "numCharacters": 8 | |
446 } | |
447 ], | |
448 "styleIndex": 3 | |
449 }, | |
450 { | |
451 "nodeId": 17, | |
452 "boundingBox": { | |
453 "x": 232, | |
454 "y": 536, | |
455 "width": 200, | |
456 "height": 48 | |
457 }, | |
458 "styleIndex": 6 | |
459 }, | |
460 { | |
461 "nodeId": 18, | |
462 "boundingBox": { | |
463 "x": 272, | |
464 "y": 536, | |
465 "width": 160, | |
466 "height": 16 | |
467 }, | |
468 "styleIndex": 7 | |
469 }, | |
470 { | |
471 "nodeId": 19, | |
472 "boundingBox": { | |
473 "x": 272, | |
474 "y": 552, | |
475 "width": 144, | |
476 "height": 32 | |
477 }, | |
478 "styleIndex": 8 | |
479 }, | |
480 { | |
481 "nodeId": 20, | |
482 "boundingBox": { | |
483 "x": 272, | |
484 "y": 552, | |
485 "width": 144, | |
486 "height": 32 | |
487 }, | |
488 "layoutText": "Lets have a span", | |
489 "inlineTextNodes": [ | |
490 { | |
491 "boundingBox": { | |
492 "x": 272, | |
493 "y": 552, | |
494 "width": 144, | |
495 "height": 16 | |
496 }, | |
497 "startCharacterIndex": 0, | |
498 "numCharacters": 9 | |
499 }, | |
500 { | |
501 "boundingBox": { | |
502 "x": 272, | |
503 "y": 568, | |
504 "width": 96, | |
505 "height": 16 | |
506 }, | |
507 "startCharacterIndex": 10, | |
508 "numCharacters": 6 | |
509 } | |
510 ], | |
511 "styleIndex": 8 | |
512 }, | |
513 { | |
514 "nodeId": 21, | |
515 "boundingBox": { | |
516 "x": 92, | |
517 "y": 516, | |
518 "width": 32, | |
519 "height": 200 | |
520 }, | |
521 "styleIndex": 9 | |
522 }, | |
523 { | |
524 "nodeId": 22, | |
525 "boundingBox": { | |
526 "x": 92, | |
527 "y": 516, | |
528 "width": 32, | |
529 "height": 112 | |
530 }, | |
531 "layoutText": "Rotated text!", | |
532 "inlineTextNodes": [ | |
533 { | |
534 "boundingBox": { | |
535 "x": 108, | |
536 "y": 516, | |
537 "width": 16, | |
538 "height": 112 | |
539 }, | |
540 "startCharacterIndex": 0, | |
541 "numCharacters": 7 | |
542 }, | |
543 { | |
544 "boundingBox": { | |
545 "x": 92, | |
546 "y": 516, | |
547 "width": 16, | |
548 "height": 80 | |
549 }, | |
550 "startCharacterIndex": 8, | |
551 "numCharacters": 5 | |
552 } | |
553 ], | |
554 "styleIndex": 10 | |
555 }, | |
556 { | |
557 "nodeId": 23, | |
558 "boundingBox": { | |
559 "x": 8, | |
560 "y": 632, | |
561 "width": 404, | |
562 "height": 204 | |
563 }, | |
564 "styleIndex": 11 | |
565 }, | |
566 { | |
567 "nodeId": 25, | |
568 "boundingBox": { | |
569 "x": 8, | |
570 "y": 857, | |
571 "width": 769, | |
572 "height": 33 | |
573 }, | |
574 "styleIndex": 12 | |
575 } | |
576 ], | |
577 "computedStyles": [ | |
578 { | |
579 "properties": [ | |
580 { | |
581 "name": "transform", | |
582 "value": "none" | |
583 }, | |
584 { | |
585 "name": "transform-origin", | |
586 "value": "392.5px 455.438px" | |
587 }, | |
588 { | |
589 "name": "height", | |
590 "value": "910.875px" | |
591 }, | |
592 { | |
593 "name": "width", | |
594 "value": "785px" | |
595 }, | |
596 { | |
597 "name": "display", | |
598 "value": "block" | |
599 }, | |
600 { | |
601 "name": "outline-color", | |
602 "value": "rgb(0, 0, 0)" | |
603 } | |
604 ] | |
605 }, | |
606 { | |
607 "properties": [ | |
608 { | |
609 "name": "transform", | |
610 "value": "none" | |
611 }, | |
612 { | |
613 "name": "transform-origin", | |
614 "value": "384.5px 440.719px" | |
615 }, | |
616 { | |
617 "name": "height", | |
618 "value": "881.438px" | |
619 }, | |
620 { | |
621 "name": "width", | |
622 "value": "769px" | |
623 }, | |
624 { | |
625 "name": "display", | |
626 "value": "block" | |
627 }, | |
628 { | |
629 "name": "outline-color", | |
630 "value": "rgb(0, 0, 0)" | |
631 } | |
632 ] | |
633 }, | |
634 { | |
635 "properties": [ | |
636 { | |
637 "name": "transform", | |
638 "value": "none" | |
639 }, | |
640 { | |
641 "name": "transform-origin", | |
642 "value": "384.5px 8px" | |
643 }, | |
644 { | |
645 "name": "height", | |
646 "value": "16px" | |
647 }, | |
648 { | |
649 "name": "width", | |
650 "value": "769px" | |
651 }, | |
652 { | |
653 "name": "display", | |
654 "value": "block" | |
655 }, | |
656 { | |
657 "name": "outline-color", | |
658 "value": "rgb(0, 0, 0)" | |
659 } | |
660 ] | |
661 }, | |
662 { | |
663 "properties": [ | |
664 { | |
665 "name": "transform", | |
666 "value": "none" | |
667 }, | |
668 { | |
669 "name": "transform-origin", | |
670 "value": "0px 0px" | |
671 }, | |
672 { | |
673 "name": "height", | |
674 "value": "auto" | |
675 }, | |
676 { | |
677 "name": "width", | |
678 "value": "auto" | |
679 }, | |
680 { | |
681 "name": "display", | |
682 "value": "block" | |
683 }, | |
684 { | |
685 "name": "outline-color", | |
686 "value": "rgb(0, 0, 0)" | |
687 } | |
688 ] | |
689 }, | |
690 { | |
691 "properties": [ | |
692 { | |
693 "name": "transform", | |
694 "value": "none" | |
695 }, | |
696 { | |
697 "name": "transform-origin", | |
698 "value": "100px 288px" | |
699 }, | |
700 { | |
701 "name": "height", | |
702 "value": "576px" | |
703 }, | |
704 { | |
705 "name": "width", | |
706 "value": "200px" | |
707 }, | |
708 { | |
709 "name": "display", | |
710 "value": "inline-block" | |
711 }, | |
712 { | |
713 "name": "outline-color", | |
714 "value": "rgb(0, 0, 0)" | |
715 } | |
716 ] | |
717 }, | |
718 { | |
719 "properties": [ | |
720 { | |
721 "name": "transform", | |
722 "value": "none" | |
723 }, | |
724 { | |
725 "name": "transform-origin", | |
726 "value": "100px 240px" | |
727 }, | |
728 { | |
729 "name": "height", | |
730 "value": "480px" | |
731 }, | |
732 { | |
733 "name": "width", | |
734 "value": "200px" | |
735 }, | |
736 { | |
737 "name": "display", | |
738 "value": "block" | |
739 }, | |
740 { | |
741 "name": "outline-color", | |
742 "value": "rgb(0, 0, 0)" | |
743 } | |
744 ] | |
745 }, | |
746 { | |
747 "properties": [ | |
748 { | |
749 "name": "transform", | |
750 "value": "none" | |
751 }, | |
752 { | |
753 "name": "transform-origin", | |
754 "value": "100px 24px" | |
755 }, | |
756 { | |
757 "name": "height", | |
758 "value": "48px" | |
759 }, | |
760 { | |
761 "name": "width", | |
762 "value": "160px" | |
763 }, | |
764 { | |
765 "name": "display", | |
766 "value": "block" | |
767 }, | |
768 { | |
769 "name": "outline-color", | |
770 "value": "rgb(0, 0, 0)" | |
771 } | |
772 ] | |
773 }, | |
774 { | |
775 "properties": [ | |
776 { | |
777 "name": "transform", | |
778 "value": "none" | |
779 }, | |
780 { | |
781 "name": "transform-origin", | |
782 "value": "80px 8px" | |
783 }, | |
784 { | |
785 "name": "height", | |
786 "value": "16px" | |
787 }, | |
788 { | |
789 "name": "width", | |
790 "value": "160px" | |
791 }, | |
792 { | |
793 "name": "display", | |
794 "value": "list-item" | |
795 }, | |
796 { | |
797 "name": "outline-color", | |
798 "value": "rgb(0, 0, 0)" | |
799 } | |
800 ] | |
801 }, | |
802 { | |
803 "properties": [ | |
804 { | |
805 "name": "transform", | |
806 "value": "none" | |
807 }, | |
808 { | |
809 "name": "transform-origin", | |
810 "value": "0px 0px" | |
811 }, | |
812 { | |
813 "name": "height", | |
814 "value": "auto" | |
815 }, | |
816 { | |
817 "name": "width", | |
818 "value": "auto" | |
819 }, | |
820 { | |
821 "name": "display", | |
822 "value": "inline" | |
823 }, | |
824 { | |
825 "name": "outline-color", | |
826 "value": "rgb(0, 0, 0)" | |
827 } | |
828 ] | |
829 }, | |
830 { | |
831 "properties": [ | |
832 { | |
833 "name": "transform", | |
834 "value": "matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)" | |
835 }, | |
836 { | |
837 "name": "transform-origin", | |
838 "value": "100px 16px" | |
839 }, | |
840 { | |
841 "name": "height", | |
842 "value": "32px" | |
843 }, | |
844 { | |
845 "name": "width", | |
846 "value": "200px" | |
847 }, | |
848 { | |
849 "name": "display", | |
850 "value": "block" | |
851 }, | |
852 { | |
853 "name": "outline-color", | |
854 "value": "rgb(0, 0, 0)" | |
855 } | |
856 ] | |
857 }, | |
858 { | |
859 "properties": [ | |
860 { | |
861 "name": "transform", | |
862 "value": "matrix(6.12323e-17, 1, -1, 6.12323e-17, 0, 0)" | |
863 }, | |
864 { | |
865 "name": "transform-origin", | |
866 "value": "0px 0px" | |
867 }, | |
868 { | |
869 "name": "height", | |
870 "value": "auto" | |
871 }, | |
872 { | |
873 "name": "width", | |
874 "value": "auto" | |
875 }, | |
876 { | |
877 "name": "display", | |
878 "value": "block" | |
879 }, | |
880 { | |
881 "name": "outline-color", | |
882 "value": "rgb(0, 0, 0)" | |
883 } | |
884 ] | |
885 }, | |
886 { | |
887 "properties": [ | |
888 { | |
889 "name": "transform", | |
890 "value": "none" | |
891 }, | |
892 { | |
893 "name": "transform-origin", | |
894 "value": "202px 102px" | |
895 }, | |
896 { | |
897 "name": "height", | |
898 "value": "200px" | |
899 }, | |
900 { | |
901 "name": "width", | |
902 "value": "400px" | |
903 }, | |
904 { | |
905 "name": "display", | |
906 "value": "inline" | |
907 }, | |
908 { | |
909 "name": "outline-color", | |
910 "value": "rgb(0, 0, 0)" | |
911 } | |
912 ] | |
913 }, | |
914 { | |
915 "properties": [ | |
916 { | |
917 "name": "transform", | |
918 "value": "none" | |
919 }, | |
920 { | |
921 "name": "transform-origin", | |
922 "value": "384.5px 16px" | |
923 }, | |
924 { | |
925 "name": "height", | |
926 "value": "32px" | |
927 }, | |
928 { | |
929 "name": "width", | |
930 "value": "769px" | |
931 }, | |
932 { | |
933 "name": "display", | |
934 "value": "block" | |
935 }, | |
936 { | |
937 "name": "outline-color", | |
938 "value": "rgb(255, 0, 0)" | |
939 } | |
940 ] | |
941 } | |
942 ] | |
943 } | |
944 | |
OLD | NEW |