Scaling HTML content.

WEB TMS WEB Core
1

Not specific to WebCore but helpful to anyone else trying to create the 'Holy Grail' ie one website that works across all platforms and devices.

I am working on TMS Web Project I have the look and feel okay and I am using the following to re-arrange the components depending on screen size.

procedure TForm7.WebResponsiveGridPanel1LayoutChange(Sender: TObject;
  ALayout: TResponsiveLayoutItem);
begin
      case ALayout.Index of
  0:
    begin
     // WebImageControl1.URL := 'videoThumbnails/Logo20.png';
       // webgridPanel1.ColumnCollection.Items[0].Value := 50;
       // webgridPanel1.ColumnCollection.Items[1].Value := 50;

    end;
  1:
    begin
    // need to move dowm
         // WebImageControl1.URL := 'videoThumbnails/Logo20.png';
          webgridPanel1.ColumnCollection.Items[0].Value := 99;
          webgridPanel1.ColumnCollection.Items[1].Value := 1;
         //  webgridPanel1.ControlCollection.Items[0].
          webgridPanel1.ControlCollection.Items[2].Control := WebResponsiveGridPanel2 ;
          webgridPanel1.ControlCollection.Items[3].Control := WebMultimediaPlayer4;
          webgridPanel1.ControlCollection.Items[4].Control := webButton3;
    end;
  2:
    begin
    //  WebImageControl1.URL := 'videoThumbnails/Logo15.png';
      webgridPanel1.ColumnCollection.Items[0].Value := 70;
      webgridPanel1.ColumnCollection.Items[1].Value := 30;
                webgridPanel1.ControlCollection.Items[1].Control := WebResponsiveGridPanel2 ;
          webgridPanel1.ControlCollection.Items[2].Control := WebMultimediaPlayer4;
          webgridPanel1.ControlCollection.Items[3].Control := webButton3;

    end;
  end;
end;

So as the screen gets smaller I can 'shuffle' the contents of the WebGrid around.

What I need to do is proportionately scale the text to expand to fill the available are and still be readable.

Unfortunately there are always different font sizes to contend with. Anyone know of any magical methods to do this please ?

2

Can you specify in more detail what specific problem you have with setting font sizes?

3

I have uses the WebbButtons and set them to visible := false.

Is there a way to say

gridPanelStory.ControlCollection.Items[1].Control := 'blank';
I have updated the code to

procedure TForm7.changeLayout (size : String) ;

begin
    if size = 'small' then begin
      gridPanelStory.ColumnCollection.Items[0].Value := 99;
      gridPanelStory.ColumnCollection.Items[1].Value := 1;
      gridPanelStory.ControlCollection.Items[0].Control := HTMLContStory ;
      gridPanelStory.ControlCollection.Items[1].Control := webButton4;
      gridPanelStory.ControlCollection.Items[2].Control := respGridPanelEnquiry ;
      gridPanelStory.ControlCollection.Items[3].Control := webButton3;
      gridPanelStory.ControlCollection.Items[4].Control := multimediaPlayerStory;

    end;

    if size = 'medium' then begin


    end;

    if size = 'large' then begin
      gridPanelStory.ColumnCollection.Items[0].Value := 70;
      gridPanelStory.ColumnCollection.Items[1].Value := 30;
      gridPanelStory.ControlCollection.Items[0].Control := HTMLContStory ;
      gridPanelStory.ControlCollection.Items[1].Control := respGridPanelEnquiry;
      gridPanelStory.ControlCollection.Items[2].Control := multimediaPlayerStory ;
      gridPanelStory.ControlCollection.Items[3].Control := webButton3;
      gridPanelStory.ControlCollection.Items[4].Control := webButton4;

    end;
end;

procedure TForm7.WebFormCreate(Sender: TObject);

begin

       Application.InsertCSS('themecss','fresca/myTheme.css');
       screenWidth := ClientWidth;
       if screenWidth < 800 then  changeLayout('small');
       if screenWidth > 800 then  changeLayout('large');



      end;

procedure TForm7.WebFormResize(Sender: TObject);
begin
        labelWidth.Caption := clientWidth.ToString;
        if clientWidth < 800 then changeLayout('small');
        if clientWidth > 800 then changeLayout('large');

end;

Various screen shots at different sizes

Screenshot 2023-04-05 at 11.20.35
Screenshot 2023-04-05 at 11.20.35862×696 67.8 KB

Screenshot 2023-04-05 at 11.20.19
Screenshot 2023-04-05 at 11.20.191057×794 76.5 KB

Screenshot 2023-04-05 at 11.20.03
Screenshot 2023-04-05 at 11.20.03362×594 49.4 KB

