Scaling HTML content.

WEB TMS WEB Core
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.