Agamnentzar / ag-psd

Javascript library for reading and writing PSD files
Other
496 stars 66 forks source link

Text font size is not correctly parsed #150

Open Hardikfullstack opened 1 year ago

Hardikfullstack commented 1 year ago

there are two text with different font size but when I parsed it. it shows me same font size for both text.

sample object I got when I parsed psd:

{ "top": 235, "left": 153, "bottom": 281, "right": 374, "blendMode": "normal", "opacity": 1, "clipping": false, "transparencyProtected": false, "hidden": false, "name": "FIND YOUR", "text": { "transform": [ 0.8432519079124537, 0, 0, 1.036168606195403, 151.08313301198413, 233.05700446108017 ], "left": 0, "top": 0, "right": 0, "bottom": 0, "text": "FIND YOUR", "index": 4, "gridding": "none", "antiAlias": "sharp", "orientation": "horizontal", "warp": { "style": "none", "value": 0, "perspective": 0, "perspectiveOther": 0, "rotate": "horizontal" }, "bounds": { "top": { "value": -6.328125, "units": "Points" }, "left": { "value": 0, "units": "Points" }, "right": { "value": 388, "units": "Points" }, "bottom": { "value": 142, "units": "Points" } }, "boundingBox": { "top": { "value": 2, "units": "Points" }, "left": { "value": 3.421875, "units": "Points" }, "right": { "value": 263.322265625, "units": "Points" }, "bottom": { "value": 46, "units": "Points" } }, "useFractionalGlyphWidths": true, "superscriptSize": 0.583, "superscriptPosition": 0.333, "subscriptSize": 0.583, "subscriptPosition": 0.333, "smallCapSize": 0.7, "shapeType": "box", "boxBounds": [ 0, 0, 388, 142 ], "paragraphStyle": { "justification": "left", "firstLineIndent": 0, "startIndent": 0, "endIndent": 0, "spaceBefore": 0, "spaceAfter": 0, "autoHyphenate": true, "hyphenatedWordSize": 6, "preHyphen": 2, "postHyphen": 2, "consecutiveHyphens": 8, "zone": 36, "wordSpacing": [ 0.8, 1, 1.33 ], "letterSpacing": [ 0, 0, 0 ], "glyphSpacing": [ 1, 1, 1 ], "autoLeading": 1.2, "leadingType": 0, "hanging": false, "burasagari": false, "kinsokuOrder": 0, "everyLineComposer": false }, "style": { "font": { "name": "RobotoCondensed-Bold", "script": 0, "type": 1, "synthetic": 0 }, "fontSize": 60, "autoKerning": true, "kerning": 0, "fillColor": { "r": 255, "g": 255, "b": 255 } } }, "nameSource": "rend", "id": 67, "blendClippendElements": true, "blendInteriorElements": false, "knockout": false, "protected": { "transparency": false, "composite": false, "position": false }, "layerColor": "none", "timestamp": 1640254298.5986137, "referencePoint": { "x": -421.4849124605719, "y": -305.75067076052926 }, "canvas": {} }

another one is :

{ "top": 294, "left": 149, "bottom": 569, "right": 580, "blendMode": "normal", "opacity": 1, "clipping": false, "transparencyProtected": false, "hidden": false, "name": " DREAM HOUSE ", "text": { "transform": [ 2.5161779410381917, 0, 0, 2.9998103786391406, 141.36294255406943, 144.3859871526959 ], "left": 0, "top": 0, "right": 0, "bottom": 0, "text": "\nDREAM \nHOUSE", "index": 5, "gridding": "none", "antiAlias": "sharp", "orientation": "horizontal", "warp": { "style": "none", "value": 0, "perspective": 0, "perspectiveOther": 0, "rotate": "horizontal" }, "bounds": { "top": { "value": -6.328125, "units": "Points" }, "left": { "value": 0, "units": "Points" }, "right": { "value": 350.1886901855469, "units": "Points" }, "bottom": { "value": 177.04917907714844, "units": "Points" } }, "boundingBox": { "top": { "value": 50, "units": "Points" }, "left": { "value": 3.421875, "units": "Points" }, "right": { "value": 174.408203125, "units": "Points" }, "bottom": { "value": 142, "units": "Points" } }, "useFractionalGlyphWidths": true, "superscriptSize": 0.583, "superscriptPosition": 0.333, "subscriptSize": 0.583, "subscriptPosition": 0.333, "smallCapSize": 0.7, "shapeType": "box", "boxBounds": [ 0, 0, 350.18869, 177.04918 ], "paragraphStyle": { "justification": "left", "firstLineIndent": 0, "startIndent": 0, "endIndent": 0, "spaceBefore": 0, "spaceAfter": 0, "autoHyphenate": true, "hyphenatedWordSize": 6, "preHyphen": 2, "postHyphen": 2, "consecutiveHyphens": 8, "zone": 36, "wordSpacing": [ 0.8, 1, 1.33 ], "letterSpacing": [ 0, 0, 0 ], "glyphSpacing": [ 1, 1, 1 ], "autoLeading": 1.2, "leadingType": 0, "hanging": false, "burasagari": false, "kinsokuOrder": 0, "everyLineComposer": false }, "style": { "font": { "name": "RobotoCondensed-Bold", "script": 0, "type": 1, "synthetic": 0 }, "fontSize": 60, "autoLeading": false, "leading": 48, "kerning": 0 }, "styleRuns": [ { "length": 1, "style": { "autoKerning": false, "fillColor": { "r": 153.00255, "g": 51.00255, "b": 51.00255 } } }, { "length": 12, "style": { "autoKerning": true, "fillColor": { "r": 255, "g": 255, "b": 255 } } } ] }, "nameSource": "rend", "id": 68, "blendClippendElements": true, "blendInteriorElements": false, "knockout": false, "protected": { "transparency": false, "composite": false, "position": false }, "layerColor": "none", "timestamp": 1640254298.598834, "referencePoint": { "x": -1552.0406367831306, "y": -1106.1459936415524 }, "canvas": {} }

how can I get the actual size of font from both above object

in psd both are looking like this image

Agamnentzar commented 1 year ago

The font size that Photoshop shows in the UI is not the actual font size saved in the PSD file, they premultiply the font size by transform so it's easier to compare font sizes between boxes, you need to account for transform scale when interpreting font size.

Hardikfullstack commented 1 year ago

Thanks @Agamnentzar can you please let me know how to calculate it ?

Agamnentzar commented 1 year ago

Transform is a 2d matrix and has values like this "transform": [0.8432519079124537, 0, 0, 1.036168606195403, 151.08313301198413, 233.05700446108017], where first element is scaleX and 4th one is scaleY, 5th and 6th are offsetX and offsetY

I'm not actually sure how they calculate it but I think you take the fontSize and multiply it by scaleX or scaleY or an average of both of them, you'd have to check which gives you the value that matches the one from UI.

Hardikfullstack commented 11 months ago

@Agamnentzar thanks for your response. I'm wondering can we able to modify psd tree? updating text style, opacity, image etc?

Agamnentzar commented 11 months ago

Yes, you can read the file, update it and then write it back. There are some things to keep in mind when modifying the file, you can see more information in here: https://github.com/Agamnentzar/ag-psd#modifying-documents in the "Modifying documents" section