Jump to content

Label Text - word wrap and align vertically


Recommended Posts

I need to be able to align text in a TLabel or TLabelText vertically, to it's container. I also need it to word wrap.

I am particularly interested in using the label in a Layout, and therefor should align vertically to the layout when it is resized.

I also need the text to word wrap based on the width of the layout (i.e. no ellipsis or clipping of text)

 

What is the best way to go about this?

 

I know for a DIV element, in HTML, i can do this

 

<DIV style="height:100px; background-color: red; text-align: center; vertical-align: middle; line-height: 100px;">
    This is how you align text in a div element both horizontally and Vertically
</DIV>
  I attempted to create my own label(TsahLabel)  by modifying the TW3Label
fLabel:= TsahLabel.Create(self);
  fLabel.Caption:= 'I need to be able to align text in a TLabel or TLabelText vertically, to its container. I also need it to word wrap.' +
                   'I am particularly interested in using the label in a Layout, and therefor should align vertically to the layout when it is resized.' +
                  'I also need the text to word wrap based on the width of the layout (i.e. no ellipsis or clipping of text)';
  w3_setStyle(FLabel.Container.Handle, 'background-color', 'white');
  w3_setStyle(FLabel.Handle, 'background-color', 'red');
  fLabel.AlignText:= taCenter;

changing the TW3Label's Resize event from

procedure TW3Label.Resize;
var
  dx, dy: Integer;
  wd, hd: Integer;
begin
  inherited;


  FContainer.BeginUpdate;


  FContainer.SetBounds(0,0,2,2);
  wd := ClampInt(FContainer.ScrollInfo.ScrollWidth + 2, 0, ClientWidth);
  hd := ClampInt(FContainer.ScrollInfo.ScrollHeight, 0, ClientHeight);


  case FTextAlign of
    taLeft:
      begin
        dy := (ClientHeight div 2) - (hd div 2);
        FContainer.SetBounds(0,dy,wd,hd);
      end;
    taCenter:
      begin
        dx := (ClientWidth div 2) - (wd div 2);
        dy := (ClientHeight div 2) - (hd div 2);
        FContainer.SetBounds(dx, dy, wd, hd);
      end;
    taRight:
      begin
        dx := ClientWidth - wd;
        dy := (ClientHeight div 2) - (hd div 2);
        FContainer.SetBounds(dx, dy, wd, hd);
      end;
  end;
  FContainer.EndUpdate;
end;

 

to


procedure TsahLabel.Resize;
begin
  inherited;
  FContainer.BeginUpdate;
  FContainer.SetBounds(0,0,ClientWidth,ClientHeight); //added by shane
  case FTextAlign of
    taLeft:
      begin
        W3_SetStyle(FContainer.Handle, 'text-align', 'left');
      end;
    taCenter:
      begin
        W3_SetStyle(FContainer.Handle, 'text-align', 'center');
      end;
    taRight:
      begin
        W3_SetStyle(FContainer.Handle, 'text-align', 'right');
      end;
  end;
  FContainer.EndUpdate;
end;

and changing the IntializeObject method from

 

procedure TW3Label.InitializeObject;
begin
  inherited InitializeObject;
  FContainer := TW3LabelText.Create(Self);


  w3_setStyle(FContainer.Handle, 'white-space', 'nowrap');
  w3_setStyle(FContainer.Handle, 'overflow', 'hidden');


  w3_setStyle(FContainer.Handle, w3_CSSPrefixDef('vertical-align'), 'middle');
  SetCaption('Label');
  Height := 12;
end;

to

 

procedure TsahLabel.InitializeObject;
begin
  inherited InitializeObject;
  FContainer := TsahLabelText.Create(Self);

  w3_setStyle(FContainer.Handle, 'white-space', 'pre-wrap'); // *****


  w3_setStyle(FContainer.Handle, 'overflow', 'hidden');
  w3_setStyle(FContainer.Handle, w3_CSSPrefixDef('vertical-align'), 'middle');
  SetCaption('Label');
  Height := 12;
