Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > de.comp.lang.javascript > #4913 > unrolled thread

"Optische" Zeichenhöhe berechnen

Back to article view | Back to de.comp.lang.javascript

Contents

  "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-16 15:50 +0100
    Re: "Optische" Zeichenhöhe berechnen Arno Welzel <usenet@arnowelzel.de> - 2017-11-16 19:50 +0100
      Re: "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-16 20:07 +0100
        Re: "Optische" Zeichenhöhe berechnen "Peter J. Holzer" <hjp-usenet3@hjp.at> - 2017-11-16 23:33 +0100
          Re: "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-17 00:00 +0100
            Re: "Optische" Zeichenhöhe berechnen Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-11-17 02:35 +0100
              Re: "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-17 08:06 +0100
                Re: "Optische" Zeichenhöhe berechnen Thomas 'PointedEars' Lahn <PointedEars@web.de> - 2017-11-17 14:00 +0100
                  Re: "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-20 09:54 +0100
        Re: "Optische" Zeichenhöhe berechnen Arno Welzel <usenet@arnowelzel.de> - 2017-11-18 19:52 +0100
          Re: "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-20 09:46 +0100
    Re: "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-20 09:36 +0100
      Re: "Optische" Zeichenhöhe berechnen Christian Zimmermann <ch.zim@web.de> - 2017-11-20 10:31 +0100

#4913 — "Optische" Zeichenhöhe berechnen

Hallo,

ich möchte eine Zeichenfolge in einem canvas vertikal zentriert
ausgeben, aber nach "meinen" Regeln ;-)

"Optisch", um es von "technisch" abzugrenzen, bedeutet hier die maximale
vertikale sichtbare Ausprägung eines Zeichens, wobei eben "o" und "O"
jeweils unterschiedliche "optische" Höhen aufweisen. Dies möchte ich
beim vertikalen Zentrieren berücksichtigen. Technisch gesehen sind beide
Zeichen gleich hoch, was wohl durch den jeweils zugrundeliegenden
Zeichensatz vorgegeben sein dürfte (natürlich bei denselben
Eigenschaften von Schriftart, -größe, etc.).

D. h. habe ich eine Zeichenfolge, die keine Ober- und Unterlängen
aufweist, wie z. B. "oooo", möchte ich vertikal anders zentrieren als
bei Zeichenfolgen wie "ggggg" oder "babab" oder "ÄÄÄÄÄ".

Per 2d-Context-Objekt (.getContext("2d")) des canvas-Objekts kann man
die textBaseline auf "middle" festlegen. Das bringt aber nicht
(immer/ganz) das gewünschte Resultat. Ebensowenig funktioniert ein
unsichtbares DIV-Element als Höhenmesser, da die Höhe von "e", "A", "Äg"
jeweils die gleiche ist.

Hat hierzu jemand eine Idee?

Gruß,
Christian

[toc] | [next] | [standalone]

#4914

Christian Zimmermann:

> ich möchte eine Zeichenfolge in einem canvas vertikal zentriert
> ausgeben, aber nach "meinen" Regeln ;-)
> 
> "Optisch", um es von "technisch" abzugrenzen, bedeutet hier die maximale
> vertikale sichtbare Ausprägung eines Zeichens, wobei eben "o" und "O"
> jeweils unterschiedliche "optische" Höhen aufweisen. Dies möchte ich
> beim vertikalen Zentrieren berücksichtigen. Technisch gesehen sind beide
> Zeichen gleich hoch, was wohl durch den jeweils zugrundeliegenden
> Zeichensatz vorgegeben sein dürfte (natürlich bei denselben
> Eigenschaften von Schriftart, -größe, etc.).
> 
> D. h. habe ich eine Zeichenfolge, die keine Ober- und Unterlängen
> aufweist, wie z. B. "oooo", möchte ich vertikal anders zentrieren als
> bei Zeichenfolgen wie "ggggg" oder "babab" oder "ÄÄÄÄÄ".

