Certificate Field Formatting Issue

[Hyper3x]

We have encountered a certificate issue. As per our requirement, we need to allow up to 100 characters for certificate name and birth place field lengths. Currently, we are using a wrapper function to separate these values into lines, but when a small name is entered, it creates a large gap between certificate fields. Additionally when there is less space, fields sometimes overlap when moving downward.

Is there any way we can mitigate this?
Are there any approaches or solutions that have been used in other countries to handle this better?

Any advice, insights, or examples would be very much appreciated. I have attached examples of our current birth and death certificates.

Thanks a lot for your support!

3.pdf
1.pdf
2.pdf

[euanmillar]

Hi @Hyper3x, a lot depends on the design and the code of your SVG file. We often have to write handlebar helper functions to wrap text and sometimes manipulate the SVG code and tags to create areas that dynamically reposition given the text content supplied to it.

2 common helper functions we use are below. You would put them in here: https://github.com/opencrvs/opencrvs-countryconfig/blob/develop/src/form/common/certificate/handlebars/helpers.ts

const LINE_HEIGHT = 15
const DEFAULT_FONTSIZE = 11

function wordWrap(
  text: string,
  boundary: number,
  fontSize?: number,
  fontWeight?: string
) {
  const letterSizeFactor =
    (fontSize != null ? (fontSize + 1.13) / DEFAULT_FONTSIZE : 1) +
    (fontWeight && fontWeight == 'bold' ? 0.1 : 0)

  return text
    .split('\n')
    .map(function (line) {
      let pos = 0
      return line
        .trim()
        .split(/\b/)
        .map(function (word) {
          const isPonctuation = /[.,;:!']$/.test(word.trim())
          pos += word.length * letterSizeFactor
          if (!isPonctuation && pos > boundary) {
            pos = word.length
            return '\n' + word.trimLeft()
          }
          return word
        })
        .join('')
    })
    .join('\n')
    .split('\n')
}

function insertTspansIntoText(textLines: string[], xi: number, yi: number) {
  let svgString = ''
  let y = yi
  for (const line of textLines) {
    svgString += `<tspan x="${xi}" y="${y}">${line}</tspan>`
    y += LINE_HEIGHT
  }
  return svgString
}

export function wrap(): Handlebars.HelperDelegate {
  return function (
    this: any,
    lineLength: number,
    x: number,
    y: number,
    ...values: [...string[], Handlebars.HelperOptions]
  ) {
    const lines = wordWrap(values.slice(0, -1).join(' '), lineLength)
    return insertTspansIntoText(lines, x, y)
  } as unknown as Handlebars.HelperDelegate
}

[Hyper3x]

Ok noted, Thanks!