diegomura / diegomura/react-pdf

Is there a way to make the backgroundColor fit the text instead of adding extra space when I set lineHeight?

Open
#2,458 0 comments 0 reactions 0 assignees View on GitHub
new feature
Dominant language
TypeScript
Stars
16.8k
Forks
1.3k
Avg merge
5h 6m
Merged PRs (30d)
52

Description

**Describe the bug**
When I set lineHeight for text and also use backgroundColor. This backgroundColor is applied to the paragraph: text + space.

**To Reproduce**
1. Go to https://react-pdf.org/repl
2. In the stylesheet I added lineHeight:1.8 for the text
1

3. Add childText with backgroundColor in stylesheet
2

4. apply childText to a paragraph
3

5. backgroundColor is applied to whitespace as well
4

You can check here [react-pdf REPL](https://react-pdf.org/repl?code=3187b0760ce02e00408a057025803c450298c0bc300500943807cf805030c00f0022230080b6198531165d400a02180e659a004f003619b006f61622003a0046200099080beed3a72a005430a58d3c54a8a231c8016187928c009d54c0066a83128d9b3803f1801856d5cc25180077242873187f1e6028005a00072547184f0e4d2a007a5d7d7774ec8313314943392830b1753a307864002b742c1b18111e1800591e3060731e4cfcdcad7c984362c2b3591e0470907b6236a43e040c1118269f3b00374ecc083ebd3634ad0049467e0c43cd11e35339245381550bce085b606c00220cbbb3880c80473a834008cb25abc4f8ef2786406941d3ed8663518dd6410043c8ca500a8c3383e1e3c400b75004088403023800b86a58282d87850569345a305018094486012000cfd5210c030b53b07239a49b0ad1c3c4608020a4f3120943c111f149345913d2888243d530ab2c1323a5d1e93cf6392350cae2559261f4ea354c000a2d50435444083e0f16c3ae6ab5f5dd1e000693d0c21292c020463c9fc3050cc001483b293a233796d99801e8e1a3c9c46021baa4b286118f152402b01b2406df1ad274c165f2c548b7552cf4b4c0002f568b0603c6812044625b08003d6775bb6ddb05821fd917a3e3aa8e16a8060bcb77d799337f12866b21800154c0ad101f619580552a608c0021c40605b602b44bb6bbed8c0f180dc3f408d312264b26eaf694f93a81002af13b2dc97ad7a5ed7a86dd1987eb1a6c2ac4b092d7af225846db1362870c17bc8d614a7eada622b0fcb76cd136659d82f84043a2a0017f54f102a61920d19343c0008fd61ca082d2e475e9ba30ac52a3463ee02a28c256ce9913499830131b60ec9eaa235b4471ab23c36e768acfe3400d91e6b9742e949c30f0c1ada4d06ccb3ba9800677888ed809a5b2c2ea6ef27baad0b4d7b38663d2d78b2c3020d7931ac020f39368c880b69091024a01b614a2564e5f2ac246100169d2b4e94d6e02d278619814de2e4cc48336a4941b6b38a1b6eba180958a5855dec04c04eab412bde4b3b9c07e5917f993bf8ac14ebcab5c308011ab13c2da25946a49f6181baf967914460ac6d94b8b5d524aad836cc84a45badf10b4ed806d3776f8ada2c040bd8b4f972cd3b00b39ae928c0501863c3e54c916f28d8b4b6e0018ad8483759e476df67a6012cd000eb6ad6a7a92017611c9744b20d5d871045f27c534a0216620a05cb54fe07253ba58bb63eeb5184666940b0b514c3b40e50c8000370c07c2d29b758b62baf847abc84a0b0ed4c9deedb6e1a9d89d8d81c87a0fb532f4b0f55ddd28462c1862ae7a1aad4c38c0a4a206636b7834d9daf9329995da2aad4594823812d7448076ce936932bdba4c69d4d8d01604d6926630080fc82c0104393ad3516b61896000a44ad2d79598cfe2424c8c3234a44a5982b2761bb822ea2d29c3526a996b3f13c67c9e9b69dc61fd2f27d00994690cd2f0ca3af6b3787401d5609d932fbad8b4872e05280025cacd1b65c062a935cbd5bc44eabdcdab471f7d46964fb362ef8145fb5c3f95a500da72dda347c990c064d3757609d9d6f98218d1bbb2e60ca729c3f1536b4abdd791b6dde1b6bd04814aa4a1b17c737e2e78af0ea1589c4401106caf2916b340c099c4412008c114bdbbd054fd89284717adb0dab383ee3c8d990557ae7cb021e32c4a1392ed2ba9e95e9b969eac07d8ac7e4829d90ff1d44455a08b21a5d9ab1326b0424c01031a46a5fba08040aa4390b0794acd791cd3e01435a3d27a18151f2f11fe574c1af20f6749588fb6a826d885155645c9cf0e61e8d787a0be374c95f30f763cb69d2b865a44a17894e0521c2c33c45a41e810520e4a778f09cd5b04941ab4d310761a4576080f899a1880d89c8c72356ec0a394136060985828203723d00387a514284225341a14d804580458a19af1885b40a43003d4e8583aa3c87524f56693669a38da7b4a3e4628252ff1807f5960b0ce83b40032af62d8e48aa4cc5091c25a20330627cc4678a945c27809623cd7956a032e8c39af2d26dad45029086ecf15ce1cb6a9b53aa13462eb60bc844a82cc9272b259a620169b558199d567216c2fe1630605f14b91f0d93224d0b46387c4839563802689d9b32fa60a364e48f423cb74201fb308201291323d9223d870c562d8baa29d73ca54097277111818fb52054e793a1d8568425220f056ce04583ce4f93522954d4ea015497302cef50e78de7ae7c46d8a62942e2032f27a4e189000f6a86929e6c0cac132e5b61054afd991c66c2d352cb0a864e595883f2086c8cb3ee6602440a97952eb25d67d8ac08e0661945c19d1254eb731d106144b600ae06631e158cc0899dc752b3da68068e55e96d06c3d56cc398d85164bdfa29a784e68c62947d8bbda98f8700d6ac8af2071a4448aeca65e00e4b5cc4a1d856116756fe2d04973ba74c58442a10164cc159110b85bb16030e69d245d82f2aea3d8b02115c46e5c925643ae5042e9a23d1b3d8e881e4d32952b543b245c63e277462b3d0008280da02724c032003150dd2398c20797727c420272124174fb0806dc000e47d87f7a508179234cec08cc8a5839964475766800420333a103558a82015cb40df212b00630ed35b2b7c3e0135f2a8719831b3a07b1a5be519967581358d11c674a600545388856c548904e3cf2c5f07a3ba8cc1bbad2295d21e5d87da735c8e3e76474901b7ad42c9cb88c822e25c02931854a836eb54152cecd0fb2b0135a3d2a22228820725ad684b3983357626b29904d1adf20c41762b2a15692bad856628aaf1d8191a744ea74a3b55ea9c6f16a65d29c01dee80cd55736f24e320ab104239a79b110e74e5b6575318130044aba973325b50b6fb9c88d616174b5d64c4930a8d77b8bd177a8f5202fe0dd20999198725790b232810c9b31748002c87714d24d944935a998784398d50401b1caa98eec91a397f90f1e165831302a77418163511cd07987a7fe1dcf89df4718d1e82cf766d612726e0bad51465f00003f2c1db10751ad5a1005e158d93eaba8f2afc8d0cd6c0910b7808800d8f46c2da238a525a2605b13ac6016ed3889592800714982d159a9c02b660b003ef64878af00666b393f4b12d8a514ce52c7d310aa5bd569dc249d33cf9ae07a955dfec70ffa628575f074aa9e2c776af0d7d7aaed23cad800c74b217547fb2d0660061fda71c8e7defbf88fec03d71532962da74ef55b33f31c6ca1b58b23647822f724cdcacda74fb3e2f8fe3345019ac919991d2a8a2624cc70212f0a873a1924e2fa3b4155b1889407aaa18889604410ec603b6374aa93302155e6691126f718dbc33666074910cc21e53ddc80310f325aca63b000a18a367a761526206204adc3f56bb524bc2d24202da1829602a46021092276b00599ba399097d7509582614de28d34bf475af296a25536a6a29ab993198424f9a80931b99de7d3b2506749850e1b12c906529a5347dbb59e8c6a6ec0fd6630db8536e00032c45393a50334c9c520d28954744f69e2c9d4c425635b4027c63321c5133d00dec14246ac1f4375737b5db639300f0bd2759cdf33282f0507c7f43f03e1f96403f90bf2ec4945d200c1767353f275a3640803711d872e42c29444143d75a4ed56075f65814e2c17f514906a1d37b85d30265c346705e6b06174972ec6d37a50bc58c78b2d32f93226942e27940d93002336140395090c01835c33715b470f74c77a7aa74019b41112a5a0ff235d2ae6367f52744dc5770f077724d0fc14d6445447447280c00701561e00006b6c44a05c402422406b2380a42a417a17e2a34fa40600d2ca74b7945c305917a35d710eda2e972e5291603516546cd4d606804d15e2341383387b12f70b44431d0fb15780f82f87b83307f84044c0000265907885294844cc684550f5e2286f734d6b4230980000091a933158323e1cd60a7f04e09fe4a619a37620604c45877464c6016bc7cc640aec6ae1a353f0c01b659e1524ab6023bf7a121c4f170b0bc2790330ad06b2df75576e18070f518f035966a61e85a906a0dd050bab3117a45b079436c12679a0624c63a935525b32c5694ea358cfe3960f62d8b3e17a2584525b88ee0ce7f076c7ef28b3d912d37e0be7350e8fe679020a0f8f577a82f15808c018b404c106d10807146f55b06dc0004d4897c41cb4b97740bd6d459f5b069478b7277dc16d42a55a01b120bcd5625c37dc3645d452c4230a50da7a54e24ca21c42d6ef72d6210ba3e22c732a7f20545e25fe2727f5392268000296241fe23d13c14c0a14294976bc5446bc7746072ff0f04d0e3165648c000256fe7dc1222a8df22ca3115381587697ae0e16b27940674712650a145339661c5b0374480b0c474b1116c76c03a3434fa378aae7141104d32c06ac5005b115831e6313c73da4476a600a25b5645e73b878670074e59e7e611045001c4f0cb24ce00a060198c0cb5204130613b09e16f7c27922d90e45025ae152304c965077bd7683223c4160660c64d2f61b58c8790c359a5396a62491102800a129e4ba6ab25137b7f63105750ff0316ed22c45c03359409151b2d627331273576c67082c298e020894704ea1e09bc1b310673c02c490da4e5736a14c7c240500902753766496407514c13c5814d114147cbb03e08116ae72d28c52a1b068364947331c3bcdeb6a81293e0738d5701c08969e1365c306b23ce4b552502e6c5895c4b54aeb3967d34e826a3b230c10c10036d5da1fc81c6c4be442c5d24773ba5f64c90853312ae54370e10b311330342db04f0a643747dc74a2d23d260a09cf188d515ca4b01c6a80c43442b05a34930402a901c78875f74520732269e7a4c557b904f7a01715c3310d68525124d71652f04b61396678c24b94c730a2dad15356f4f13b812e69a57a26274a21c18020d7a4597268310a9468a5310f8cc484b55cb5d700594d82ea870f72ca553724ee2c265360a8ff3b76a32922d273746436cc82b7f16c222f9209c8fa0ae7b61b96052c04e77429606175f0c2f71b3747ef509524342a234e8dc36ac354c3516675a00a642eca5f951ca040000e5b45e42592ba4586d4b113bc7e108528b1890c02d80f47f2dc359314f29ad413bd2ce4a30d4cd03f67cf5aaa366a859306b1642ba6807aa2df3789f4acad54a3368e3c2e50e5e1343774f70de0b45f7128b44c2f63487f016434b720866c326adce6d813c3bade257c2f2fca6c916c37253ac1675704701d24b2794a440014020007e8d43952425b4bc568c43aa0123339478c2e8b8c640d1239605537231e3745e897456c2f422a238eb04675943d24062a318a2701e96947310a88c623611039d5af142a6c5f67f635d2c068c22c52929c6a6ec74580fcd2b5c4934e25252e72cbd2708513a92685382e27dc4a536e09f3a50007e4a42dd4ab6fd1108ad4880230602795b44b6c3c3cc55d5a13f4d68714466acaaec0345685e433026261466a1b13e22b54dc27107accc4b00c264a1549ac3b04943e68a2e2a03e7e62b68a90ab0c012c7463e350241a4dc2cf3391e00dceba5496cd78ef74262360d8152949c775502b4b5722ac80a6711106f575a66004179c49c082c943aa73ce26e709f6c666d62dd6149332ce4a52d64552640228d25da3ce51447c6585e947349d5830f68c93b0180f7d0541647148dd422cb033c3be4067d97c4fe268a4750543926ca24ea113c23b247978aee924ef860da8272677ce2d41c09685b41f41e869efec8821d660e8d297357f2d4c74ebe31b71477ebb2bbd5b47d4a46506eeab0c1db79145e89a0f46ed3ba71c45852412b7006fe3725c41e8c7b39636834cad5250f4827a83817ae4d488d4d4b474d4fa8b8a66f20a083629588b4bfad41089364b64054946cdc7469a05be6593e40d17b105806b1973be4e955afc20ce5321102505b0198fa6840466ab5781e5977576c2e248224a1dace03643e0012ebf41a23c6b286a2412e838252e0601105027b19850bc31524e51ad5a7746ca2aab967a402283e3710bcf00fb6020a6aa98614edc00042800790882803a223d77a5611bf02eb676689605f95a42e56ce57f0ea2691e86a17a0556c8cfcc99870041163c636eb979a2d95687669767b60004264184001e2546d42577961d611032143ee2537f14618014189a234a7a2620e23ad37b68c4925d14a0c2ef876c1f296eaf747f018e3a1ad00618f7661b7ad618fadb465f25833c76b419faa1977524dc622e7a2a16e1ba5680fb53788761e9523746c49f300d6a71e6a1a06242462b0594f4651b4f65da29872c54c825369f6820aaec6b8d6166018677a5703921b65ef26cf80d7024077cf5a7f02595f45c59ea9d209c2d72ec2aa69ae0d38ceff72a8c3354e96d247390f90b526428d6c34f6c4ef155fa1802e01106e99e00c674a105a9c4a1ea66607b49c30f66d4365a6640a28e285874b0003158f32206033d60a34319586e31c700f722960c06dc2cd3d1612a86876602452101ff2812206040e71a29554bc0b72515ccc6d54ea78ef3f2c22c072cbd14800c05608856f2901cfd47959e6a7534bb73ae92e835df06cd642ca5fdc7ca5d70f620e994f5a25643c34e3ca1d6a3aa72fd608378cecd58f04c238ec9e9a6e2d6856e58f0fc9fa7f032851d20174a3e69cb73632900aa09b6b0cb608e7ae50d7a828f7af61db45c42a17df6425581a73fac749a4c4c12214483350066a1d52f634cdc4e6ae64e758f013ac9c4a9db340eba527eeae5b069a58c2ba467372dc497479a59a339d4cc25600e234b28f55a31406b975241b56f4b7343570ee2ed40c26da6dc71e9764453361d5764409ea66996accd6b6a706be213c9e0535689dd43f51e580cd2465f0bc5026f500c2b5ab66f55bda43814f3c43c1d164a4a27a121315306b69a60c04e802c9d31c38e09c556e35ed46f60af43f2f5af5b412ac896f45289d54fdc24e2ca801e3ea9c39269a70f0c336b3cc7c0d5aee4a5c5a25f6fa04b0144a3d31101c07a7c121e4a724512f7954e8602159de46cc1dee4155239b67c80c4ef101f970d284522eea66ed38e3c55b306071a4a316db82eec3284da84c38b564ad661eb4f0e6f14a8541cccc2261000107b1fe64dc351cd2a64c0f6603645c49523336698947565e417c5e323500c1b8b4c6a58dd8bb514b59c65cfdb0bd3580c11a3baff432dee5122973ca23e4d24b966c317276e42bfa68ab1beb40a8b5ae35576e8bc1f8e199520dc4a4f024a936bed97e15416dc491a942ed4063cd8e1011fef1911792c18ebde8ee8fda0d8ccc2195825a91d9d843d9bc8cfc3edd61a6201007d2601c907001a1fa4903c00907721bbbbb978d7a0ff5e00106bc5502206c05203c05b400003000120906bb8c05bbf0c3b00700c8180087afb8541fbb30550107a780200706701405701805c8fa1d47f704c83a0060680f600206663203203fa34cd907f02434f65b017b8e0781dec2104a4000720498806080542504e7e6f1786002e7f302802807880807240c80c80755603903e036e3286005fc30c0c85f82943e78d18c80d8204000660c83448007d6d000069000350003610041a80075322f901dc2503d7c602378000d0004e1e02dd2dd4b42804704e7b207fbaa7b2053afc8b925c06193186194b070b5fc2884c0167ca04501504a40904386aeb645296d01007884a43d7800560d4ccfe120037400734a44b7a2f8cfeb02cfbe052892a0be8547cfeafca055066f0c431034fc38397a8051956c0c04a4548800160d4ede2dd0412b1ae7bc3b7b4179efb4cbfa0161100e79806e7de7fe7c0fb6fe6f67633eeefcd05effefc1f980204548b1ffd809f85830069f95d5b039fcd047324330032ff17b0c4a461f8000666f76f8e04d0cefa3ff4ffdf9a650fe94821a86a41feac410069fde7eac045fa27057e6bf2d780bc380dff4a036f0f7e59811c04038fe500c006b01801c7f51fa1c1c7e93f2bfaafce983d84701080efe9c05efac03d9e5cf6d03394200b107d4a739a819400410be1ca20b0317b920410c352df8700ff01a37c839200019c03c23001f42ecc1000284b342485b0392139eecc7cf26fc600280af2a245d019407005801cde3bd2e30880401adf0c06ba55880df73eb2ec8c1c7f77fa7fd901cde4b02b3514130071065000fe48001fa402c01980a7fb97d5fe3005489d83340c40cbfb5fc488b7f0d4a8001415cf1505502bfecde2878c3c724da0eae15d0ca0e002e7bbd1a502e84c03b029c04008f051fc4fe1a94500bfd180f9f2086700c408e028025212a19404061f017813007a87cb1f4017f29faafc67e7603c85442660310ff01c43ec141f4a7b53d75256018817006807f47a7af6999e5400d41a01b50d085185000000)

**Expected behavior**
backgroundColor only applies to text, like on the web:

2023-12-09_8-36-16 AM

Contributor guide

Open the contributing guide

Assessment

This issue has not been assessed yet.

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.