Geht nicht, da die Zeichen für den Browser alle gleich hoch sind. Wie
viel von dem verfügbaren Platz durch den Schriftschnitt dann tatsächlich
vollgemalt wird, ist dem Browser egal.

> Hat hierzu jemand eine Idee?

Die Zeichen des jeweiligen Schriftschnittes manuell abmessen und dann
einzeln in span-Elemente packen, die jeweils eine relative
Positionierung nach oben oder unten enthalten. Am besten per
serverseitigem Script, dass anhand des vorgegebenen Textes die
entsprechenden HTML-Fragmente ausgibt.

Nein, ich würde sowas nicht haben wollen auf meiner Website. Aber wenn
Optik so wichtig ist...


-- 
Arno Welzel
https://arnowelzel.de
https://de-rec-fahrrad.de
http://fahrradzukunft.de

[toc] | [prev] | [next] | [standalone]

#4915

Hallo Arno,

Am 16.11.2017 um 19:50 schrieb Arno Welzel:
> Christian Zimmermann:
> ...
>> ...
> 
>> Hat hierzu jemand eine Idee?
> 
> Die Zeichen des jeweiligen Schriftschnittes manuell abmessen 

Das mit dem Abmessen ist mir auch schon in den Sinn gekommen, allerdings
würde ich das automatisieren und nicht manuell machen. Dann müßte ich
allerdings für jede Art von Zeichendarstellung Abmessungen speichern,
zumindest für diejenigen Darstellungen, die gebraucht werden. Deswegen
wäre ich da gerne flexibel gewesen, wenn eine Berechnung on-the-fly denn
möglich wäre.

> und dann
> einzeln in span-Elemente packen, die jeweils eine relative
> Positionierung nach oben oder unten enthalten. Am besten per
> serverseitigem Script, dass anhand des vorgegebenen Textes die
> entsprechenden HTML-Fragmente ausgibt.

Ich glaube, da missverstehen wir uns. Ich will die Zeichenfolge als
ganzes betrachten, d. h. bzgl. der max. vertikalen Ausprägung, und nicht
jedes Zeichen einzeln.

Gruß,
Christian

[toc] | [prev] | [next] | [standalone]

#4916

On 2017-11-16 19:07, Christian Zimmermann <ch.zim@web.de> wrote:
> Am 16.11.2017 um 19:50 schrieb Arno Welzel:
>> Die Zeichen des jeweiligen Schriftschnittes manuell abmessen 
>
> Das mit dem Abmessen ist mir auch schon in den Sinn gekommen, allerdings
> würde ich das automatisieren und nicht manuell machen. Dann müßte ich
> allerdings für jede Art von Zeichendarstellung Abmessungen speichern,
> zumindest für diejenigen Darstellungen, die gebraucht werden. Deswegen
> wäre ich da gerne flexibel gewesen, wenn eine Berechnung on-the-fly denn
> möglich wäre.

Auf einen Canvas schreiben und schauen, welche Pixel schwarz werden,
müsste gehen, oder?

Sonst kann man die Informationen sicher offline aus dem Fontfile
herauslesen.

        hp


-- 
   _  | Peter J. Holzer    | Fluch der elektronischen Textverarbeitung:
|_|_) |                    | Man feilt solange an seinen Text um, bis
| |   | hjp@hjp.at         | die Satzbestandteile des Satzes nicht mehr
__/   | http://www.hjp.at/ | zusammenpaßt. -- Ralph Babel

[toc] | [prev] | [next] | [standalone]

#4917

Hallo Peter,