end;

however, im still getting ellipses and the align vertical is not working

 

SCREENSHOT

 

 

if I add the style line-height, then I can't calculate the correct pixel height based on my clientheight.

 

e,g,

w3_setStyle(FContainer.Handle, 'line-height', IntToStr(ClientHeight) + 'px');

which is NOT correct

 

SCREENSHOT2

 

Link to post
Share on other sites

I prefer SmartCL.Controls.SimpleLabel to SmartCL.Controls.Label component;
 

Label1 := TW3SimpleLabel.Create(Self);
//Label1.Angle := -90;  // to vertical text
Label1.Caption:= 'I need to be able to align text in a TLabel or TLabelText vertically, to its container. I also need it to word wrap.' +
                   'I am particularly interested in using the label in a Layout, and therefor should align vertically to the layout when it is resized.' +
                  'I also need the text to word wrap based on the width of the layout (i.e. no ellipsis or clipping of text)';

Label1.Width := 300;
Label1.Top := 150;
Label1.Left := 500;
Label1.Name := 'W3Label1';
Label1.Autosize := false;
Label1.Handle.style.height := '100%';
Label1.Handle.style.height := '';
Link to post
Share on other sites

I tried your TW3SimpleLabel example, and the Word wrap works nice, but it doe not align vertically

Did I do something wrong?

 

unit Form1;


interface


uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application,
  SmartCL.Controls.SimpleLabel, SmartCl.Layout;


type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    fLayout: TLayout;
    fText: TW3SimpleLabel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;


implementation


{ TForm1 }


procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  fLayout:= Layout.Client(Layout.Margins(25), Layout.Client(fText));
end;


procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fText:= TW3SimpleLabel.Create(Self);
  fText.Caption:= 'We have two buildings connected by fiber and therefor access to our LAN from one another. ' +
                  'We would like to Stream our presentations (Video, Audio, and Desktop) from our Auditorium ' +
                  'to our Visitor Center (as a spill-over place to watch the presentation during times when ' +
                  'our auditorium has reach max capacity). I am trying to figure out the hardware and software ' +
                  'required?';
  fText.Autosize := false;
  fText.Handle.style.height := '100%';
end;


procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
   fLayout.Resize(Self);
end;


initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.
Link to post
Share on other sites

The vertical align property seems to work as expected.

  fText:= TW3SimpleLabel.Create(Self);
  fText.Caption:= 'We have two buildings connected by fiber and therefor access to our LAN from one another. ' +
                  'We would like to Stream our presentations (Video, Audio, and Desktop) from our Auditorium ' +
                  'to our Visitor Center (as a spill-over place to watch the presentation during times when ' +
                  'our auditorium has reach max capacity). I am trying to figure out the hardware and software ' +
                  'required?';
  fText.Autosize                   := false;
  fText.Handle.style.background    := '#f00';
  fText.Handle.style.fontSize      := '24px';
  fText.Handle.style.fontStyle     := 'oblique';
  fText.Handle.style.color         := '#FFF';
  fText.Handle.style.verticalAlign := 'middle';
  fText.Handle.style.textAlign     := 'center';
  fText.Handle.style.height        := '100%';

On the resize event, after layout resize

   fLayout.Resize(Self);
   fText.Handle.style.height := ''; // this will auto adjust the height according to content in it.
 
 
Link to post
Share on other sites

Does not work for me!

 

Here is a screenshot.  The text is NOT centered vertically in the window. And the window background color should be 100% red. Clearly this label is not covering 100% of window, rather it covers only to the size of the label.

 

here is the code

unit Form1;


interface


uses 
  SmartCL.System, SmartCL.Graphics, SmartCL.Components, SmartCL.Forms, 
  SmartCL.Fonts, SmartCL.Borders, SmartCL.Application,
  SmartCL.Controls.SimpleLabel, SmartCL.Layout;


