• Global community
    • Language:
      • Deutsch
      • English
      • Español
      • Français
      • Português
  • 日本語コミュニティ
    Dedicated community for Japanese speakers
  • 한국 커뮤니티
    Dedicated community for Korean speakers
Exit
Locked
0

How can I control the line spacing in TLF

Explorer ,
Feb 19, 2010 Feb 19, 2010

Copy link to clipboard

Copied

Hello,

Is it possible to control the line spacing in TLF?

For example I might have text lines with font size of 12 (i.e. constant text height) but I would like to be able to change the space between the lines programatically.

Playing with the lineHeight property is not the best approach because in case there are images embedded in the text once lineHeight is set then the image is cut if it is higher than the line height. I really need to control the space between lines but not the lines' height.

Thanks

TOPICS
Text layout framework

Views

6.8K

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines

correct answers 1 Correct answer

Deleted User
Feb 22, 2010 Feb 22, 2010

You can specify lineHeight in pixels instead of percentages - lineHeight="12" versus lineHeight="120%"

If you want each line to be exactly the same height - as if the lines were falling on a grid, you can specify a pixel lineHeight with the default leadingModel. In this case we set each line's baseline that many pixels from the last line's baseline. In this case larger type or larger inlines may not fit, so you have to specify a pixel height that's appropriate for the content.

Or if you want lines

...

Votes

Translate

Translate
Adobe Employee ,
Feb 19, 2010 Feb 19, 2010

Copy link to clipboard

Copied

LineHeight an be set as a percentage of fontSize, for example, lineHeight="120%".  The height of an InlineGraphicElement is treated as its fontSize.

Richard

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 19, 2010 Feb 19, 2010

Copy link to clipboard

Copied

Thanks for the information.

In my case using percentage to control the spacing between lines doesn't help.

I'll give an example ... I have three lines of text (fontSize = 10, lineHeight=120%). In the middle text line I have an image 30 pixels high. This would lead to uneven spacing between the lines. Line #2 height will be 36 pixels i.e. we have 6 pixels gap between line #1 and line #2. Line #3 will be 12 pixels i.e. we have 2 pixels spacing between line #2 and line #3.

I would like to have even spacing between the lines even when there are images in them.

If there is no other way to control the line spacing then this looks like a good feature request.

Is it possible to achieve in a way different than using lineHeight? ... and is there a feature request submitted for similar feature because if not I could write one.

Thanks

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Feb 19, 2010 Feb 19, 2010

Copy link to clipboard

Copied

The lineHeight is the maximum of all the lineHeights of the LeafElements on the line.  So you could set your lineHeights for each span to be 12 point and the lineHeight of the InlineGraphicElements to the first multiple of 12 greater than the height.

Is that the effect you are trying to achieve?

Richard

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 22, 2010 Feb 22, 2010

Copy link to clipboard

Copied

I would like to achieve the following behavior: the gap between all text lines to be always X pixels.

My understanding how TLF handles this (please correct me if I am wrong) is that there is no gap between TextLines but one could achieve similar behavior by playing with lineHeigh. You could set it to a percentage and then this would introduce visual gap between text lines however in cases when a text line contains elements with different height (like the case with images or spans with different fontSize) then the gap will differ because it is calculated as a percentage of the overall fontSize. I don't want to have different gaps in these cases. I would like to have always (let's say) 10 pixels between each text line.

What I need is very similar to the "verticalGap" style available in the VBox container. I would like to specify the exact gap between each text line in exactly the same way.

Using "lineHeight" is not good because it depends on the height of the text/images and this leads to different gaps when I have mixture of elements with different heights. The way I set the gap should not be dependent on the height of the elements.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 22, 2010 Feb 22, 2010

Copy link to clipboard

Copied

You can specify lineHeight in pixels instead of percentages - lineHeight="12" versus lineHeight="120%"

If you want each line to be exactly the same height - as if the lines were falling on a grid, you can specify a pixel lineHeight with the default leadingModel. In this case we set each line's baseline that many pixels from the last line's baseline. In this case larger type or larger inlines may not fit, so you have to specify a pixel height that's appropriate for the content.

