diegomura / diegomura/react-pdf
Font Area Not Properly Set When Applying lineHeight and fontSize to Page
- Dominant language
- TypeScript
- Stars
- 16.8k
- Forks
- 1.3k
- Avg merge
- 5h 6m
- Merged PRs (30d)
- 52
Description
**Describe the bug**
I'm experiencing an issue with font rendering after upgrading from v3.4.4 to v4.x (tested with v4.0.0 and v4.1.5). When applying lineHeight and fontSize to the page, the font area is not being correctly calculated.
When examining the current implementation, I noticed that title and author elements with different font sizes are both rendering with a consistent 18px height, which appears to be unexpected behavior.
---
**To Reproduce**
[Please click this link](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f61622003a0046200099080beed3a72a005430a584a33c847c634f152a288c72005861e86013aa9800cd506251b367007e3000c24e0e984a3000ee4850b630213cc05000b4000e4a6e307e1c9a5400f4bafa3e390506462666566292e67250d162ea7460f0c80056e8588630223c3000b23c60c0b63c7925455a253086c6a6e6d59536b23c0831202ec47d487c081822d35881184e006e839810637a6cd95a00928cfc18b79af396d672488f02aa2f9c104e603600044b92f93c20b900239b43a0046592b4527c605fd72134a0e9ae0759855ac0b0fac82008791d4a00d0c671023c148016ea00811080607700170b4b050270f0a0bd2e8f460a03012890c0240019f9a42180615ac73158b99867d9b8788c1004199b62412878223e33268b23fa51104876a600edd5e80c86233f95d0a0ea98cdca6f1aac930fa7509a600051668219a22130f09c56816db863c000d15a184266580408c7908460c9980c290c766425d6baa7330e399fb6f9388c0430d99750c23052cc985604e4813ad37a419836b75faa5560991008e0c005ebd160c078d024088c44e101c71c61be0f17de76d82163717a2d39a6e1ea8060d2e5ef705eb10929d6b21800154c0bd100cef9583d41a608c0021e0ecec05e9377d3fa70c05cce3080f514945495ad41c3f41d936186c38c945d80743cb35d8d3738356e8b0881df7911c0d4635f4c45616549db0afc734021089df5000bf9a148f514c904ccba1e00047c7075041b90a3a6162c003420223cb4a0856251876d83722b91b0602629c0b8ad624bb04873614782bcfd7d842680fb47d4f21843692cc1e1135f4ba138f630d3038c7f1114741cacbd8430bc14b0d7a1e9070f06c5e507214cc0410726358040f72c3f91017d46090081d538c50a51db672b0160e4b30eb4197a080b05b1c06e5f0a3282981ac99dd62402366460df43c64caf5d0c076c65669549fd40980835e8d55fd760f340a2aa280a37109584dda52eacc100d356257312d0ac13319c3065c8aaf2b0eb358bb350cedd561cfb414d506d509487a51ce326c27081695f458081a71e88abd8b76007753dd5180a014c7822a0506d75670b49800031270e29fabcb1c01ab4c05d9a039d7d6ec5f66502942c52197631a270e308994f8ae9407acc41402566842315375ca0f026c320244dbac05695603ae778640001b8603e1b96691e2509c50c2f70da5355b603a051fd472bccd639c7430c570cff79b3026ac77d93534c5814d35ab4cd56917181994406c036f04bbc73f2b5733689d8ef4b29037165a189031d832c2562faf485a0e680b076b991b180307e41600805c834ba1b271ff700e5065b92fd736bb6299132839f596a55e71bddcbba1e91e169cd6cb3994973195f4df4be28f79053e83cc33386b914731afb39fc3a05ead29923330db931520a50004bfd9335cf40fd4e6b133b148832fa8752b8e0061d7c9ae4a4b17d0f12a9de1913d6b87d79afd11214b8710c107ee382ebeafcc11a6f3d457cabb1d591c4ab0ee4bec1dcd8eff0df5e824035664cd95f1e6fc46081c7d89c4401105ceba8d6b740c0c71ba12034c914fd84365a4e0528c7668bc8b18f00f0fdca517360a5f52f96007c2d89438a43af74ad17d77233d580077d8b29e528a3fe07188af4496e34272760148e16298038a5c9d480f410080d498a160ba939b4a65a7c0a86f41c173d893fe5e27fdeeb43694861409d44cc16df4a9085ec28251be2ac2310708c202cb952a7d2a2f8d9e3cd5caa99b91216e47191497094c291b938611048359bc6341b38528b56f66218e2c8abab48f3860138e295709576a4a3941610609844282077223043b86654038a25743a15848450920c584c42fa4521815ea0c4fa753e406977acc850a5d42633d350ca1546a9ff8833d86c30601d000cad38ce2b22a9eb12e84b1e860da19745523e2350f09e04d91f20e2da60c8622e41cdc9f69d320a42127225471625aa6d4e685d14b9386f2513407a4e142d2c42ad6ea702104ace4228442366230812843fe5b2e44ba0e8bc1b49e70096145dccc74610ab65e488c47c4f420107688201d900a5d96233859856218b9a25d5e8b14e20f061c9057388c6001814fbd4fd88f0809f1425b8a5a9ee779353296fa369e0089492de65809b3b479e2711b9f1476458352f11e1bc95312041ecd1ee7b9310ed9c67cd1427a9dfa0a1ccad2fa9592157c95b2b127ee10450b63bccc148b156f2e5ce49acdf4b9cdc3ac3a8f83061c6694585c978e660e4cbc3ac27c34b6598a58ae951b1f50f5acbad2fa4157e4f8b73418860a5b2f718ce9b13ba458b50f7a524a0811395f9722d299c5915223b389780792573929ab5ae3ac7f3e17414c26013336160afe7cd1d1654f0a4e2c051d33b48e38de59d4fb74adc8b8b5cf92cf572ab01d460b2ea8f7ecd149c4244f22592a85af4ad22a8b96d8af159900041306d01c52601902052a9e92acd113c8793e2101c51325bae54af0003900e5fc094206948d3c72a3722f61667914ba1799a000217e9830e2b4c0868797d393241ed83c64cbeab9dc11f059a45523bac2e63cc745be1e091ab094cbca2487318eb51ae2c15b13221829f27d1600839eab326ea858a574c14bb09c31d65a647ff28a1e460c2960e5cd180b88c812e65d02a31bd410c9eab50911ecd0cb2f0155ac310562201251a72bfa73998075762ab2052cd053f20c404e6b2615dc6a14acd0a17af1b81e1b589f65ca074bea3c3f1bd14e9301e18590cdd55a20a4733cf3102239a6d11103749c4768d318130144fba172b27757d49349923f291a6645a7671e6bb8aab9305f747f937682e65d63c9694428f44202c2a5d2028b40db05992e744b96c9c3e11e60d41009c6aae6327386d65015bc44596014d32fec0600e24a88665ce19005a53e2f945c6747a073da35210220cc6008cbe00007e5828e30e5352b42077cfb0727354d1d55651a185335ae32f01101eadea185f4770848f44c04e0f8b6ebe6b496c400711583d139a3c7cb360b03ded140f93f1c626bb920c9be38aea8aa7a1264a7d6a77b529b6d1e4ad7037a90eb56d9cd0f8191846d39d2a8be72936bfb076e50cd5da6792707198e1f24e53f67a3ac38cdfb6941d2dd1f7beefdcdc51c95989156cd52b08b426ca00d90a1140422f4a48bc9cca74073e217771cc57e9c2959a91caa382f3bac482a2e4a9b3c197dbcd9bb0157a9d2b3564cc44b0120d763014732e634e591d0dc277531936122f4501f798900c7106c03e53d928e330f34e2c0dc027600543944072937031238aa317563b64e086324202fa382f6107188210d220eb0019931f05217bed49542514de28d28bfc72af7db272d2512625952d76a6eb162b0b30150a1f844da769d0cd532a1cf42948464154b697d385a367330b9c5e347f63d6c54578000c891714b950cc0a554635aea51b133a683793f6c2b650bf8e4147debd5a7ebe70aae30a3e7af2e776e76472603e15e46b31bf966056e14151f6fd4fc8f97cb200fcae30f49e91c627b29abf92a108a04027885c2573d606a120a1eaa13b6ab01af9ec274272163baa3b938e2e9b7c1e9a9337b04fb5913812f32b18b84e0e9812bbe3661de15a1c985aa6a1712ea3ac980319a2a3ec9e18c1b7b278afa087a960fd3353a034db088552d04051510d705b0d290605e23baf833b9af1bba2c0120ef3122923d40602b826b0f000035ba69040d23d22323321dc1b207227d1bf251ba997c04fba5aea37b3cc848ad62bdaf436a3ed174a571090b0068a1a2729eb0743c6aaf03a03c13c0da9a876f12c2218e84daa0208218237c0d83422c2260000132c80a41092a23963a222686f3bb8ef27bb7bb96000048d485887889f25ab910f89c4bf59ff1d30961069c51e60ec1862161be27e1d89d631d0b9b16b473cd05b23b0a8848855a81006a3082e3d45403be03ca199ab225a6faaaa770c008784c781bf3b96392b352c859883c8952f239048e2530ad0311e31d48aab468b62e19f526c77f3368d81baaf783231c1aab1bb3806028e2f7b45aecb1687f15f29a97448b31826a20249cb963303b42f8b404602c58425991d40402aa30f95e00026b4491e85ca29a2925a0cf93826a0304939db13c49516d2346412e6ab10a3b71393a95211a52a7503063c1711de02e016a77996a90add1f13949550051ea2f13ff2a52faad880014a321ff08133e11615091498ba0e31220e18600387faf826869886b3a600012aff1de29135476689523c10db78a371708d92ea1d38b8b12950aa8bcd22e13832e3804a63da4488f418028e09d1a19fd0b18d72aa0881699602762803b87ab1ea2989638fe220560ba18c6a7d97c2a9a91230aa04882281ce1784b93862050303cc4067a93f8b4311da4f27f81102926c98a3813d72a93181cb10388015e00c0aa455b912e72dc58490f91d3370c68b4a426f80a7888140150b4f1dd0df9cf0bdb071881f69bf918a7683601e219b6a32593e3eb3398c729aa8e1385f45e90f01449b81f51e183274fb5a1be1d60484a382bb7511632dbcd12bb012a11363d93801da91633e1c0b68aa08e3b1c2f0508ad71968662550cc3352399862ae0de4f5b342a385c7de5ce1448cf25b384b3201e7d3ab3b086d858819c3862aa675bcd019a0c3b533e47d3261953639ea2e3b624ca3d62ee6767309229649828588d72a190c5892a90d80a153817840a32e1de2e53693e908518e54c5aa92e5b0ae6360b4409203838638e03a69c9ce0a41af8a2bfd9d45648693b9280aa913230d9ac6886f42328926f3a297051f622302431c2e70e14e67049973378f8bd85ce37b17d1312e502e0c017c19e94b97428846a0c53989dc73e35d3611259513800ca5f005c4878965c0ad21e05bb3678a9a225bf95b951aab18036909bbf23910e160e3e156c91f03c5791570bb35ca0296038fa998b02fa0ab0694b4a862f794cb215c33ba8f465d2762aa7ea8732a12052216e737cb0e5c2000072fa34a22cbdd0ec16a4488c66d9a5172d16161b3d1be2aac8e734d70481f851baa6681070602e7a1c71bb5047cb267dd34033526f8b1b7a7654aa719bc72e15284af13a2bb92694447a0945187a25e791a5dfa8b01a7b92c30e1bb83e739c33e0dd6f103e4db9a93e57b904918b0aba6e9f6a4b9d57b22000a010003f59a0cab4c2c5b6241f9848a13198ea1272f46207d31de46e21c78f32e04e37402030e29e59040304fb6a3e918325186ebb80f4b825762546e339b0880da8fd3b093560e20730715122d33203610926e1caba38ec3be495a29b1a6c515498307a8e524653856b9742b276529f0771619d28f00003f3b216eab6658ba153180b23483003cafa39b43e0d62aebd0afa6f42aa1d376544e1da2f434a0d813122a0751b85f105a90b36ca230fcb95505258b1c3aa17355696591f08b05b7f12971360e31f18f998d05e3a7bcd1311ae43d1a4a72b2a44e2b1b6c9c099497eba16b510a403326563488052999bf49ee06e3817aa2ab3d35f853857b6b301b16eb0a69993e7a72f669e5435708f5180bfe1ec2f493984eac1b39a64bbc4e68bf9ea10a3c9337ad2bc12be3e51831ecbe24510c53da99b92a45546a088be13d93935e07749c74a32d95397fea1705a160586bcd14608c29f3eb21c45aaff12c8850861aa505234bda6df3888735df5917952fa1ea7a33034f54a616da28a1d208ae25a1b3d1ae0ec332315b802ff3b9352220470bbf7802d60882284e403d4bb9286a87e23446a6b7a3bd65c57749c7840b17ac50d8fd443144a713713ca78943c8a34d03df12c8ca1688dab6c225a4bbe52749c984e3febcc9ea3f33cc7534861d345aaaa1c755768e1713410a516d67008a1f01f165f98d23e212642b2090c0d1207232381398d8487e28aaa718d56d1862e735572b0fd2f6b4b99e7aa2b35e37357c72364c0000214003cac41401d108120b4c78fe3674b39a106937cb723b2bc183839f924f8e08c2d0bd012b7ab02098678030893e01b55c8ad26c8787886b3400210c0c2020f01a25a3cb951a1b08805086f4556551d67342c0ecd21a7bd1310711971f5a013552828b50d56a4b412818cd726267401084027390d68250ca873d6d0ebd5a6afa12faec2be1b5bb4f3522367d6058d08336383d3a405602716bb2804110a3784ed82ab6b12f1af40d02323a30380ca4e3038afb21d2ac2b62a9ae28d4ff400544e0dc7b0b30399487261a3b3561848e8a9708a1be6a108422cb460a2ef56e93ae3ab84e1d50cd606a590554c6aaa44b45eab2b6159a80a046bc33bb6c758ab7215e170088234cf02e32e50fce6e3ddbcd3302da6048e8a5a0d2fd1b121c7102dda580118b28b9103019e8851a190ac2323a5f8c793cb06015e266b3425b3aca49a8112928f6f97391c51c04d13148aa4d2aa4910d8926ab88a2559f9c0a436991dd0098111c62794e0bc5731a613fe71d82015ba575ca3aad66be90a0f219289d4a22fa9213a8e83e267215186f340d218309b0419de672b47a9750b1188dceaf47719a93e2bd84592030ebf12e538251e8db394ae740bab59ae88463d750c6cd6f16cc30efa3520d09efb2134c1538fd7da4d27e629130fa19a800751fe9fb090e298a15b965af96225ba4814ff6ac07d3a5f6d713825d3663dd04f8b96298860ad3d56eef1537c98039970f8ca0a015c86900db3799c1321e4b80e7165a0613ed15e00f67b1c2b5b1fea8a078d8914c8b99ab44f8f02835f111e401ed9bb81f500a3379703fa73212fbbe3810529c601afdb0529e2b81ed85613aa3f8bccd5a0b6206b09939625a5d2263737fe44eaae1907ae12b66adfcffb297ae37d81a923e1e05229831cf3e07bb1de2a73656fa07f66e3c925d0878c6ab58d605aec8f7261e02e380a67852c810489ce2bd210b0f193a31e17acaa0c2810e7599b41ed888c2cd91baec1c63b7a8f4cb9d46c2956f962769907628fb0300cd0518db0c164e1d439521b056cb24f03eb0f77278b346f780372d893930800083d8c8b3c8c76ba95039fbb3008a229aa93998e4ee9ceb34a1012f181a9c62dc4b455bbb428a486e66276985c7972ee4d0dd6c625d0a169ce552e1df2692589246ab92770b44a8f95b1f4a0745bd70aaa377be0fc674c9539e2527063f666815faa0fe115e108c6a185a118bc9ccd8629793cb20fd5f536d6210f6c40e749ed48ace621acc146c011452c1310083de9302e4ab828d3382481e004807921df1dc5f27d3a01ea2f000820e2a81103602901e02fa000018000904801dc6011dea631c2b82e40c01fdd7d1bf93dcd82a817ddfc0102b80780a01780c03e4450f43cf81e41d00302407b00103b3190190303090ec8084121afb13825dc70068f4e1083b200039184c40044228fd3e37802300033ed81401400a40402b22e42e41daab01c81f00771d43002c82132e424206a0b3c881282e409c1c2000332e43a24003eb68000348001a8001b08010d4003a88009c3c835e1280abe3006bc0006800270f016e96ea7a1401b83d3d902bdc13d900492edca68e02ada2c10cbd804594bfc4260153e502280a83b20482dc13112808a1093680800a43b20abc002b3aa427d27df0001ba0239bb23ebd67fc7e382e7d944553ef5ea3a7c97e68161c6005476c373eb20222d7e7030bd4008cb0e0600b7fa44702a82379921882c7edc077d77cf7cc03a44000b3aa67b96ebf8918c33ca1cbd9b3e8fc90f0328b0881d3cc0233f33eb3ff7e3787b2ef48fe6818fd20377fb21c23a46cff5c3cff6c18012fcae9382afe6820bd61b3a6b13e7cf3ca63b214fc0003237807e1c04d090fc27e71f53f890dc7e97f21abaa4dfe4e624303fc60057f754877c37e29c6dfaefde5e4a00f7a5008019404f709fc2b04b856225fdafe6bf560140290133f5b81cfc17e880fa79330a706e02100bfddbeebf4df8603b40f610801240f52b4a1c04c00f011e5648a103280f00d622ebdde25c611025fcdbe620e2058002be7bd71d8c829017ff00041fc380f600b99381441ee048079fc27ec80db81c021415ff42fa4fc3419a05a07dfd1fea4467fbaa540037b067b73176aac0a10403c81eb923d04361ee8750700033c7e89a810c260158194033f85fc901640cd02281bfe8c074f95833806203701401d90890ca01830f80cdf1803a42a8cfa03bfa2fc77ecbf63818434f0ce09dfab82581800a2217bd09e3a90702240b80340606293dbb494f2a019a0d009687443e3cc80400000) and see styles.body
**Expected behavior (v3.4.4)**
- Different font sizes should result in proportionally different line heights
- Font area should accurately reflect the specified font sizes
**Current Behavior (v4.x)**
- Different font sizes result in uniform 18px height
- Font area does not adapt correctly to size changes
**Screenshots**
**Desktop (please complete the following information):**
- OS: MacOS
- Browser chrome
- React-pdf version v4.1.5, v4.0.0
Contributor guide
Assessment
This issue has not been assessed yet.