type
  TForm1 = class(TW3Form)
  private
    {$I 'Form1:intf'}
    //fLayout: TLayout;
    fText: TW3SimpleLabel;
  protected
    procedure InitializeForm; override;
    procedure InitializeObject; override;
    procedure Resize; override;
  end;


implementation


{ TForm1 }


procedure TForm1.InitializeForm;
begin
  inherited;
  // this is a good place to initialize components
  //fLayout:= Layout.Client(FText);
  fText.SetBounds(0,0, ClientWidth, ClientHeight);
end;


procedure TForm1.InitializeObject;
begin
  inherited;
  {$I 'Form1:impl'}
  fText:= TW3SimpleLabel.Create(Self);
  fText.Caption:= 'We have two buildings connected by fiber and therefor access to our LAN from one another. ' +
                  'We would like to Stream our presentations (Video, Audio, and Desktop) from our Auditorium ';
  fText.Autosize                   := false;
  fText.Handle.style.background    := '#f00';
  fText.Handle.style.fontSize      := '24px';
  fText.Handle.style.fontStyle     := 'oblique';
  fText.Handle.style.color         := '#FFF';
  fText.Handle.style.verticalAlign := 'middle';
  fText.Handle.style.textAlign     := 'center';
  fText.Handle.style.height        := '100%';
end;


procedure TForm1.Resize;
begin
  inherited;
  //if assigned(FLayout) then
  // FLayout.Resize(Self);
  fText.SetBounds(0,0, ClientWidth, ClientHeight);
   fText.Handle.style.height := '';
end;


initialization
  Forms.RegisterForm({$I %FILE%}, TForm1);
end.

..........................

 

It should look like this screenshot!

Link to post
Share on other sites

When you specify left and top at 50%, the div goes at the the bottom right quarter of the page with its top-left end pinned at the center of the page. This is because, the left/top properties(when given in %) are calculated based on height of the outer div.

But transform uses height/width of the element to determine translation, so you div will move left(50% width) and top(50% its height) since they are given in negatives, thus aligning it to the center of the page. 

 

  fText:= TW3SimpleLabel.Create(Self);
  fText.Caption:= 'We have two buildings connected by fiber and therefor access to our LAN from one another. ' +
                  'We would like to Stream our presentations (Video, Audio, and Desktop) from our Auditorium ' +
                  'to our Visitor Center (as a spill-over place to watch the presentation during times when ' +
                  'our auditorium has reach max capacity). I am trying to figure out the hardware and software ' +
                  'required?';
  fText.Autosize                   := false;
//  fText.Handle.style.position    := 'relative'; // try to switch to relative position
  fText.Handle.style.background    := '#f00';
  fText.Handle.style.fontSize      := '24px';
  fText.Handle.style.fontStyle     := 'oblique';
  fText.Handle.style.color         := '#FFF';
  fText.Handle.style.verticalAlign := 'middle';
  fText.Handle.style.textAlign     := 'center';
  fText.Handle.style.height        := '100%';
  w3_setStyle(fText.Handle,w3_CSSPrefixDef("")+"transform", 'translate3d(-50%,-50%, 0)'); // -webkit-transform: translate3d(-50%,-50%, 0);

Usually this must be done with absolute positioning, try to switch to relative position.

procedure TForm1.Resize;
begin
  inherited;
  if Assigned(fLayout) then
   fLayout.Resize(Self);
  fText.Handle.style.top    := '50%';
  fText.Handle.style.left   := '50%';
  fText.Handle.style.height := ''; // this will auto adjust the height according to content in it.
end;

Link to post
Share on other sites

That works with the built in browser. I will have to try it on other devices.

 

However, it still isn't exactly what I was looking for.  I want to be able to resize the label in the container or layout  (client).  Then center the text both vertically and horizontally.   Your sample above resizes the label to the text, and then centers the label within the layout or container (Vertically and Horizontally)

 

Thnks for the help!

Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Paste as plain text instead

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

×
×
  • Create New...