Add per-template specifications measured from the reference PDFs
This commit is contained in:
+175
@@ -0,0 +1,175 @@
|
||||
# Template 11: Tangerine Ledger (`tangerine-ledger`)
|
||||
|
||||
Source: `templates/reference/11.pdf`. All coordinates are in points from the top-left of the reference page (595.5 x 842.25). Measured from the PDF content streams during design analysis.
|
||||
|
||||
## Style
|
||||
|
||||
A crisp business ledger with Poppins Bold display text and Inter body. The header row and total cell are filled #FF5F2F, items and totals sit in a fully ruled black 0.75pt grid, and orange pennant tabs bleed off the top-right and bottom-left edges.
|
||||
|
||||
## Fonts
|
||||
|
||||
- **Poppins Bold 700:** brand 'Rimberio' 18pt; 'INVOICE' 33pt; letterSpacing ≈0.
|
||||
- **Inter SemiBold 600:**
|
||||
- Section labels 12pt, caps as typed: 'STUDIO SHODWE', 'BILL TO', 'NOTES / TERMS:', 'PAYMENT METHOD:', 'PREPARED BY:'.
|
||||
- Table header 11pt, white.
|
||||
- **Inter Regular 400:**
|
||||
- Meta and party lines 12pt, line pitch 16.5 (lineHeight 1.375). The two meta lines use a pitch of 18.7.
|
||||
- Table body, totals labels and totals values 11pt.
|
||||
- **Inter Bold 700:** Total row 12pt, white.
|
||||
|
||||
Inter text everywhere carries +0.01em tracking (0.11–0.12pt), which can be omitted.
|
||||
|
||||
Bundle Inter 400/600/700 and Poppins 700 as static TTFs (OFL). For ₹, Poppins is Devanagari-capable and has U+20B9; check the Inter build, and use the fallback ['Inter','IBM Plex Sans'] anyway.
|
||||
|
||||
## Colours
|
||||
|
||||
- Page: #FFFFFF. Text: #000000.
|
||||
- Accent #FF5F2F: table header fill and its 0.75pt outline, Total row fill, both edge tabs.
|
||||
- On accent: text #FFFFFF; column separators inside the header and Total row are #FFFFFF 0.75pt.
|
||||
- Grid lines: #000000 0.75pt, for item rows and the totals box.
|
||||
- A white-on-white leaf shape at 60–90 × 69–111 is an invisible reference logo placeholder. Ignore it.
|
||||
|
||||
## Layout
|
||||
|
||||
Units are pt with the origin at the top-left. For text, y is the **baseline**.
|
||||
|
||||
Margins: left 59.5, right 58.8, so content runs x 59.5–536.7 (477.2 wide). Top ≈60, bottom ≈62.
|
||||
|
||||
| # | Region | Position / content |
|
||||
|---|---|---|
|
||||
| 1 | Header | 'Rimberio' Poppins Bold 18 at x 59.5, baseline 84.3. 'INVOICE' Poppins Bold 33, right-aligned to 536.7 (starts x 399.4), baseline 80.6 |
|
||||
| 2 | Meta | 'Invoice Number: #123456' Inter 12 at x 59.5, baseline 168.7. 'Invoice Date: 24/05/2030' at baseline 187.4 |
|
||||
| 3 | Parties | Left column x 59.5–272: vendor name as label 'STUDIO SHODWE', SemiBold 12, baseline 224.7, then lines at 247.9 / 264.5 / 281.0 / 297.5. Right column x 284.1–536.7: 'BILL TO' plus lines on the same baselines |
|
||||
| 4 | Items table | x 59.5–536.7. Header y 327.8–365.7 (37.9 tall). 3 rows of 37.5 (365.8 to 478.0) |
|
||||
| 5 | Notes (left) | 'NOTES / TERMS:' SemiBold 12 at x 59.5, baseline 511.8. Text 12pt at 536.2 / 552.7, about 180–280 wide |
|
||||
| 6 | Totals box (right) | x 353.6–536.7 (183 wide), split at x 447.6. Rows 501.3–538.9 and 538.9–576.4; Total row 576.6–615.9 |
|
||||
| 7 | Bottom | 'PAYMENT METHOD:' SemiBold 12 at x 60.1, baseline 722.3, with 3 lines at 746.3 / 762.8 / 779.4. 'PREPARED BY:' at x 316.8, baseline 722.3, with 2 lines at 746.3 / 762.8 |
|
||||
| 8 | Edge tabs | Top-right x 560.4–595.5 (bleeds), y 0–230.5. Bottom-left x 0–35.3, y 623.7–842.25 |
|
||||
|
||||
Gaps:
|
||||
- Header to meta: 84.
|
||||
- Parties to table: 30.
|
||||
- Table to notes/totals: 23–34.
|
||||
- Totals to bottom block: about 106. This is generous and can absorb the extra tax rows.
|
||||
|
||||
## Items table
|
||||
|
||||
A grid table with every cell ruled.
|
||||
|
||||
**Columns (A4):**
|
||||
- 'Item & Description': x 59.5–308.6 (249.1 wide). Left-aligned with 9.8 padding, so text starts at x 69.3.
|
||||
- 'Unit Price': 308.6–406.1 (97.5 wide). Right-aligned, text ends at 397.4.
|
||||
- 'Qty': 406.1–448.2 (42.1 wide). Right-aligned, text ends at 438.5.
|
||||
- 'Amount': 448.2–536.7 (88.5 wide). Right-aligned, text ends at 526.9.
|
||||
|
||||
**Header row:** 37.9 tall, fill #FF5F2F, Inter SemiBold 11 white, baseline vertically centred at 350.1. Vertical separators are white 0.75pt and the outline is #FF5F2F.
|
||||
|
||||
**Body rows:** minimum height 37.5. Inter Regular 11 #000, baseline about 21.8 below the row top (vertically centred). Black 0.75pt lines on every row and column boundary plus the outer frame. No zebra striping.
|
||||
|
||||
**Voiced adaptation:**
|
||||
- Widen the money columns: Unit Price to at least 100, with the unit on a second line ('₹2,000.00' over 'per hour' at 8.5pt); Qty to 45; Amount to at least 100. The description column shrinks to about 232.
|
||||
- Optional 'HSN/SAC' column, 50 wide.
|
||||
- Use paddingVertical 11–12 instead of a fixed 37.5 height so rows grow with wrapped descriptions.
|
||||
|
||||
## Totals and payment
|
||||
|
||||
**Source:**
|
||||
- The totals box is a bordered 2-column grid. 'Sub-Total' and 'Tax (6%)' rows use Inter Regular 11, with labels at x 363.3, values right-aligned to 526.9, and rows 37.5 tall.
|
||||
- The Total row is filled #FF5F2F, with Inter Bold 12 white text and a white separator (39.3 tall).
|
||||
- Notes sit to the left of the totals. The bottom block has 'PAYMENT METHOD:' (Bank, Account Name, Account Number) and 'PREPARED BY:' (name and title).
|
||||
- There is no signature image and no footer.
|
||||
|
||||
**Voiced:**
|
||||
- Totals rows: Sub-Total, optional Discount, CGST @ 9% plus SGST @ 9% (or IGST @ 18%), then Total in orange.
|
||||
- Widen the box to about x 316–536.7, with label and value columns of 110 each, to fit ₹ strings. Use 26–30pt rows so 5 rows fit.
|
||||
- Amount in words: below the box, either the box's width or across x 59.5–536.7, Inter Regular 10.
|
||||
- PAYMENT METHOD: Bank, Account Name, Account Number, IFSC, Branch, UPI ID. That is 6 lines at 10.5pt with 14.5–15 pitch.
|
||||
- PREPARED BY becomes the signature: an image (at most 140×48), then the vendor name and 'Authorised Signatory'. Without an image, show the vendor name and 'Computer-generated invoice; no signature required.' in Inter 9, #555.
|
||||
|
||||
## Decoration and images
|
||||
|
||||
There are no raster images; everything is vector.
|
||||
|
||||
**Top-right pennant tab, #FF5F2F.** The full source path is mostly off-page:
|
||||
`M560.4,-6.7 L560.4,172.8 C560.4,177.7 561.9,182.5 564.7,186.5 L605.5,244.8 C606.5,246.2 608.1,247.0 609.8,247.0 C611.5,247.0 613.1,246.2 614.1,244.8 L655.0,186.5 C657.8,182.5 659.3,177.7 659.3,172.8 L659.3,-6.7 C659.3,-10.8 655.9,-14.2 651.8,-14.2 L567.9,-14.2 C563.8,-14.2 560.4,-10.8 560.4,-6.7 Z`
|
||||
The visible part is a 35.1-wide strip from the top down to y≈172.8, ending in a diagonal edge that meets the page edge at y≈230.5. Simplified visible path:
|
||||
`M560.4,0 H595.5 V230.5 L564.7,186.5 Q560.4,180.2 560.4,172.8 Z`
|
||||
|
||||
**Bottom-left pennant tab, #FF5F2F.** It points up, with its apex off-page at (−11.9, 610.9):
|
||||
`M35.2,846.4 L34.5,680.1 C34.5,675.2 33.0,670.5 30.2,666.5 L-7.5,613.1 C-8.5,611.7 -10.1,610.9 -11.9,610.9 C-13.6,610.9 -15.2,611.7 -16.1,613.1 L-53.4,666.8 C-56.2,670.9 -57.7,675.6 -57.7,680.5 L-56.9,846.8 C-56.9,850.9 -53.6,854.3 -49.4,854.3 L27.8,853.9 C31.9,853.9 35.3,850.5 35.2,846.4 Z`
|
||||
Simplified visible path:
|
||||
`M0,623.7 L30.2,666.5 Q34.5,672.6 34.5,680.1 L35.3,842.25 H0 Z`
|
||||
|
||||
**Other elements:**
|
||||
- Grid lines and fills are plain rectangles, drawn as View borders and backgrounds.
|
||||
- The white leaf placeholder is not reproduced.
|
||||
|
||||
## Mapping to Voiced fields
|
||||
|
||||
- **'Rimberio'** → vendor logo (maxHeight 36, at x 59.5, y ≈62) with vendorName beside it in Poppins Bold 18. Use the name alone when there is no logo.
|
||||
- **'INVOICE'** → INVOICE or TAX INVOICE. At 33pt, 'TAX INVOICE' is about 216 wide and spans x 320–536.7. That works as long as the brand block is capped at 240 wide.
|
||||
- **'Invoice Number:'** → number. **'Invoice Date:'** → invoiceDate.
|
||||
- **Due date (no slot):** a third meta line 'Due Date:' at baseline ≈206.1.
|
||||
- **PO number (no slot):** a fourth line 'PO No.:' when present. Shift the parties down accordingly.
|
||||
- **Left party column** (its label is the vendor name in caps) → vendorName, vendorAddress, vendorPhone, vendorEmail. Add 'PAN: …' and 'GSTIN: …' (no slot) as extra lines.
|
||||
- **'BILL TO'** → clientName and clientAddress. Add 'GSTIN: …' and 'Place of supply: 19 – West Bengal' (no slot) as extra lines.
|
||||
- **Table** → items: description / rate plus unit / qty / amount. Fixed-price lines show qty 1 and rate '—'.
|
||||
- **HSN/SAC (no slot):** optional column.
|
||||
- **Totals** → subtotal, discount, CGST/SGST/IGST and total. The tax split has no slot, so it becomes extra rows.
|
||||
- **Amount in words (no slot):** under the totals box.
|
||||
- **'NOTES / TERMS:'** → notes, plus 'Payment due within N days' from paymentTermsDays.
|
||||
- **'PAYMENT METHOD:'** → bank details. IFSC, branch and UPI have no slot and become extra lines.
|
||||
- **'PREPARED BY:'** → signature image, or the computer-generated note.
|
||||
|
||||
## Overflow risks
|
||||
|
||||
- **Header.** A logo plus a long vendor name can collide with 'INVOICE' (starts x 399) or 'TAX INVOICE' (starts x 320). Cap the brand block at about 240 and let it wrap.
|
||||
- **Party columns.** The left column is only about 212 wide (59.5 to 272); the right is about 252. Long addresses and emails wrap, and 6–7 vendor lines push the table down, so this must be flow layout rather than fixed y.
|
||||
- **Description cell.** 249 wide, or about 232 after widening the money columns. Rows with wrapped text grow, so use paddingVertical instead of a fixed 37.5 height.
|
||||
- **Amount cells.** '₹12,34,567.00' at Inter 11 is about 78 wide; with 19.6 of padding it exceeds 88.5. Widen to at least 100. The totals value cell has the same problem: widen from 89 to at least 105.
|
||||
- **Totals box.** 5 rows at 37.5 would be 188 tall; keep rows at 30 or less.
|
||||
- **Bottom block.** Six bank lines at 16.5 pitch from baseline 746 end around 829, past the A4 safe area of about 806. Use 10.5pt with 14.5 pitch or a 2-column bank grid, and place the block in flow after the totals with marginTop ≥30 instead of at the fixed 722 baseline.
|
||||
- **Grid across page breaks.** Each row draws its own bottom, left and right borders, and the header row repeats on continuation pages.
|
||||
- **Edge tabs** never touch content:
|
||||
- The right tab is at x ≥ 560.4 while content ends at 536.7 (for y ≤ 230.5).
|
||||
- The left tab is at x ≤ 35.3 while content starts at 59.5 (for y ≥ 623.7).
|
||||
- The app footer at left 40 clears the left tab by 4.7pt.
|
||||
|
||||
## US Letter adaptation
|
||||
|
||||
US Letter is 612 × 792.
|
||||
- **Width.** Keep margins of 59.5 and 58.8, so content becomes 493.7 wide (16.5 more). Give the extra to the description column, and widen the party columns proportionally (left 220, right 262).
|
||||
- **Tabs.** Anchor them to the page edges:
|
||||
- Right tab: Svg with top 0, right 0, width 35.1, height 230.5.
|
||||
- Left tab: left 0, bottom 0, width 35.3, height 218.6. On Letter it then starts at y ≈573.
|
||||
- Both keep their size.
|
||||
- **Height.** To recover the 50pt, shrink the header-to-meta gap from 84 to 60 and the totals-to-bottom gap from 106 to about 40, or let the bottom block flow.
|
||||
- **Configurable margins.** Map them to Page padding. The tabs ignore margins. Enforce side margins of at least 45 so text never meets the 35pt-wide tabs.
|
||||
|
||||
## react-pdf notes
|
||||
|
||||
**Page:** padding top 60, left 59.5, right 58.8, bottom 60. fontFamily ['Inter','IBM Plex Sans'], fontSize 12, lineHeight 1.375.
|
||||
|
||||
**Tabs:** two `<Svg fixed style={{position:'absolute', top:0, right:0}} width={35.1} height={230.5}>` elements, using the simplified paths translated into local coordinates.
|
||||
|
||||
**Header:** a row with justifyContent space-between and alignItems flex-end. The two baselines (84.3 and 80.6) differ by 3.7.
|
||||
|
||||
**Parties:** a row of two Views, 212 and 252.6 wide, with a 12.6 gap. Labels use Inter 600.
|
||||
|
||||
**Table:**
|
||||
- Container View: borderTopWidth 0.75, borderLeftWidth 0.75, borderColor '#000'.
|
||||
- Header row: backgroundColor '#FF5F2F'; each cell has borderRightWidth 0.75 with borderColor '#FFF'.
|
||||
- Body rows: wrap={false}. Each cell has borderRightWidth 0.75 and each row borderBottomWidth 0.75. Numeric cells use textAlign 'right', paddingHorizontal 9.8, paddingVertical 12.
|
||||
- Continuation pages: repeat the header with `<View fixed render={({pageNumber}) => pageNumber > 1 ? <TableHeader/> : null}/>`.
|
||||
|
||||
**Notes and totals:** a row with notes at flex 1 and totals 220 wide, wrap={false}.
|
||||
|
||||
**Bottom:** a row holding payment and signature, wrap={false}, minPresenceAhead 100.
|
||||
|
||||
## Similarity to other templates
|
||||
|
||||
Near-duplicate of 7.pdf. Both carry the same 'Studio Shodwe' content and the same geometry: big INVOICE title, meta lines, vendor and BILL TO columns, a 4-column ruled grid with a filled header, a 2-column totals box, and PAYMENT METHOD / PREPARED BY.
|
||||
|
||||
Differences: 7.pdf uses Poppins for body text, a dark-red accent, a flame logo at top-right, a red rule under the header and a full-width red contact footer band. 11.pdf uses Inter body, #FF5F2F, brand text at left and edge tabs.
|
||||
|
||||
Build one 'Ledger Grid' component with an accent colour and a decor variant (tabs or footer band). Of 10–13, this is structurally closest to the current in-app template. Unrelated to format.pdf.
|
||||
Reference in New Issue
Block a user