Am 16.11.2017 um 23:33 schrieb Peter J. Holzer:
> On 2017-11-16 19:07, Christian Zimmermann <ch.zim@web.de> wrote:
>> Am 16.11.2017 um 19:50 schrieb Arno Welzel:
>>> Die Zeichen des jeweiligen Schriftschnittes manuell abmessen 
>>
>> Das mit dem Abmessen ist mir auch schon in den Sinn gekommen, allerdings
>> würde ich das automatisieren und nicht manuell machen. Dann müßte ich
>> allerdings für jede Art von Zeichendarstellung Abmessungen speichern,
>> zumindest für diejenigen Darstellungen, die gebraucht werden. Deswegen
>> wäre ich da gerne flexibel gewesen, wenn eine Berechnung on-the-fly denn
>> möglich wäre.
> 
> Auf einen Canvas schreiben und schauen, welche Pixel schwarz werden,
> müsste gehen, oder?

Jupp. Habe mir das in den letzten zwei Stunden mal zusammengebastelt:
Canvas genügend groß dimensionieren, Text darauf mit
textBaseline="bottom" ausgeben, per getImageData() das Pixel-Farb-Array
des Bereichs geholt, in welchem der Text steht und dann zeilenweise von
oben und unten auf Transparenz > 0 geprüft. Beim ersten Transparenzwert
> 0 finde ich den oberen bzw. unteren Rand des Zeichens resp. der
Zeichenfolge.

Muss den Code aber noch säubern. Dann werde ich ihn mal posten.

Gruß,
Christian

[toc] | [prev] | [next] | [standalone]

#4918

Christian Zimmermann wrote:

> Hallo Peter,

Wir lesen hier alle mit.
 
> […] Habe mir das in den letzten zwei Stunden mal zusammengebastelt:
> Canvas genügend groß dimensionieren, Text darauf mit
> textBaseline="bottom" ausgeben, per getImageData() das Pixel-Farb-Array
> des Bereichs geholt, in welchem der Text steht und dann zeilenweise von
> oben und unten auf Transparenz > 0 geprüft. Beim ersten Transparenzwert
>> 0 finde ich den oberen bzw. unteren Rand des Zeichens resp. der
> Zeichenfolge.

Ob das grundsätzlich sinnvoll ist, das ist natürlich eine andere Frage.

Ich denke: nein.  Du suchst anscheinend ein Problem zu Deiner Lösung bzw. 
hast ein X–Y-Problem.  Die Textdarstellung in Canvas (und überhaupt) *works* 
as *designed*.

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#4919

Hallo Thomas,

Am 17.11.2017 um 02:35 schrieb Thomas 'PointedEars' Lahn:
> Christian Zimmermann wrote:
> 
>> Hallo Peter,
> 
> Wir lesen hier alle mit.

dessen bin ich mir durchaus bewusst, dass hier noch andere mitlesen.
Nichtsdestotrotz hat mir Peter geantwortet und er bekam darauf eine
Antwort meinerseits.

>> […] Habe mir das in den letzten zwei Stunden mal zusammengebastelt:
>> Canvas genügend groß dimensionieren, Text darauf mit
>> textBaseline="bottom" ausgeben, per getImageData() das Pixel-Farb-Array
>> des Bereichs geholt, in welchem der Text steht und dann zeilenweise von
>> oben und unten auf Transparenz > 0 geprüft. Beim ersten Transparenzwert
>>> 0 finde ich den oberen bzw. unteren Rand des Zeichens resp. der
>> Zeichenfolge.
> 
> Ob das grundsätzlich sinnvoll ist, das ist natürlich eine andere Frage.

Da möchte ich dir nicht widersprechen.

> Ich denke: nein.  Du suchst anscheinend ein Problem zu Deiner Lösung bzw. 
> hast ein X–Y-Problem.  

Bezogen auf meine Fragestellung ein Y-Problem.

> Die Textdarstellung in Canvas (und überhaupt) *works* 
> as *designed*.

Das tut sie. Ich habe ja nichts anderes behauptet.

Gruß,
Christian

[toc] | [prev] | [next] | [standalone]

#4920

Christian Zimmermann wrote:

