Line Spacing

Hi there,

I'm working on a project in Ignition Designer, and it would save me some time if I were able to adjust the line spacing for my text.

I'm running Windows 7 with the latest Java.
My ignition version information is as follows:
Ignition Platform: 7.7.1
SFC Module: 1.7.1-beta11
Instrument Interface Module: 1.7.1
OPC-UA Module: 2.7.1
Vision Module: 7.7.1
SQL Bridge Module: 6.7.1
OpcCom Module: 2.7.1
Alarm Notification Module: 2.7.1
Production Module: 1.7.1
Mobile Module: 2.7.1
Schedule Module: 1.7.1
Recipe Module: 1.7.1 [Trial]
SPC Module: 1.7.1 [Trial]
Reporting Module: 2.7.1
Symbol Factory Module: 3.7.1
OEE Downtime Module: 1.7.1

I found this thread:
inductiveautomation.com/for ... ne+spacing

Which notes:

So, to avoid getting repeat answers, the question in that thread was: "How do I adjust line spacing using HTML?"
My question is: "How do I adjust line spacing?"

Thanks!

(P.S. So far I'm really enjoying my work in Ignition. You guys are doing great!)

Even now this can be an ambiguous question. Are we talking about:

a) adjust spacing between multiple components
-OR-
b) adjusting space between multiple lines in a single component (like a label)

The first is easily accomplished from the tools at the right end of the Shape Editing Toolbar:

For the second, the answer may as well be “Nope”. The only way to do this would be via HTML. Unfortunately, while CSS support has been improved, line-height still only has a placeholder and no implememtation (for those interested in what CSS attributes are supported, you can look here).

The closest I have ever been able to come has been to use the padding-top attribute to achieve the same result-- sort of.

What it won’t do:
–work on word-wrapped lines.
–bring lines closer together. (Negative numbers for the padding value)

The attached files are a shared script and a window to illustrate.
test_Label_2014-12-10_0913.proj (5.24 KB)
global_html_2014-12-10_0843.proj (1.27 KB)

Here is an HTML solution. The only height directive obeyed by the
element is the base font size.
Reduce the line height by setting a smaller font size. Then set the font size to be larger in the HTML for the labels.

<html> <span style= "font-size:200%">label text 1</span> <span style= "font-size:100%">&nbsp;<BR></span> <span style= "font-size:200%">label text 2</span></html>

1 Like

This seems to no longer work on 8.1, are there any alternatives

Just to verify, are you using Vision or Perspective? While this thread isn't flagged, it was for Vision.

Yes, Vision. Trying that snippet in the text of a label.

Seemed to work for me, although I could be missing the point

<html> <span style= "font-size:600%">label text 1</span> <span style= "font-size:100%">&nbsp;<BR></span> <span style= "font-size:600%">label text 2</span></html>

Try that with the font property of the label set to 2, if it works the space between the 2 lines of text should be quite small. What version are you on? Could you attach a screenshot?

2 Likes

I am having no luck getting this to work in 8.1.23. no matter what the paragraph spacing remains the same?

This post originally from 2014 far predates Perspective and is only concerned with Vision. Are you using Vision, or Perspective?

1 Like

See, this is one of the issues I have with Ignition. I should not have to use HTML to put a line break in label text. I should not have to create 3 components on the screen to accomplish the spacing I like instead of just using one. Just my opinion.