Screenshot 2023-04-05 at 11.19.39
Screenshot 2023-04-05 at 11.19.391147×988 89 KB

Screenshot 2023-04-05 at 11.19.23
Screenshot 2023-04-05 at 11.19.231740×981 104 KB

On the smaller screens the content is too small. On the larger screen the content could do with scaling up to fill the area.

Hope this makes sense.

4

TWebGridPanel has a method WebGridPanel.RemoveControl() to remove a control that was assigned to it.

5

I have managed a 'Cludge' to scale the fonts on the screen resize event. This only works if we use font:43 / 20 / 16. If we have the words font in the text that will also be an issue.

http://toolfolks.com/safeGuardMe/Project7.html

procedure TForm7.WebFormCreate(Sender: TObject);
var
screenWidth : Integer;

begin


       Application.InsertCSS('themecss','fresca/myTheme.css');
       screenWidth := ClientWidth;
        if clientWidth < 800 then changeLayout('small');
        if (clientWidth > 800) or (clientWidth < 1100) then changeLayout('medium');
        if clientWidth > 1100 then changeLayout('large');

      end;

procedure TForm7.WebFormResize(Sender: TObject);
begin
        labelWidth.Caption := clientWidth.ToString;
        if clientWidth < 800 then changeLayout('small');
        if (clientWidth > 800) or (clientWidth < 1100) then changeLayout('medium');
        if clientWidth > 1100 then changeLayout('large');
end;



procedure TForm7.changeLayout (size : String) ;
var
myStringList :TstringList;
myString : String;

begin
    if size = 'small' then begin
      gridPanelStory.ColumnCollection.Items[0].Value := 99;
      gridPanelStory.ColumnCollection.Items[1].Value := 1;
     // gridPanelStory.RemoveControl(webButton4) ;
      gridPanelStory.ControlCollection.Items[0].Control := HTMLContStory ;
      gridPanelStory.ControlCollection.Items[1].Control := webButton4;
      gridPanelStory.ControlCollection.Items[2].Control := respGridPanelEnquiry ;
      gridPanelStory.ControlCollection.Items[3].Control := webButton3;
      gridPanelStory.ControlCollection.Items[4].Control := multimediaPlayerStory;
      myStringList :=  HTMLContStory.HTML;
      myString := myStringList.Text;
      myString := StringReplace(myString, 'font:43.0', 'font:21.75', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:20.0', 'font:19.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:16.0', 'font:14.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:53.0', 'font:22.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:30.0', 'font:19.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:23.0', 'font:14.0', [rfReplaceAll]);
      HTMLContStory.html.Clear;
      HTMLContStory.html.Add(myString);// .AddObject(mystring,1);

    end;

    if size = 'medium' then begin

      myStringList :=  HTMLContStory.HTML;
      myString := myStringList.Text;
      myString := StringReplace(myString, 'font:22.0', 'font:43.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:19.0', 'font:20.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:14.0', 'font:16.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:53.0', 'font:43.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:30.0', 'font:20.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:23.0', 'font:16.0', [rfReplaceAll]);
      HTMLContStory.html.Clear;
      HTMLContStory.html.Add(myString);// .AddObject(mystring,1);

    end;

    if size = 'large' then begin
      gridPanelStory.ColumnCollection.Items[0].Value := 70;
      gridPanelStory.ColumnCollection.Items[1].Value := 30;
      gridPanelStory.ControlCollection.Items[0].Control := HTMLContStory ;
      gridPanelStory.ControlCollection.Items[1].Control := respGridPanelEnquiry;
      gridPanelStory.ControlCollection.Items[2].Control := multimediaPlayerStory ;
      gridPanelStory.ControlCollection.Items[3].Control := webButton3;
      gridPanelStory.ControlCollection.Items[4].Control := webButton4;
      myStringList :=  HTMLContStory.HTML;
      myString := myStringList.Text;
      myString := StringReplace(myString, 'font:43.0', 'font:53.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:20.0', 'font:30.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:16.0', 'font:23.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:22.0', 'font:53.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:19.0', 'font:30.0', [rfReplaceAll]);
      myString := StringReplace(myString, 'font:14.0', 'font:23.0', [rfReplaceAll]);
      HTMLContStory.html.Clear;
      HTMLContStory.html.Add(myString);// .AddObject(mystring,1);

    end;
end;

Any improvements welcome.

6

You could also make predefined CSS classes for the fonts in various screen sizes and simply set the CSS class upon screen size change.

Something like

.smallscreen { font-size: 14px; }
.largescreen { font-size: 24px; }

if Width > XXX then
  control.ElementClassName := 'smallscreen'
else
  control.ElementClassName := 'largescreen';
7

How would I address the multiple font sizes in the HTML please.

8

Create as many CSS classes with as many size variants as you need?