Brüche mit HTML durch blinde Tabellen und Horizontallinien (hr)

[noname]

Hallo!

Ich wollte versuchen, gewöhnliche Brüche (in der mehrzeiligen Schreibweise, also x Umbruch Strich Umbruch y für x/y) nicht als Grafiken einzubinden, sondern etwas aufwendiger durch blinde Tabellen und horizontale Linien (<hr>) darzustellen, etwa so:

<table>
<tr>
<td><center>17</center><hr style="width:15px;" /><center>2</center></td>
<td>= 8 +</td>
<td><center>1</center><hr style="width:7px;" /><center>2</center></td>
<td>= 8,5</td>
</tr>
</table>

(17/2 = 8 + 1/2 = 8,5)

Das Problem ist, dass der Abstand zwischen Zahl und Bruchstrich zu groß ist. Kann man das irgendwie ändern?

Auf MathML möchte ich verzichten, da damit die meisten Browser nichts anfangen können und sich meine Seite an alle richten soll; sie zu zwingen Firefox herunterzuladen ist nicht gerade sehr einladend.

Ich danke im Voraus!

[chris11111]

Nimm LaTeX. Anders geht das IMHO nicht.

[Lothar]

Ich habe mir folgende Formatierungen im Stylesheet vorgegeben.

table.formel {
  table-layout:auto;
  margin:6px auto;
  border-collapse:collapse;
  empty-cells:show;
}
td.n {
  min-width:0.7em;
  height:2.4ex;
  text-align:center;
  vertical-align:middle;
  border-style:none;
  }
td.o {
  min-width:0.7em;
  height:2.4ex;
  text-align:center;
  vertical-align:middle;
  border-style:solid none none;
  border-width:1px;
  border-top-color:black;
  }
Mit diesen Formatierungen kommt man zumindest in nicht zu komplexen Fällen weiter, siehe z. B. http://lotharmelching.de/html/mathematisches/plaudereien_iterationen.htm oder http://lotharmelching.de/html/mathematisches/plaudereien_modellierung.htm

[noname]

Ich habe mir folgende Formatierungen im Stylesheet vorgegeben.

