wrap captions (#305)

Signed-off-by: Michele Dolfi <dol@zurich.ibm.com>

Author: dolfim-ibm

docling_core/transforms/serializer/html.py

@@ -949,22 +949,33 @@ def serialize_captions(
         excluded_refs = self.get_excluded_refs(**kwargs)
 
         if DocItemLabel.CAPTION in params.labels:
-            results.extend(
-                [
-                    create_ser_result(text=html.escape(it.text), span_source=it)
-                    for cap in item.captions
-                    if isinstance(it := cap.resolve(self.doc), TextItem)
+            for cap in item.captions:
+                if (
+                    isinstance(it := cap.resolve(self.doc), TextItem)
                     and it.self_ref not in excluded_refs
-                ]
-            )
+                ):
+                    text_cap = it.text
+                    text_dir = get_text_direction(text_cap)
+                    dir_str = f' dir="{text_dir}"' if text_dir == "rtl" else ""
+                    cap_ser_res = create_ser_result(
+                        text=(
+                            f'<div class="caption"{dir_str}>'
+                            f"{html.escape(text_cap)}"
+                            f"</div>"
+                        ),
+                        span_source=it,
+                    )
+                    results.append(cap_ser_res)
 
         if params.include_annotations and item.self_ref not in excluded_refs:
             if isinstance(item, PictureItem):
                 for ann in item.annotations:
                     if ann_text := _get_picture_annotation_text(annotation=ann):
+                        text_dir = get_text_direction(ann_text)
+                        dir_str = f' dir="{text_dir}"' if text_dir == "rtl" else ""
                         ann_ser_res = create_ser_result(
                             text=(
-                                f'<div data-annotation-kind="{ann.kind}">'
+                                f'<div data-annotation-kind="{ann.kind}"{dir_str}>'
                                 f"{html.escape(ann_text)}"
                                 f"</div>"
                             ),
@@ -974,9 +985,7 @@ def serialize_captions(
 
         text_res = params.caption_delim.join([r.text for r in results])
         if text_res:
-            text_dir = get_text_direction(text_res)
-            dir_str = f' dir="{text_dir}"' if text_dir == "rtl" else ""
-            text_res = f"<{tag}{dir_str}>{text_res}</{tag}>"
+            text_res = f"<{tag}>{text_res}</{tag}>"
         return create_ser_result(text=text_res, span_source=results)
 
     def _generate_head(self) -> str:

test/data/doc/2206.01062.yaml.html

@@ -127,7 +127,7 @@
 <h2>Summer activities</h2>
 <h2>Swimming in the lake</h2>
 <p>Duck</p>
-<figure><figcaption>Figure 1: This is a cute duckling</figcaption></figure>
+<figure><figcaption><div class="caption">Figure 1: This is a cute duckling</div></figcaption></figure>
 <h2>Let's swim!</h2>
 <p>To get started with swimming, first lay down in a water and try not to drown:</p>
 <ul>

test/data/doc/2408.09869v3_enriched_split.gt.html

@@ -127,7 +127,7 @@
 <h2>Summer activities</h2>
 <h2>Swimming in the lake</h2>
 <p>Duck</p>
-<figure><figcaption>Figure 1: This is a cute duckling</figcaption></figure>
+<figure><figcaption><div class="caption">Figure 1: This is a cute duckling</div></figcaption></figure>
 <h2>Let's swim!</h2>
 <p>To get started with swimming, first lay down in a water and try not to drown:</p>
 <ul>

test/data/doc/activities.gt.html

@@ -146,9 +146,9 @@
 </ol>
 <li>list item 4</li>
 </ul>
-<table><caption>This is the caption of table 1.</caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
-<figure><figcaption>This is the caption of figure 1.</figcaption></figure>
-<figure><figcaption>This is the caption of figure 2.</figcaption><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAIklEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAA8G4wQAABiwCo9wAAAABJRU5ErkJggg=="></figure>
+<table><caption><div class="caption">This is the caption of table 1.</div></caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
+<figure><figcaption><div class="caption">This is the caption of figure 1.</div></figcaption></figure>
+<figure><figcaption><div class="caption">This is the caption of figure 2.</div></figcaption><img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAEAAAABACAIAAAAlC+aJAAAAIklEQVR4nO3BAQ0AAADCoPdPbQ8HFAAAAAAAAAAAAAAA8G4wQAABiwCo9wAAAABJRU5ErkJggg=="></figure>
 <ul>
 <li>item 1 of list</li>
 </ul>

test/data/doc/activities_p1.gt.html

@@ -146,9 +146,9 @@
 </ol>
 <li>list item 4</li>
 </ul>
-<table><caption>This is the caption of table 1.</caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
-<figure><figcaption>This is the caption of figure 1.</figcaption></figure>
-<figure><figcaption>This is the caption of figure 2.</figcaption></figure>
+<table><caption><div class="caption">This is the caption of table 1.</div></caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
+<figure><figcaption><div class="caption">This is the caption of figure 1.</div></figcaption></figure>
+<figure><figcaption><div class="caption">This is the caption of figure 2.</div></figcaption></figure>
 <ul>
 <li>item 1 of list</li>
 </ul>

test/data/doc/constructed_doc.embedded.html.gt

@@ -146,9 +146,9 @@
 </ol>
 <li>list item 4</li>
 </ul>
-<table><caption>This is the caption of table 1.</caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
-<figure><figcaption>This is the caption of figure 1.</figcaption></figure>
-<figure><figcaption>This is the caption of figure 2.</figcaption><img src="constructed_images/image_000001_f3cc103136423a57975750907ebc1d367e2985ac6338976d4d5a439f50323f4a.png"></figure>
+<table><caption><div class="caption">This is the caption of table 1.</div></caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
+<figure><figcaption><div class="caption">This is the caption of figure 1.</div></figcaption></figure>
+<figure><figcaption><div class="caption">This is the caption of figure 2.</div></figcaption><img src="constructed_images/image_000001_f3cc103136423a57975750907ebc1d367e2985ac6338976d4d5a439f50323f4a.png"></figure>
 <ul>
 <li>item 1 of list</li>
 </ul>

test/data/doc/constructed_doc.placeholder.html.gt

@@ -146,9 +146,9 @@ <h2>1. Introduction</h2>
 </ol>
 <li>list item 4</li>
 </ul>
-<table><caption>This is the caption of table 1.</caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
-<figure><figcaption>This is the caption of figure 1.</figcaption></figure>
-<figure><figcaption>This is the caption of figure 2.</figcaption></figure>
+<table><caption><div class="caption">This is the caption of table 1.</div></caption><tbody><tr><td rowspan="2">Product</td><td colspan="2">Years</td></tr><tr><td>2016</td><td>2017</td></tr><tr><td>Apple</td><td>49823</td><td>695944</td></tr></tbody></table>
+<figure><figcaption><div class="caption">This is the caption of figure 1.</div></figcaption></figure>
+<figure><figcaption><div class="caption">This is the caption of figure 2.</div></figcaption></figure>
 <ul>
 <li>item 1 of list</li>
 </ul>

test/data/doc/constructed_doc.referenced.html.gt

@@ -125,7 +125,7 @@
 <body>
 <div class='page'>
 <h1>DocLayNet: A Large Human-Annotated Dataset for Document-Layout Analysis</h1>
-<figure><figcaption>Figure 1: Four examples of complex page layouts across different document categories <div data-annotation-kind="classification">bar chart</div> <div data-annotation-kind="description">...</div> <div data-annotation-kind="molecule_data">CC1=NNC(C2=CN3C=CN=C3C(CC3=CC(F)=CC(F)=C3)=N2)=N1</div></figcaption></figure>
+<figure><figcaption><div class="caption">Figure 1: Four examples of complex page layouts across different document categories</div> <div data-annotation-kind="classification">bar chart</div> <div data-annotation-kind="description">...</div> <div data-annotation-kind="molecule_data">CC1=NNC(C2=CN3C=CN=C3C(CC3=CC(F)=CC(F)=C3)=N2)=N1</div></figcaption></figure>
 </div>
 </body>
 </html>