TWebBrowser und HighDpi

[TM6]

Ich nutze tWebBrowser, um formatiert ein paar Texte auszugeben.
Das funktioniert seit Jahren auch problemlos.

Jetzt habe ich aber festgestellt, dass beim Wechsel der DPI (Monitorwechsel) die Schriftgröße nicht skaliert wird.

Ich habe zwar in der registry den Wert für die Browser Emulation (FEATURE_BROWSER_EMULATION) testweise geändert, aber das ändert sich nichts.

Wie bekomme ich den angezeigten Text skaliert, wenn das Formular beim Monitorwechsel von 100% auf 150% vergrößert wird?

[mytbo]

Zitat von TM6:

Wie bekomme ich den angezeigten Text skaliert, wenn das Formular beim Monitorwechsel von 100% auf 150% vergrößert wird?

Bin nicht sicher, ob ich deine Frage richtig verstanden habe. Text mit dem Browser Fenster skalieren lassen? Bis du für den Inhalt zuständig, kannst du es mit Inline-CSS lösen. Mit Hilfe von Viewport Units oder der CSS-Funktion calc(). In diesem Artikel-Beispiel folgendes HTML im Editor eingeben und den Effekt beim Aufziehen der Browser Ansicht beobachten:

Code:

<p style="font-size: 8vw; color: red">Das ist ein TEST!</p>

Bis bald...
Thomas

[TM6]

Danke für Deine Antwort.
Ich habe von HTML praktisch Null-Ahnung. Das ist Code von vor ca. 20 Jahren, den ich jetzt für HighDpi anpassen wollte/musste.
Der war voll mit solchen Befehlen:

Code:

<font size=3 face="symbol" color="#FF0000">

Da wird keine Größe beim dpi-Wechsel angepasst.

Dein Code-Beispiel hat mich in die richtige Richtung geführt und ich konnte alles aktualisieren.

[himitsu]

Was immernoch etwas hilft.
https://selfhtml.org
Das Grundlegende beim HTML/CSS/JavaScript ändert sich ja kaum. Auch wenn darüber mit neuerern Versionen vielleicht hier und da was Neues/Einfaches dazu kam, bzw. weitere Ebenen (vor allem JavaScript) drüber liegen.


Für alle möglichen Größen gibt es unterschiedliche "Einheiten".
Manche sehr genau (zum Beispiel Punkte oder Pixel), aber Andere auch logisch passend (z.B. Zentimeter) oder Relativ zu was Anderem (z.B. einfach "groß" und "klein" oder in Prozenten zum übergeordneten Parent)
https://wiki.selfhtml.org/wiki/CSS/E...ften/font-size
https://wiki.selfhtml.org/wiki/CSS/W....A4ngenangaben

[TM6]

Die Fonts habe ich zwar hinbekommen, kämpfe aber noch mit Grafiken.
Ich habe auf selfhtml noch etwas nachgelesen, aber viel schlauer bin ich da nicht geworden.

Aktuell integriere ich eine Grafik so:

Code:

<img src="grafik.svg" align="middle" height="24"/>

In so einem Fall wird diese aber nicht vergrößert, wenn ich sie (bzw. das Form mit dem tWebBrowser) von einem Monitor auf den anderen verschiebe.
Was übersehe ich hier?

[Delphi.Narium]

height=24 heißt halt, dass das Bild bitteschön 24 (ja was denn) groß sein soll. Der Browser hat also keinerlei Veranlassung das zu ändern.

Such bitte mal nach css height oder CSS Demo: height.

Hinter die 24 gehört eigentlich noch eine Angabe zu der Einheit, auf die sich die Größenangabe bezieht, fehlt die, dann macht der Browser das, was seine Programmiererinnen und Programmierer für richtig oder als Default angesehen haben. Das Verhalten bei dieser CSS-Angabe muss also nicht bei allen Browsern und deren Versionen identisch sein.

Weitere Möglichkeiten für die Größenangabe:

Code:

em ; Orientiert sich an der Schriftgröße.
px ; Höhenangabe in Pixel.
auto ; Der Browser passt die Höhe automatisch an die Umgebung an.
Prozentwert ; Prozentangabe, anhand der eine Skalierung erfolgt.
pt ; Höhernangabe in Punkten.
cm ; Höhenangabe in Zentimeter.
in : Höhenangabe in Zoll.
mm : Höhenangabe in Millimeter.

Weiteres unter em, px, pt, cm, in …

Apropos: height für die Höhenangabe. Und was ist mit der Breite? Zufall? Oder der Browser wird's schon richten?

Eine DPI-Änderung hat übrigens keinen Einfluss auf die Angaben in den Styles. Über geänderte Größenangaben im CSS wirst Du (höchstwahrscheinlich) nicht zum Ziel kommen.

Eventuell findest Du bei der "Konkurenz" ja weiterführende Infos: Is there a way to use DPI in css media queries instead of px

Keine Ahnung, ob davon jetzt irgendwas wirklich eine weiterführende Info ist. Aber eventuell lockert sich der Nebel, in dem Du momentan rumstochern musst.

[Bernhard Geyer]

AFAIK baut hier der IE (wenn man ihn per TWebbrowser integriert) murks.
Man muss "von außen" nachhelfen, das er da richtig Arbeite.
ist schon aber ein paar Jahre her, als ich da was suchen musste, da wir ein Problem damit hatten.

Ich würde eh auf EdgeBrowser wechseln und das Tote Pferd IE (TWebbrowser im IE-Modus) nicht weiter nutzen.

[mytbo]

Zitat von TM6:

Aktuell integriere ich eine Grafik so:

Code:

<img src="grafik.svg" align="middle" height="24"/>

Es kommt darauf an, was du genau machen willst. Vielleicht reicht schon Folgendes:

Code:

<img style="display: block; margin-left: auto; margin-right: auto; width: 24vw;" src="grafik.svg" />

Wenn du mehr Flexibilität brauchst, baue es mit einem Container. Beispiel:

Code:

<div style="margin: auto; width: 80%;">
  <img style="width: auto; height: auto; max-width: 100%; max-height: 80vh;" src="grafik.svg" />
</div>

Zum Schreiben von HTML-Quellcode ist der VSC Editor mit seiner Autovervollständigung hilfreich. Das Beispiel-Programm aus dem Artikel, die Kombination aus Mustache Template-Engine und der Fähigkeit, JSON-Daten aus unterschiedlichen Quellen zu laden, ist praktisch beim Testen.

PS: Vermutlich ist es hier überdimensioniert, durch Verwendung von CSS-Frameworks wie Bootstrap oder Bulma erleichtert sich die Layout-Arbeit.

Bis bald...
Thomas

[TM6]

Danke!
Das Beispiel von mytbo hat mir sehr weiter geholfen.
Ich brauchte nur eine Grafik vor einem Text und mit display: inline hat das dann alles geklappt.