> Am 17.11.2017 um 02:35 schrieb Thomas 'PointedEars' Lahn:
>> Christian Zimmermann wrote:
>>> Hallo Peter,
>> Wir lesen hier alle mit.
> 
> dessen bin ich mir durchaus bewusst, dass hier noch andere mitlesen.
> Nichtsdestotrotz hat mir Peter geantwortet und er bekam darauf eine
> Antwort meinerseits.

Nichtsdestotrotz ist so eine persönliche Anrede in Netnews unüblich.
Andere Leser könnten sich so von der Diskussion ausgeschlossen fühlen.

>> Ich denke: nein.  Du suchst anscheinend ein Problem zu Deiner Lösung bzw.
>> hast ein X–Y-Problem.
> 
> Bezogen auf meine Fragestellung ein Y-Problem.

<https://meta.stackexchange.com/questions/66377/what-is-the-xy-problem>
<https://tty1.net/smart-questions_de.html#goal>

HTH

-- 
PointedEars
FAQ: <http://PointedEars.de/faq> | <http://PointedEars.de/es-matrix>
<https://github.com/PointedEars> | <http://PointedEars.de/wsvn/>
Twitter: @PointedEars2 | Please do not cc me./Bitte keine Kopien per E-Mail.

[toc] | [prev] | [next] | [standalone]

#4924

Hallo Thomas,

Am 17.11.2017 um 14:00 schrieb Thomas 'PointedEars' Lahn:
> Christian Zimmermann wrote:
> 
>> Am 17.11.2017 um 02:35 schrieb Thomas 'PointedEars' Lahn:
>>> Christian Zimmermann wrote:
>>>> Hallo Peter,
>>> Wir lesen hier alle mit.
>>
>> dessen bin ich mir durchaus bewusst, dass hier noch andere mitlesen.
>> Nichtsdestotrotz hat mir Peter geantwortet und er bekam darauf eine
>> Antwort meinerseits.
> 
> Nichtsdestotrotz ist so eine persönliche Anrede in Netnews unüblich.
> Andere Leser könnten sich so von der Diskussion ausgeschlossen fühlen.

das sehe ich anders und kenne ich anders. Direkte Anreden sind durchaus
angebracht, da ich ja auch mit Menschen kommuniziere. Zumindest glaube
ich das.

Dass sich irgendjemand ausgeschlossen fühlen könnte, weil ich auf eine
Antwort persönlich reagiere, kommt mir ziemlich weit hergeholt vor, da
wir uns hier in einer öffentlichen newsgroup bewegen, die per se
niemanden ausschließt, da sie ja öffentlich ist. Da kann nunmal keine
private Konversation hergestellt werden ;-)

Gruß,
Christian

[toc] | [prev] | [next] | [standalone]

#4921

Christian Zimmermann:

> Am 16.11.2017 um 19:50 schrieb Arno Welzel:
[...]
>> und dann
>> einzeln in span-Elemente packen, die jeweils eine relative
>> Positionierung nach oben oder unten enthalten. Am besten per
>> serverseitigem Script, dass anhand des vorgegebenen Textes die
>> entsprechenden HTML-Fragmente ausgibt.
> 
> Ich glaube, da missverstehen wir uns. Ich will die Zeichenfolge als
> ganzes betrachten, d. h. bzgl. der max. vertikalen Ausprägung, und nicht
> jedes Zeichen einzeln.

Was am Prinzip nichts ändert - dann muss halt der Server anhand des
Textinhaltes berechnen, wie weit der Text nach oben oder unten
verschoben werden werden müsste und ein <span>-Element mit einer
passenden lokalen Regel ausgeben.


-- 
Arno Welzel
https://arnowelzel.de
https://de-rec-fahrrad.de
http://fahrradzukunft.de

[toc] | [prev] | [next] | [standalone]

#4923

Hallo Arno,

