Unify certificate preview typography, justify body text, fix margins and semester labels

public/fonts/README.md

@@ -0,0 +1,5 @@
+Caladea and Carlito are metric-compatible, SIL Open Font License substitutes
+for Cambria and Calibri respectively, sourced from Google Fonts
+(https://fonts.google.com/specimen/Caladea, https://fonts.google.com/specimen/Carlito).
+Cambria and Calibri themselves are proprietary Microsoft fonts and are not
+redistributed here.

src/Modules/Certificates/BonafideCertificate.module.css

@@ -1,3 +1,31 @@
+@font-face {
+  font-family: "Caladea";
+  src: url("/fonts/Caladea-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Caladea";
+  src: url("/fonts/Caladea-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Carlito";
+  src: url("/fonts/Carlito-Regular.ttf") format("truetype");
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: "Carlito";
+  src: url("/fonts/Carlito-Bold.ttf") format("truetype");
+  font-weight: 700;
+  font-style: normal;
+}
+
 .layout {
   align-items: flex-start;
 }
@@ -21,12 +49,12 @@
   min-width: 210mm;
   min-height: 297mm;
   margin: 0 auto;
-  padding: 25mm 15mm;
+  padding: 35mm 15mm 20mm;
   color: #000;
   background: #fff;
   box-shadow: var(--mantine-shadow-sm);
-  font-family: Arial, sans-serif;
-  font-size: 13.5pt;
+  font-family: "Caladea", serif;
+  font-size: 11pt;
 }
 
 .certificateHeader {
@@ -44,12 +72,13 @@
 .heading {
   margin: 46pt 0 36pt;
   text-align: center;
-  font-size: 15pt;
+  font-size: 11pt;
   text-decoration: underline;
 }
 
 .body {
   margin: 0;
+  font-size: 12pt;
   line-height: 1.42;
   text-align: justify;
 }
@@ -65,7 +94,8 @@
 
 .note {
   margin-top: 8pt;
-  font-size: 13.5pt;
+  font-family: "Carlito", sans-serif;
+  font-size: 11pt;
   font-weight: 400;
   text-align: justify;
 }
@@ -132,16 +162,11 @@
   border: 1px solid #000;
   /* Mirrors the generated PDF's cell metrics so preview and download match. */
   padding: 2.5pt 6pt;
-  font-size: 12.5pt;
-  line-height: 16pt;
+  font-size: 11pt;
+  line-height: 15pt;
 }
 
 .certificateSmall {
-  font-size: 12pt;
-}
-
-.certificateSmall .heading {
-  font-size: 13.5pt;
 }
 
 .demandFeeTable {
@@ -203,7 +228,7 @@
 .structureTable th {
   border: 1px solid #000;
   padding: 2.5pt 6pt;
-  font-size: 12pt;
+  font-size: 11pt;
   line-height: 15pt;
   text-align: left;
 }

src/Modules/Certificates/FeeStructureCertificate.jsx

@@ -64,6 +64,24 @@ const filenameFrom = (header, fallback) => {
   return match?.[1] || fallback;
 };
 
+const ROMAN_NUMERALS = {
+  1: "I",
+  2: "II",
+  3: "III",
+  4: "IV",
+  5: "V",
+  6: "VI",
+  7: "VII",
+  8: "VIII",
+  9: "IX",
+  10: "X",
+  11: "XI",
+  12: "XII",
+};
+
+const semesterRoman = (semester) =>
+  ROMAN_NUMERALS[semester] ?? String(semester);
+
 function ordinalWithSuperscript(value) {
   const match = /^(\d+)(st|nd|rd|th)$/.exec((value ?? "").trim());
   if (!match) return value;
@@ -380,8 +398,8 @@ export default function FeeStructureCertificate() {
                     <tr>
                       <th>S.No.</th>
                       <th>Fee Head(s)</th>
-                      <th>Semester-I</th>
-                      <th>Semester-II</th>
+                      <th>Semester-{semesterRoman(selectedSemester)}</th>
+                      <th>Semester-{semesterRoman(selectedSemester + 1)}</th>
                       <th>Total</th>
                     </tr>
                   </thead>