Rich Text from PSD ?

[fabulousduck]

The TypeTool provides multiple fonts when there is rich text in the psd file. but is there any way to find out from what position to what position in the string a font should be applied ?

Regards Ryan Vlaming

[edrpls]

You can extract the positions of the node with any of the following:

node.get('top');
node.get('bottom');
node.get('right');
node.get('left');

Is that what you need?

[tylerjpeterson]

@fabulousduck - There are two TypeTool properties that seem to provide what you're after.

The TypeTool has an engineData.EngineDict.StyleRun object with two properties, RunLengthArray and RunArray. They are both arrays with integer values that indicate where a new style "run" begins. In other words, these arrays are a collection of indices where you would split the layer's text. You can then map the style collections to your split text.

Sorry I can't be more explicit, but hopefully it's enough of a direction to get started. Got this info by looking at the original ruby lib. Maybe there's more good info in there.

var typeTool = node.get('typeTool');
var runArray = typeTool.engineData.EngineDict.StyleRun.RunLengthArray;
var styleArray = typeTool.engineData.EngineDict.StyleRun.RunArray;

[forsigner]

@fabulousduck @tylerjpeterson To get the position of text and more other text info, I fork psd.js : forsigner/psd.js

It can get those info:

  export: ->
    value: @textValue
    font:
      lengthArray: @lengthArray()
      styles: @fontStyles()
      weights: @fontWeights()
      names: @fonts()
      sizes: @sizes()
      colors: @colors()
      alignment: @alignment()
      textDecoration: @textDecoration()
    left: @coords.left
    top: @coords.top
    right: @coords.right
    bottom: @coords.bottom
    transform: @transform

eg:

{
  value: 'hello word !',
  font: {
    lengthArray: [1, 5, 5, 1],
    styles: ['italic', 'italic', 'normal', 'normal'],
    weights: ['bold', 'bold', 'bold', 'bold'],
    names: ['AdobeHeitiStd-Regular',
      'AdobeHeitiStd-Regular',
      'STFangsong',
      'AdobeInvisFont',
      'AdobeHeitiStd-Regular'],
    sizes: [20.53485, 20.53485, 20.53485, 20.53485],
    colors: [[Object], [Object], [Object], [Object]],
    alignment: ['left'],
    textDecoration: ['normal', 'normal', 'underline', 'underline']
  },
  left: 0,
  top: 0,
  right: 0,
  bottom: 0,
  transform: {
    xx: 1.1687446784568079,
    xy: 0,
    yx: 0,
    yy: 1.1687446784568083,
    tx: 210.4765625,
    ty: 443.8034696741108
  }
}

[nibbr]

Hi

I am having the same issue but this RunLengthArray doesn't make sense. I have this string as a test in a PSD layer: "Simple text with colour change and a simple new line"

The colour of the text changes on the word "text" and on the word "colour" and here is the length array I get:

0:1
1:6
2:5
3:5
4:6
5:30

I can't work out what these numbers reference, obviously the array key is referring the style element from RunArray but the character numbers don't make sense. For example take position 1 it says it starts at character 6 and ends at character 5 at position 2? How can that be? - it doesn't even match up to the style changes in the text.

What I was expecting to see is this array saying position 0 it starts at character 1 and ends at character 5 and position 1 starts at character 6 - how can it possibly end at char 5? I was expecting to use each item in that array as a start and end point, so If position 0 said it started at character 1 and the next item starts at 6 you would assume the first one ended at character 5 but this doesn't seem to be the case.

Confused as to what these numbers are doing.

[RockyF]

Hi

I am having the same issue but this RunLengthArray doesn't make sense. I have this string as a test in a PSD layer: "Simple text with colour change and a simple new line"

The colour of the text changes on the word "text" and on the word "colour" and here is the length array I get:

0:1
1:6
2:5
3:5
4:6
5:30

I can't work out what these numbers reference, obviously the array key is referring the style element from RunArray but the character numbers don't make sense. For example take position 1 it says it starts at character 6 and ends at character 5 at position 2? How can that be? - it doesn't even match up to the style changes in the text.

What I was expecting to see is this array saying position 0 it starts at character 1 and ends at character 5 and position 1 starts at character 6 - how can it possibly end at char 5? I was expecting to use each item in that array as a start and end point, so If position 0 said it started at character 1 and the next item starts at 6 you would assume the first one ended at character 5 but this doesn't seem to be the case.

Confused as to what these numbers are doing.

I've just understood what RunLengthArray means. It's not about boundaries, it's about quantitative segmentation. For example,'abcd'=> [1, 2, 2], which represents a segment: ['a','bc','d\r'], and the last \r is reserved. Then match RunArray and you can get the corresponding styles.

[hakotaco]

If you check the .psd file you'll find all of the styles given below can be exported.
(This is an example)
.

/StyleSheetData
					<<
						/Font 0
						/FontSize 14.0
						/FauxBold false
						/FauxItalic false
						/AutoLeading true
						/Leading 43.2
						/HorizontalScale 1.0
						/VerticalScale 1.0
						/Tracking 0
						/AutoKerning true
						/Kerning 0
						/BaselineShift 0.0
						/FontCaps 0
						/FontBaseline 0
						/Underline false
						/Strikethrough false
						/Ligatures true
						/DLigatures false
						/BaselineDirection 1
						/Tsume 0.0
						/StyleRunAlignment 2
						/Language 0
						/NoBreak false
						/FillColor
						<<
							/Type 1
							/Values [ 1.0 .78824 .09021 .49411 ]
						>>
						/YUnderline 1
						/HindiNumbers false
						/Kashida 1
					>>

Also if you are not sure how to add more data to the export, check out @forsigner 's fork and go to the tyeptool.coffee file. (https://github.com/forsigner/psd.js/blob/master/lib/psd/layer_info/typetool.coffee)
That should help