Am 18.11.2017 um 19:52 schrieb Arno Welzel:
> Christian Zimmermann:
> 
>> Am 16.11.2017 um 19:50 schrieb Arno Welzel:
> [...]
>>> und dann
>>> einzeln in span-Elemente packen, die jeweils eine relative
>>> Positionierung nach oben oder unten enthalten. Am besten per
>>> serverseitigem Script, dass anhand des vorgegebenen Textes die
>>> entsprechenden HTML-Fragmente ausgibt.
>>
>> Ich glaube, da missverstehen wir uns. Ich will die Zeichenfolge als
>> ganzes betrachten, d. h. bzgl. der max. vertikalen Ausprägung, und nicht
>> jedes Zeichen einzeln.
> 
> Was am Prinzip nichts ändert - dann muss halt der Server anhand des
> Textinhaltes berechnen, wie weit der Text nach oben oder unten
> verschoben werden werden müsste und ein <span>-Element mit einer
> passenden lokalen Regel ausgeben.

Die JavaScript-Lösung ist mir lieber, da der Server hier nichts
vorberechnen muss oder vorberechnete Elemente vorhalten muss. Klar kann
der User JavaScript abschalten, aber das ist für mich nicht praktikabel.
Dennoch danke.

Gruß,
Christian

[toc] | [prev] | [next] | [standalone]

#4922

Hi,

erstmal zum Code. Ich habe mir nun folgende Lösung für mein Problem
erstellt. Das hat etwas "länger" gedauert, weil ich zufälligerweise auch
mit "Comic Sans MS" getestet und dabei festgestellt habe, dass der
Firefox bei dieser Schriftart über den unteren Canvas-Rand
hinausschreiben kann. Dies bedarf in diesem Fall noch einer kleinen
Korrektur.

************* Code *************
<!DOCTYPE html>
<html>
<meta charset ="utf-8">
<body style="background-color:steelblue">

<canvas id="myCanvas" width="1000" height="140"
style="background-color:white">
Your browser does not support the HTML5 canvas tag.</canvas>

<script>
// test cases
var i,x,tw;
var c = document.getElementById("myCanvas");
var ctx = c.getContext("2d");
var txt = ['g','a','A','Ä','Â','Âj','"'], h=0, fontStyle="bold 90px Arial";
var txtMet;

ctx.moveTo(0,c.height/2);
ctx.lineTo(c.width,c.height/2);
ctx.stroke();
ctx.font = fontStyle;
x = 0;
for (i = 0; i < txt.length; i++) {
    txtMet = getVisualTextMetricsInPixel(txt[i], fontStyle);
    tw = ctx.measureText(txt[i]).width;
    ctx.textBaseline = "bottom";
    ctx.fillText(txt[i], x , c.height/2 + txtMet.textHeight/2
                                        +
txtMet.distBottomTextToBottomLine - txtMet.adjust);
    ctx.textBaseline = "middle";
    ctx.fillText(txt[i], x + tw + 5, c.height/2);
    x = x + 2 * tw + 15;
}