Or if you want lines with larger content to automatically be larger, but the gap between the lines to be constant, then you can choose the ASCENT_DESCENT_UP leadingModel and a pixel lineHeight. In this case lineHeight is the distance between one line's descenders and the next line's ascenders. I think that's what you're asking for.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 23, 2010 Feb 23, 2010

Copy link to clipboard

Copied

Thank you, Alan! The combination of ASCENT_DESCENT_UP leadingModel and a pixel lineHeight is exactly what I need.

What I noticed though is that it works correctly when there are spans with different fontSize however when an image is embedded then its height is not taken into account when calculating the overall height. For example I have a text with fontSize="14", leadingModel=ASCENT_DESCENT_UP and lineHeight=5. When I have in such line an image with let's say height=30 then this image's height is not taken into account and it overlaps with the previous line. My expectation is that the overall line height would be 35 (image's height + lineHeight).

Is this a bug or I am missing something else? Looks like a bug.

Thanks for your time!

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 23, 2010 Feb 23, 2010

Copy link to clipboard

Copied

I think it's a bug. While graphics don't actually have ascent and descent measures, I think it's reasonable to take the image top and bottom edges for those measures in places where we need them.

Unfortunately I don't think this is a bug that will be fixed for our 1.0 release, so you'll need to work around the problem until we can get a fix in. In another thread I suggested adding a thin space before or after the graphic with an appropriate fontSize.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 23, 2010 Feb 23, 2010

Copy link to clipboard

Copied

Do you want me to create a bug in JIRA for this issue or similar report already exists?

I didn't get your reply about the possible workaround. Could provide more info, please?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 23, 2010 Feb 23, 2010

Copy link to clipboard

Copied

I've logged a bug in our internal bug database.

The problem is that graphics don't have ascent or descent values, so my workaround is to add a character that does:

1. Add a space after the graphic

2. Change the fontSize of the height of the graphic

  (you may need to fiddle with fontSize a bit to get the look you want)

3. Change trackingRight of the space to it's apparent width

This gives you an "invisible" space that forces TLF to give the graphic enough line height in this situation.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Explorer ,
Feb 25, 2010 Feb 25, 2010

Copy link to clipboard

Copied

Hi Alan,

Thanks for the explanation. Could you please provide the bug # so I can watch it and be notified when fixed.

The workaround would work however it may introduce undesired side effects. For example I might have problems when alowing people to edit the content of this text flow. I also might have side effects when handling copy/paste between text flows. Of course all these could be workarounded as well but then the effort to apply it might be bigger than the effort to directly apply myself a patch to TLF so the framework handles properly these scenarios. I haven't decided which approach I will take.

Best

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Guest
Feb 25, 2010 Feb 25, 2010

Copy link to clipboard

Copied

We haven't yet decided how we are going to open our bug database to the public, so I unfortunately do not have a bug number that's useful to you.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Mar 09, 2012 Mar 09, 2012

Copy link to clipboard

Copied

hello,

I have a question for line spacing. I'm using TLF and when the text continues to the next line it just starts to overlap the previous one unless I hit return a couple more times. This makes pasting text impossible because when I past it, the text pastes on top of each other as if a book had thrown up. I'm new at FL. Any suggestions?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Mar 11, 2012 Mar 11, 2012

Copy link to clipboard

Copied

LATEST

Can you give me a sample to demonstrate your problem?

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
New Here ,
Oct 27, 2011 Oct 27, 2011

Copy link to clipboard

Copied

hi, all, i see this prolem in my project now. when set leadingModel ASCENT_DESCENT_UP,  and a constant pixel lineHeight, if insert a image, the text will be mixed up.

i want to know if the newest textlayout framework have fixed this problem? or any solution? thanks.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines
Adobe Employee ,
Oct 28, 2011 Oct 28, 2011

Copy link to clipboard

Copied

Box leading model was introduced to solve this particular use case.

Votes

Translate

Translate

Report

Report
Community guidelines
Be kind and respectful, give credit to the original source of content, and search for duplicates before posting. Learn more
community guidelines