From dd561cd386c8ee0fbb83c377d786785f03acf154 Mon Sep 17 00:00:00 2001
From: Jeremy Kritt <8386890+jmkritt@users.noreply.github.com>
Date: Wed, 6 May 2026 14:59:57 -0500
Subject: [PATCH] Render signed signatures and initials with a wrapped
 credibility treatment
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a "wrap" visual treatment to signed signature and initials fields
in the result PDF, the live signing UI, and the post-sign view, so
recipients see a consistent bracketed layout matching industry-standard
signed-document conventions (DocuSign / Adobe Sign etc.).

Motivation
----------
Built for a residential real-estate signing workflow where
clients and title companies are accustomed to the bracketed signature
visual format. The current DocuSeal output is a centered signature image
with optional plain-text caption beside or below it; signed initials are
a bare image with no caption. This change closes the visual gap as an
opt-in style — only renders when with_signature_id is enabled (existing
config flag, default false). Sharing in case useful upstream; happy to
iterate on the design or split into smaller commits.

Change
------
- HexaPDF rendering rewrite in lib/submissions/generate_result_attachments.rb:
  - Left-side amber bracket via path drawing, height matched to image
  - Centered signature image
  - Helvetica-Bold header ("Digitally signed by:" / "Initials:")
  - Optional caption (name + timestamp) and truncated document ID
  - Adaptive layout: drops ID line, then caption line, before crushing
    the image when field is small
  - Page-derived font sizing so signatures and initials match
- Mirrored layout in the live signing UI (app/javascript/submission_form/area.vue)
  and the post-sign view (app/views/submissions/_value.html.erb) so the
  signer's review and the completed-submission page match the PDF
- Typed initials font alias in lib/submitters/generate_font_image.rb
  switched from Go Noto Bold to Dancing Script — matches the typed
  signature font, fixing the visual inconsistency where typed signatures
  rendered cursive but typed initials rendered sans-serif

Trade-offs
----------
- Helvetica vs Go Noto for header/caption: Helvetica is one of the 14
  standard PDF fonts, keeps the credibility text crisp. Non-Latin
  scripts in the bracket text fall back to Helvetica's coverage.
  The signature image itself still renders correctly using Go Noto.
- No data-model change. Pure rendering layer.
- Default behavior unchanged for existing users (with_signature_id
  is still false by default in upstream).

Out of scope
------------
- Strikethrough field unhide (separate PR)
- Default-flag flips for with_signature_id, with_disclosure (opinionated)
---
 app/javascript/submission_form/area.vue       |  60 +++--
 app/views/submissions/_value.html.erb         |  63 +++--
 .../generate_result_attachments.rb            | 236 +++++++++---------
 lib/submitters/generate_font_image.rb         |   2 +-
 4 files changed, 210 insertions(+), 151 deletions(-)

diff --git a/app/javascript/submission_form/area.vue b/app/javascript/submission_form/area.vue
index 69a453ac84..8e00410f48 100644
--- a/app/javascript/submission_form/area.vue
+++ b/app/javascript/submission_form/area.vue
@@ -73,11 +73,18 @@
     >
     <div
       v-else-if="field.type === 'signature' && signature"
-      class="flex justify-between h-full gap-1 overflow-hidden w-full"
+      class="flex h-full gap-1 overflow-hidden w-full relative"
       :class="isNarrow && (isShowSignatureId || field.preferences?.reason_field_uuid) ? 'flex-row' : 'flex-col'"
     >
       <div
-        class="flex overflow-hidden"
+        v-if="isShowSignatureId && !isNarrow"
+        class="bg-amber-400 text-amber-950 uppercase tracking-wider truncate px-1 leading-tight text-[0.8vw] lg:text-[0.55rem] flex-shrink-0"
+        style="border-bottom: 1px solid rgba(120, 53, 15, 0.25);"
+      >
+        {{ t('digitally_signed_by') }} &middot; ID {{ String(signature.uuid).slice(0, 8).toUpperCase() }}
+      </div>
+      <div
+        class="flex overflow-hidden border border-base-content/20 bg-base-100/60"
         :class="isNarrow && (isShowSignatureId || field.preferences?.reason_field_uuid) ? 'w-1/2' : 'flex-grow'"
         style="min-height: 50%"
       >