function getVisualTextMetricsInPixel (text, fontStyle) {
  var i;
  var img, flag, lines;
  var canvas, ctx;
  var txtMet = {textHeight: 0, fontMaxHeight: 0,
                distTopTextToBottomLine: 0,
                adjust: 0};

  if (text === "") return txtMet;

  var body = document.getElementsByTagName("body")[0];
  var div = document.createElement("div");
  var textNode = document.createTextNode("jÂ");

  //retrieve maximum font height
  div.appendChild(textNode);
  div.setAttribute("style", "font:" + fontStyle);
  body.appendChild(div);
  txtMet.fontMaxHeight = div.offsetHeight;
  body.removeChild(div);

  //retrieve "visual" font height and distance from bottom line
  canvas = document.createElement("canvas");
  canvas.style.visibility = "hidden";
  body.appendChild(canvas);
  ctx = canvas.getContext("2d");

  // set the width
  ctx.font = fontStyle;
  canvas.width = Math.ceil(ctx.measureText(text).width);
  canvas.height = txtMet.fontMaxHeight;
  ctx.font = fontStyle;
  ctx.textBaseline = "bottom";
  ctx.fillText(text, 0, canvas.height - 1);
  // check if part of the text is drawn below the bottom of the canvas rect,
  // because in Firefox sometimes .fillText() with textBaseline =
"bottom" and
  // font "Comic Sans MS" does
  img = ctx.getImageData(0, canvas.height - 1, canvas.width, canvas.height);
  i=0;
  while (!isRowEmpty(img)) {
        i++;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillText(text, 0, canvas.height - i);
        img = ctx.getImageData(0, canvas.height - 1, canvas.width,
canvas.height);
  }
  if (i > 0) txtMet.adjust = i - 1;
  // retrieve the text height
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.fillText(text, 0, canvas.height - txtMet.adjust);
  img = ctx.getImageData(0, 0, canvas.width, canvas.height);
  lines = getTopBottomLine(img, canvas.width, canvas.height - 1);
  txtMet.textHeight = lines.bottom - lines.top + 1;
  txtMet.distBottomTextToBottomLine = canvas.height - lines.bottom - 1;

  body.removeChild(canvas);
  return txtMet;
}

function isRowEmpty (img) {
  for (var i = 0; i <= img.data.length; i+=4) {
      if (img.data[i+3] > 0) { return false; }
  }
  return true;
}

function getTopBottomLine (img, width, height) {
  var lines = {top: -1, bottom: -1};
  var i,j,flag;

  // Approach from top
  // (to the first non-transparent pixel that belongs to the top of the
character)
  flag = false;
  for (j = 0; j <= height; j++) {
      for (i = 0; i < width; i++) {
          if (img.data[(j*width+i)*4+3] > 0) {
             lines.top = j;
             flag = true;
             break;
          }
      }
      if (flag) break;
  }
  // Approach from bottom
  // (to the first non-transparent pixel that belongs to the bottom of
the character)
  flag = false;
  for (j = height; j >= 0; j--) {
      for (i = 0; i < width; i++) {
          if (img.data[(j*width+i)*4+3]>0) {
             lines.bottom = j;
             flag = true;
             break;
          }
      }
      if (flag) break;
  }

  return lines;
}
</script>

</body>
</html>

************* Code *************

Getestet habe ich mit

Firefox 52.4.0 (32bit)
Firefox 52.5.0 (32bit)
Firefox 58.0b4 (64-Bit)
IE 11.15.15299.0
Edge 41.16299.15.0
Chrome 61.0.3163.100 (32-Bit)
Chrome 62.0.3202.94 (32-Bit)

Gruß,
Christian

[toc] | [prev] | [next] | [standalone]

#4925

Hier sollte canvas.height im letzten Parameter ersetzt werden durch 1.
Außerdem ist das i unnötig, da direkt mit txtMet.adjust gerechnet werden
kann.

>   img = ctx.getImageData(0, canvas.height - 1, canvas.width, canvas.height);
>   i=0;
>   while (!isRowEmpty(img)) {
>         i++;
>         ctx.clearRect(0, 0, canvas.width, canvas.height);
>         ctx.fillText(text, 0, canvas.height - i);
>         img = ctx.getImageData(0, canvas.height - 1, canvas.width,
> canvas.height);
>   }
>   if (i > 0) txtMet.adjust = i - 1;

*korrigierter Abschnitt:*

img = ctx.getImageData(0, canvas.height - 1, canvas.width, 1);
while (!isRowEmpty(img)) {
        txtMet.adjust++;
        ctx.clearRect(0, 0, canvas.width, canvas.height);
        ctx.fillText(text, 0, canvas.height - txtMet.adjust);
        img = ctx.getImageData(0, canvas.height - 1, canvas.width, 1);
}
if (txtMet.adjust > 0) txtMet.adjust -= 1;

[toc] | [prev] | [standalone]

Back to top | Article view | de.comp.lang.javascript

csiph-web