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

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!

  1. Nimm LaTeX. Anders geht das IMHO nicht.

    1. 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

      1. 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!

  2. 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

    --
    __________________________-

    FirefoxMyth
    1. 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?)

  3. 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

    --
    Die meisten Menschen werden früher oder später durch Computer ersetzt.
    Für manche würde aber auch schon ein einfacher Taschenrechner genügen.
    Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
    1. 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>  
      
      
      1. 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.

        1. 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

          --
          Wer keiner Fliege etwas zuleide tut, darf sich nicht über die Maden im Fleisch wundern.
          Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
          1. 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!

  4. 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

    --
    RGB is totally confusing - I mean, at least #C0FFEE should be brown, right?
    1. 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

      --
      1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif
      1. 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)

        1. 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

          --
          1/z ist kein Blatt Papier. http://www.billiger-im-urlaub.de/kreis_sw.gif