table.formel {
(...)
Mit diesen Formatierungen kommt man zumindest in nicht zu komplexen Fällen weiter, siehe z. B. http://lotharmelching.de/html/mathematisches/plaudereien_iterationen.htm oder http://lotharmelching.de/html/mathematisches/plaudereien_modellierung.htm

Wow, danke!

Ich wusste doch gleich, dass es geht!

[bleicher]

Grüße,

Auf MathML möchte ich verzichten, da damit die meisten Browser nichts anfangen können und sich meine Seite an alle richten soll; sie zu zwingen Firefox herunterzuladen ist nicht gerade sehr einladend.

plugin für IE tut es auch, aber die unterstellung, IEnutzer verstünden Brüche, ist sehr optimistisch.

MFG
bleicher

[noname]

Grüße,

Auf MathML möchte ich verzichten, da damit die meisten Browser nichts anfangen können und sich meine Seite an alle richten soll; sie zu zwingen Firefox herunterzuladen ist nicht gerade sehr einladend.

plugin für IE tut es auch, aber die unterstellung, IEnutzer verstünden Brüche, ist sehr optimistisch.

MFG
bleicher

Es gibt ja noch andere Browser, die kein MathML unterstützen. Und wie gesagt will ich nicht, dass sich die Besucher etwas herunterladen müssen, ob Browser oder nur ein Plug-in.

Gibt es denn tatsächlich keine Möglichkeit, das mit HTML zu machen? Die Ursache für den Abstand ist bei mir der <center>-Tag. Nun muss es doch eine Möglichkeit geben, mit der man Zahlen zentrieren kann ohne das ein neuer Absatz eingeleitet wird. (Oder?)

[Der Martin]

Hi,

Ich wollte versuchen, gewöhnliche Brüche (in der mehrzeiligen Schreibweise, also x Umbruch Strich Umbruch y für x/y) nicht als Grafiken einzubinden, sondern etwas aufwendiger durch blinde Tabellen und horizontale Linien (<hr>) darzustellen, etwa so:

warum mit Tabellen?
Zusätzlich zu den Vorschlägen mit MathML oder Latex noch eine reine HTML/CSS-Lösung:

<p>  
 Quotient = <span class="fraction">  
  <span>Zähler</span>  
  <span>Nenner</span>  
 </span>  
</p>

span.fraction  
 { display: inline-block;  
   font-size: 80%;  
   vertical-align: middle;  
 }  
span.fraction *  
 { display: block;  
   text-align: center;  
 }  
span.fraction :first-child  
 { border-bottom: 1px solid #000;  
 }

Mir persönlich gefällt das massive Auftreten von span-Elementen zwar auch noch nicht, aber es ist IMHO wesentlich übersichtlicher und einfacher als dein Tabellenansatz.

So long,
 Martin

[gast42]

Zusätzlich zu den Vorschlägen mit MathML oder Latex noch eine reine HTML/CSS-Lösung:

die aber so noch kein Fallback für die Darstellung ohne CSS bietet.

Ich habe das mal so gelöst

span.bruch {display:inline-block;vertical-align:middle;visibility:hidden;font-size:0}  
span.bruch span {color:black;display:block;visibility:visible;font-size:20px;}  
span.bruch span:first-child {border-bottom:thin black solid;}

<span class="bruch"><span>1</span>/<span>2</span></span> + <span class="bruch"><span>2</span>/<span>3</span></span> = <span class="bruch"><span>7</span>/<span>6</span></span>  

[noname]

Zusätzlich zu den Vorschlägen mit MathML oder Latex noch eine reine HTML/CSS-Lösung:

die aber so noch kein Fallback für die Darstellung ohne CSS bietet.

Ich habe das mal so gelöst

(...)

Das Problem dabei ist, dass der Bruchstrich nicht in der Mitte, sondern oben (als Unterstrich des Zählers) liegt. Lothars Lösung ist genau das was ich gesucht habe.

[Der Martin]

Hallo,

Zusätzlich zu den Vorschlägen mit MathML oder Latex noch eine reine HTML/CSS-Lösung:
Ich habe das mal so gelöst
Das Problem dabei ist, dass der Bruchstrich nicht in der Mitte, sondern oben (als Unterstrich des Zählers) liegt.

das kannst du über padding und margin von Zähler und Nenner beliebig regulieren.

Lothars Lösung ist genau das was ich gesucht habe.

Hmm. Ich bin nicht der Ansicht.

Schönen Sonntag noch,
 Martin

[noname]

Hallo,

Zusätzlich zu den Vorschlägen mit MathML oder Latex noch eine reine HTML/CSS-Lösung:
Ich habe das mal so gelöst
Das Problem dabei ist, dass der Bruchstrich nicht in der Mitte, sondern oben (als Unterstrich des Zählers) liegt.

das kannst du über padding und margin von Zähler und Nenner beliebig regulieren.

Ach so!

Vielen Dank!

[ChrisB]

Hi,

Ich wollte versuchen, gewöhnliche Brüche (in der mehrzeiligen Schreibweise, also x Umbruch Strich Umbruch y für x/y) nicht als Grafiken einzubinden, sondern etwas aufwendiger durch blinde Tabellen und horizontale Linien (<hr>) darzustellen

Auweia.

Auf MathML möchte ich verzichten, da damit die meisten Browser nichts anfangen können und sich meine Seite an alle richten soll

Gerade in Hinblick auf Barrierearmut empfinde ich deinen Plan mit den Tabellen als vollkommen ungeeignet - dass da bspw. ein Screenreader irgendwas vernünftiges draus machen kann, bezweifle ich.
Selbst mit einer Darstellung des Bruches rein in Bild-Form dürftest du in der Hinsicht um Längen besser liegen, wenn du die eigentliche Rechnung in verständlicher Form im alt-Text beschreibst.

MfG ChrisB

[Matthias Apsel]

Om nah hoo pez nyeetz, ChrisB!

Selbst mit einer Darstellung des Bruches rein in Bild-Form dürftest du in der Hinsicht um Längen besser liegen, wenn du die eigentliche Rechnung in verständlicher Form im alt-Text beschreibst.

genau (exakte Umrechnungen)

Matthias

[Deus Figendi (noReg)]

genau (exakte Umrechnungen)

Naja Screenreader leisten ne Menge geiles Zeug ^^ Ist zuweilen echt beeindruckend finde ich.
Aber wäre es nicht idiotensicherer ins alt-Attribut sowas zu schreiben wie:
"Temperatur in Grad Celsius ist gleich fünf Neuntel multipliziert mit einem um 32 reduzierten Wert in Grad Fahrenheit"
Oder sowas... (das natürlich ist wieder schlechter für Bots)

[Matthias Apsel]

Om nah hoo pez nyeetz, Deus Figendi (noReg)!

genau (exakte Umrechnungen) Naja Screenreader leisten ne Menge geiles Zeug ^^ Ist zuweilen echt beeindruckend finde ich.

an die Screenreader hab ich in dem Moment garnicht gedacht, nur an die Leute mit deaktivierten Grafiken.

Matthias