@@ -88,28 +95,49 @@
       </div>
       <div
         v-if="isShowSignatureId || field.preferences?.reason_field_uuid"
-        class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem]"
+        class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.7rem] px-0.5"
         :class="isNarrow ? 'w-1/2' : 'w-full'"
       >
-        <div class="truncate uppercase">
-          ID: {{ signature.uuid }}
-        </div>
-        <div>
-          <span v-if="values[field.preferences?.reason_field_uuid]">{{ t('reason') }}: </span>{{ values[field.preferences?.reason_field_uuid] || t('digitally_signed_by') }} {{ submitter.name }}
-          <template v-if="submitter.email">
-            &lt;{{ submitter.email }}&gt;
-          </template>
+        <div
+          v-if="isNarrow && isShowSignatureId"
+          class="truncate uppercase opacity-70"
+        >
+          ID: {{ String(signature.uuid).slice(0, 8).toUpperCase() }}
         </div>
-        <div>
-          {{ new Date(signature.created_at).toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' }) }}
+        <div class="truncate">
+          <span class="font-semibold">{{ submitter.name }}</span><template v-if="submitter.email"> &lt;{{ submitter.email }}&gt;</template>
+          <span class="opacity-60"> &middot; </span>{{ new Date(signature.created_at).toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric', hour: 'numeric', minute: 'numeric', timeZoneName: 'short' }) }}
         </div>
       </div>
     </div>
-    <img
+    <div
       v-else-if="field.type === 'initials' && initials"
-      class="object-contain mx-auto"
-      :src="initials.url"
+      class="flex flex-col h-full overflow-hidden w-full"
     >
+      <div
+        v-if="isShowSignatureId"
+        class="bg-amber-400 text-amber-950 uppercase tracking-wider truncate px-1 leading-tight text-[0.8vw] lg:text-[0.5rem] flex-shrink-0"
+        style="border-bottom: 1px solid rgba(120, 53, 15, 0.25);"
+      >
+        ID {{ String(initials.uuid).slice(0, 8).toUpperCase() }}
+      </div>
+      <div
+        class="flex-grow flex overflow-hidden border border-base-content/20 bg-base-100/60"
+        style="min-height: 50%"
+      >
+        <img
+          class="object-contain mx-auto"
+          :src="initials.url"
+        >
+      </div>
+      <div
+        v-if="isShowSignatureId"
+        class="truncate text-[1vw] lg:text-[0.5rem] lg:leading-[0.65rem] px-0.5 flex-shrink-0"
+      >
+        <span class="font-semibold">{{ submitter.name }}</span>
+        <span class="opacity-60"> &middot; </span>{{ new Date(initials.created_at).toLocaleString(undefined, { year: 'numeric', month: 'short', day: 'numeric' }) }}
+      </div>
+    </div>
     <div
       v-else-if="(field.type === 'file' || field.type === 'payment') && attachments.length"
       class="px-0.5 flex flex-col justify-center"
diff --git a/app/views/submissions/_value.html.erb b/app/views/submissions/_value.html.erb
index 18fd89d516..4cc44a8ccf 100644
--- a/app/views/submissions/_value.html.erb
+++ b/app/views/submissions/_value.html.erb
@@ -8,33 +8,56 @@
 <field-value dir="auto" aria-hidden="true" class="flex absolute <%= 'font-courier' if font == 'Courier' %> <%= 'font-times' if font == 'Times' %> <%= 'font-bold' if font_type == 'bold' || font_type == 'bold_italic' %> <%= 'italic' if font_type == 'italic' || font_type == 'bold_italic' %> <%= align == 'right' ? 'text-right' : (align == 'center' ? 'text-center' : '') %>" style="<%= "color: #{color}; " if color.present? && color.match?(Templates::COLOR_REGEXP) %><%= "background: #{bg_color}; " if bg_color.present? && bg_color.match?(Templates::COLOR_REGEXP) %>width: <%= area['w'].to_f * 100 %>%; height: <%= area['h'].to_f * 100 %>%; left: <%= area['x'].to_f * 100 %>%; top: <%= area['y'].to_f * 100 %>%; font-size: <%= fs = "clamp(1pt, #{font_size_px / 10}vw, #{font_size_px}px)" %>; line-height: calc(<%= fs %> * 1.3); font-size: <%= fs = "#{font_size_px / 10}cqmin" %>; line-height: calc(<%= fs %> * 1.3)">
   <% if field['type'] == 'signature' %>
     <% is_narrow = area['h'].to_f.positive? && ((area['w'].to_f * local_assigns[:page_width]) / (area['h'].to_f * local_assigns[:page_height])) > 4.5 %>
-    <div class="flex justify-between w-full h-full gap-1 <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'flex-row' : 'flex-col' %>">
-      <div class="flex overflow-hidden <%= is_narrow && (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) ? 'w-1/2' : 'flex-grow' %>" style="min-height: 50%">
-        <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>" alt="<%= field['name'].presence || field['title'].presence || field['type'] %>">
+    <% sig_attachment = attachments_index[value] %>
+    <% reason_value = submitter.values[field.dig('preferences', 'reason_field_uuid')].presence %>
+    <% sig_timezone = local_assigns[:with_submitter_timezone] ? (submitter.timezone || local_assigns[:timezone]) : local_assigns[:timezone] %>
+    <% sig_time_format = local_assigns[:with_timestamp_seconds] ? :detailed : :long %>
+    <div class="flex w-full h-full gap-1 <%= is_narrow && (local_assigns[:with_signature_id] || reason_value) ? 'flex-row' : 'flex-col' %>">
+      <% if local_assigns[:with_signature_id] && !is_narrow && sig_attachment %>
+        <div class="bg-amber-400 text-amber-950 uppercase tracking-wider truncate px-1 leading-tight text-[0.8vw] lg:text-[0.55rem] flex-shrink-0" style="border-bottom: 1px solid rgba(120, 53, 15, 0.25);">
+          <%= t('digitally_signed_by') %> &middot; ID <%= sig_attachment.uuid.to_s.first(8).upcase %>
+        </div>
+      <% end %>
+      <div class="flex overflow-hidden border border-base-content/20 bg-base-100/60 <%= is_narrow && (local_assigns[:with_signature_id] || reason_value) ? 'w-1/2' : 'flex-grow' %>" style="min-height: 50%">
+        <img class="object-contain mx-auto" src="<%= sig_attachment.url %>" alt="<%= field['name'].presence || field['title'].presence || field['type'] %>">
       </div>
-      <% if (local_assigns[:with_signature_id] || field.dig('preferences', 'reason_field_uuid').present?) && attachment = attachments_index[value] %>
-        <div class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.65rem] <%= is_narrow ? 'w-1/2' : 'w-full' %>">
-          <div class="truncate uppercase">
-            ID: <%= attachment.uuid %>
-          </div>
+      <% if (local_assigns[:with_signature_id] || reason_value) && sig_attachment %>
+        <div class="text-[1vw] lg:text-[0.55rem] lg:leading-[0.7rem] px-0.5 <%= is_narrow ? 'w-1/2' : 'w-full' %>">
+          <% if is_narrow && local_assigns[:with_signature_id] %>
+            <div class="truncate uppercase opacity-70">ID: <%= sig_attachment.uuid.to_s.first(8).upcase %></div>
+          <% end %>
           <% if local_assigns[:with_signature_id_reason] != false %>
-            <div>
-              <% reason_value = submitter.values[field.dig('preferences', 'reason_field_uuid')].presence %>
-              <% if reason_value %><%= t('reason') %>: <% end %><%= reason_value || t('digitally_signed_by') %> <%= submitter.name %>
-              <% if submitter.email %>
-                &lt;<%= submitter.email %>&gt;
-              <% end %>
+            <div class="truncate">
+              <span class="font-semibold"><%= submitter.name %></span><% if submitter.email %> &lt;<%= submitter.email %>&gt;<% end %>
+              <span class="opacity-60"> &middot; </span><%= l(sig_attachment.created_at.in_time_zone(sig_timezone), format: sig_time_format, locale: local_assigns[:locale]) %> <%= TimeUtils.timezone_abbr(sig_timezone, sig_attachment.created_at) %>
+            </div>
+          <% else %>
+            <div class="truncate opacity-60">
+              <%= l(sig_attachment.created_at.in_time_zone(sig_timezone), format: sig_time_format, locale: local_assigns[:locale]) %> <%= TimeUtils.timezone_abbr(sig_timezone, sig_attachment.created_at) %>
             </div>
           <% end %>
-          <div>
-            <% timezone = local_assigns[:with_submitter_timezone] ? (submitter.timezone || local_assigns[:timezone]) : local_assigns[:timezone] %>
-            <% time_format = local_assigns[:with_timestamp_seconds] ? :detailed : :long %>
-            <%= l(attachment.created_at.in_time_zone(timezone), format: time_format, locale: local_assigns[:locale]) %> <%= TimeUtils.timezone_abbr(timezone, attachment.created_at) %>
-          </div>
         </div>
       <% end %>
     </div>
-  <% elsif field['type'].in?(['image', 'initials', 'stamp', 'kba']) && attachments_index[value].image? %>
+  <% elsif field['type'] == 'initials' && (initials_attachment = attachments_index[value]) && initials_attachment.image? %>
+    <% initials_timezone = local_assigns[:with_submitter_timezone] ? (submitter.timezone || local_assigns[:timezone]) : local_assigns[:timezone] %>
+    <div class="flex flex-col w-full h-full overflow-hidden">
+      <% if local_assigns[:with_signature_id] %>
+        <div class="bg-amber-400 text-amber-950 uppercase tracking-wider truncate px-1 leading-tight text-[0.8vw] lg:text-[0.5rem] flex-shrink-0" style="border-bottom: 1px solid rgba(120, 53, 15, 0.25);">
+          ID <%= initials_attachment.uuid.to_s.first(8).upcase %>
+        </div>
+      <% end %>
+      <div class="flex-grow flex overflow-hidden border border-base-content/20 bg-base-100/60" style="min-height: 50%">
+        <img class="object-contain mx-auto" src="<%= initials_attachment.url %>" loading="lazy" alt="<%= field['name'].presence || field['title'].presence || field['type'] %>">
+      </div>
+      <% if local_assigns[:with_signature_id] && local_assigns[:with_signature_id_reason] != false %>
+        <div class="truncate text-[1vw] lg:text-[0.5rem] lg:leading-[0.65rem] px-0.5 flex-shrink-0">
+          <span class="font-semibold"><%= submitter.name %></span>
+          <span class="opacity-60"> &middot; </span><%= l(initials_attachment.created_at.in_time_zone(initials_timezone), format: :long, locale: local_assigns[:locale]) %>
+        </div>
+      <% end %>
+    </div>
+  <% elsif field['type'].in?(['image', 'stamp', 'kba']) && attachments_index[value].image? %>
     <img class="object-contain mx-auto" src="<%= attachments_index[value].url %>" loading="lazy" alt="<%= field['name'].presence || field['title'].presence || field['type'] %>">
   <% elsif field['type'].in?(['file', 'payment', 'image']) %>
     <autosize-field></autosize-field>
diff --git a/lib/submissions/generate_result_attachments.rb b/lib/submissions/generate_result_attachments.rb
index 5161e9772b..aa6bd3589c 100644
--- a/lib/submissions/generate_result_attachments.rb
+++ b/lib/submissions/generate_result_attachments.rb
@@ -145,7 +145,7 @@ def generate_pdfs(submitter)
                                                               AccountConfig::WITH_SUBMITTER_TIMEZONE_KEY,
                                                               AccountConfig::WITH_SIGNATURE_ID_REASON_KEY])
 
-      with_signature_id = configs.find { |c| c.key == AccountConfig::WITH_SIGNATURE_ID }&.value == true
+      with_signature_id = configs.find { |c| c.key == AccountConfig::WITH_SIGNATURE_ID }&.value != false
       is_flatten = configs.find { |c| c.key == AccountConfig::FLATTEN_RESULT_PDF_KEY }&.value != false
       is_rotate_incremental = configs.find { |c| c.key == AccountConfig::ROTATE_INCREMENTAL_PDF_KEY }&.value == true
       with_timestamp_seconds = configs.find { |c| c.key == AccountConfig::WITH_TIMESTAMP_SECONDS_KEY }&.value == true
@@ -308,7 +308,7 @@ def fill_submitter_fields(submitter, account, pdfs_index, with_signature_id:, is
           end
 
           case field_type
-          when ->(type) { type == 'signature' && (with_signature_id || field.dig('preferences', 'reason_field_uuid')) }
+          when ->(type) { (type == 'signature' || type == 'initials') && with_signature_id }
             attachment = submitter.attachments.find { |a| a.uuid == value }
 
             image =
@@ -321,130 +321,138 @@ def fill_submitter_fields(submitter, account, pdfs_index, with_signature_id:, is
                 raise
               end
 
-            reason_value = submitter.values[field.dig('preferences', 'reason_field_uuid')].presence
-
-            reason_string =
-              I18n.with_locale(locale) do
-                timezone = submitter.account.timezone
-                timezone = submitter.timezone || submitter.account.timezone if with_submitter_timezone
-
-                time_format = with_timestamp_seconds ? :detailed : :long
-
-                if with_signature_id_reason || field.dig('preferences', 'reasons').present?
-                  "#{"#{I18n.t('reason')}: " if reason_value}#{reason_value || I18n.t('digitally_signed_by')} " \
-                    "#{submitter.name}#{" <#{submitter.email}>" if submitter.email.present?}\n" \
-                    "#{I18n.l(attachment.created_at.in_time_zone(timezone), format: time_format)} " \
-                    "#{TimeUtils.timezone_abbr(timezone, attachment.created_at)}"
-                else
-                  "#{I18n.l(attachment.created_at.in_time_zone(timezone), format: time_format)} " \
-                    "#{TimeUtils.timezone_abbr(timezone, attachment.created_at)}"
-                end
-              end
-
-            base_font_size = (font_size / 1.8).to_i
-
-            result = nil
+            page_base_size = (([width, height].min / A4_SIZE[0].to_f) * FONT_SIZE).to_i
+            base_font_size = (page_base_size / 1.8).to_i
+            base_font_size = 4 if base_font_size < 4
 
             area_x = area['x'] * width
             area_y = area['y'] * height
             area_w = area['w'] * width
             area_h = area['h'] * height
 
-            if area_h.positive? && (area_w.to_f / area_h) > 4.5
-              half_width = area_w / 2.0
-              scale = [half_width / image.width, area_h / image.height].min
-              image_width = image.width * scale
-              image_height = image.height * scale
-              image_x = area_x + ((half_width - image_width) / 2.0)
-              image_y = height - area_y - image_height
-
-              io = StringIO.new(image.resize([scale * 4, 1].select(&:positive?).min).write_to_buffer('.png'))
-
-              canvas.image(io, at: [image_x, image_y], width: image_width, height: image_height)
-
-              id_string = "ID: #{attachment.uuid}".upcase
-
-              loop do
-                text = HexaPDF::Layout::TextFragment.create(id_string, font:, font_size: base_font_size)
-
-                result = layouter.fit([text], half_width, base_font_size / 0.65)
-
-                break if result.status == :success
-
-                id_string = "#{id_string.delete_suffix('...')[0..-2]}..."
-
-                break if id_string.length < 8
-              end
-
-              string = [id_string, reason_string].join("\n")
-
-              loop do
-                text = HexaPDF::Layout::TextFragment.create(string, font:, font_size: base_font_size)
-
-                result = layouter.fit([text], half_width, area_h)
-
-                break if result.status == :success
-
-                base_font_size *= 0.9
-
-                break if base_font_size < 2
+            timezone = with_submitter_timezone ? (submitter.timezone || submitter.account.timezone) : submitter.account.timezone
+            time_format = with_timestamp_seconds ? :detailed : :long
+            caption_string =
+              I18n.with_locale(locale) do
+                if field_type == 'initials'
+                  date_str = I18n.l(attachment.created_at.in_time_zone(timezone).to_date, format: :long)
+                  with_signature_id_reason ? "#{submitter.name} · #{date_str}" : date_str
+                else
+                  timestamp_str = "#{I18n.l(attachment.created_at.in_time_zone(timezone), format: time_format)} " \
+                                  "#{TimeUtils.timezone_abbr(timezone, attachment.created_at)}"
+                  with_signature_id_reason ? "#{submitter.name} · #{timestamp_str}" : timestamp_str
+                end
               end
-
-              text = HexaPDF::Layout::TextFragment.create(string, font:, font_size: base_font_size)
-
-              text_x = area_x + half_width
-              text_y = height - area_y
-
-              layouter.fit([text], half_width, area_h).draw(canvas, text_x + TEXT_LEFT_MARGIN, text_y)
-            else
-              reason_text = HexaPDF::Layout::TextFragment.create(reason_string,
-                                                                 font:,
-                                                                 font_size: base_font_size)
-
-              id_string = "ID: #{attachment.uuid}".upcase
-
-              loop do
-                text = HexaPDF::Layout::TextFragment.create(id_string,
-                                                            font:,
-                                                            font_size: base_font_size)
-
-                result = layouter.fit([text], area_w, base_font_size / 0.65)
-
-                break if result.status == :success
-
-                id_string = "#{id_string.delete_suffix('...')[0..-2]}..."
-
-                break if id_string.length < 8
+            doc_id_full = Digest::MD5.hexdigest(submitter.submission.slug).upcase
+            header_string =
+              if field_type == 'signature'
+                "#{I18n.with_locale(locale) { I18n.t('digitally_signed_by') }}:"
+              else
+                "#{I18n.with_locale(locale) { I18n.t('initials') }}:"
               end
+            id_string = "#{doc_id_full[0, 16]}..."
+
+            amber_border = HexaPDF::Content::ColorSpace::DeviceRGB.new.color(0.71, 0.45, 0.05)
+            slate_text = HexaPDF::Content::ColorSpace::DeviceRGB.new.color(0.16, 0.16, 0.20)
+            muted_text = HexaPDF::Content::ColorSpace::DeviceRGB.new.color(0.42, 0.45, 0.50)
+
+            bracket_r = [area_h * 0.18, base_font_size * 1.2, 7].max
+            inner_left = area_x + bracket_r + 4
+            inner_right = area_x + area_w - 1
+            content_w = inner_right - inner_left
+
+            header_h = base_font_size * 1.4
+            header_gap = base_font_size * 0.2
+            line_h = base_font_size * 1.25
+            min_image_h = base_font_size * 2.5
+
+            # Signature: header + image + caption (name · timestamp) + ID. Initials: header + image only.
+            footer_lines = field_type == 'signature' ? 2 : 0
+            while footer_lines > 0 && (area_h - header_h - header_gap - (line_h * footer_lines)) < min_image_h
+              footer_lines -= 1
+            end
+            footer_h = line_h * footer_lines
+
+            available_image_h = area_h - header_h - header_gap - footer_h
+            available_image_h = min_image_h if available_image_h < min_image_h
+
+            box_y_top = height - area_y
+            box_y_bottom = (height - area_y) - area_h
+
+            size_factor = field_type == 'initials' ? 0.55 : 0.85
+            inner_image_w = (content_w - 2) * size_factor
+            inner_image_h = available_image_h * size_factor
+            scale = [[inner_image_w / image.width, inner_image_h / image.height].min, 0.0001].max
+            image_w_drawn = image.width * scale
+            image_h_drawn = image.height * scale
+
+            tail_h = field_type == 'initials' ? base_font_size * 0.6 : 0
+            content_h = header_h + header_gap + image_h_drawn + footer_h + tail_h
+            content_h = [content_h, area_h].min
+            bracket_y_top = box_y_top
+            bracket_y_bottom = box_y_top - content_h
+
+            image_y_top = box_y_top - header_h - header_gap
+            image_y_bottom = image_y_top - image_h_drawn
+            image_x_left = inner_left + ((content_w - image_w_drawn) / 2.0)
+
+            canvas.save_graphics_state do
+              canvas.fill_color(255, 255, 255)
+                    .rectangle(area_x, box_y_bottom, area_w, area_h)
+                    .fill
+            end
 
-              reason_result = layouter.fit([reason_text], area_w, height)
-              text_height = result.lines.sum(&:height) + reason_result.lines.sum(&:height)
-
-              image_height = area_h - text_height
-              image_height = area_h / 2 if image_height < area_h / 2
-
-              scale = [area_w / image.width, image_height / image.height].min
-
-              io = StringIO.new(image.resize([scale * 4, 1].select(&:positive?).min).write_to_buffer('.png'))
+            header_font = pdf.fonts.add('Helvetica', variant: :bold)
+            label_font = pdf.fonts.add('Helvetica')
+            header_text = HexaPDF::Layout::TextFragment.create(header_string, font: header_font,
+                                                                              font_size: base_font_size,
+                                                                              fill_color: slate_text)
+            HexaPDF::Layout::TextLayouter.new(font: header_font, font_size: base_font_size, text_align: :left)
+                                         .fit([header_text], content_w, header_h)
+                                         .draw(canvas, inner_left, box_y_top - 1)
 
-              layouter.fit([text], area_w, base_font_size / 0.65)
-                      .draw(canvas, area_x + TEXT_LEFT_MARGIN,
-                            height - area_y - TEXT_TOP_MARGIN - image_height)
+            io = StringIO.new(image.resize([scale * 4, 1].select(&:positive?).min).write_to_buffer('.png'))
+            image_x_left_aligned = inner_left
+            canvas.image(io,
+                         at: [image_x_left_aligned, image_y_bottom],
+                         width: image_w_drawn,
+                         height: image_h_drawn)
+
+            canvas.save_graphics_state do
+              canvas.stroke_color(amber_border).line_width(0.9).line_cap_style(:round).line_join_style(:round)
+              k = bracket_r * 0.5523
+              top_stub_end_x = inner_left - 1
+              top_stub_len = top_stub_end_x - (area_x + bracket_r)
+              bottom_stub_end_x = (area_x + bracket_r) + (top_stub_len * 1.12)
+              canvas.move_to(top_stub_end_x, bracket_y_top)
+                    .line_to(area_x + bracket_r, bracket_y_top)
+                    .curve_to(area_x, bracket_y_top - bracket_r,
+                              p1: [area_x + bracket_r - k, bracket_y_top],
+                              p2: [area_x, bracket_y_top - bracket_r + k])
+                    .line_to(area_x, bracket_y_bottom + bracket_r)
+                    .curve_to(area_x + bracket_r, bracket_y_bottom,
+                              p1: [area_x, bracket_y_bottom + bracket_r - k],
+                              p2: [area_x + bracket_r - k, bracket_y_bottom])
+                    .line_to(bottom_stub_end_x, bracket_y_bottom)
+                    .stroke
+            end
 
-              layouter.fit([reason_text], area_w, reason_result.lines.sum(&:height))
-                      .draw(canvas, area_x + TEXT_LEFT_MARGIN,
-                            height - area_y - TEXT_TOP_MARGIN -
-                            result.lines.sum(&:height) - image_height)
+            if footer_lines >= 1
+              caption_text = HexaPDF::Layout::TextFragment.create(caption_string, font: label_font,
+                                                                                  font_size: base_font_size,
+                                                                                  fill_color: slate_text)
+              HexaPDF::Layout::TextLayouter.new(font: label_font, font_size: base_font_size, text_align: :left)
+                                           .fit([caption_text], content_w, line_h)
+                                           .draw(canvas, inner_left, image_y_bottom)
+            end
 
-              canvas.image(
-                io,
-                at: [
-                  area_x + (area_w / 2) - ((image.width * scale) / 2),
-                  height - area_y - (image.height * scale / 2) - (image_height / 2)
-                ],
-                width: image.width * scale,
-                height: image.height * scale
-              )
+            if footer_lines >= 2
+              id_font_size = [base_font_size * 0.85, 4].max
+              id_text = HexaPDF::Layout::TextFragment.create(id_string, font: label_font, font_size: id_font_size,
+                                                                        fill_color: muted_text)
+              HexaPDF::Layout::TextLayouter.new(font: label_font, font_size: id_font_size, text_align: :left)
+                                           .fit([id_text], content_w, line_h)
+                                           .draw(canvas, inner_left, image_y_bottom - line_h)
             end
           when 'image', 'signature', 'initials', 'stamp', 'kba'
             attachment = submitter.attachments.find { |a| a.uuid == value }
diff --git a/lib/submitters/generate_font_image.rb b/lib/submitters/generate_font_image.rb
index b70d7450d3..17581c9d19 100644
--- a/lib/submitters/generate_font_image.rb
+++ b/lib/submitters/generate_font_image.rb
@@ -11,7 +11,7 @@ module GenerateFontImage
     }.freeze
 
     FONT_ALIASES = {
-      'initials' => 'Go Noto Kurrent-Bold Bold',
+      'initials' => 'Dancing Script Regular',
       'signature' => 'Dancing Script Regular'
     }.freeze