PHP/HTML Inhalte besser Sichtbar machen (mit Grafik)

[Marcell]

Hallo,

ich habe Datensätze aus einer Uralt-Anwendung. Die Datensätze sind ungewöhnlich formatiert, was aber vermutlich an diesem Datenbank Ding liegt: Bsp.

Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender { körperlicher Betätigung, außer um Vorteile daraus zu ziehen?} Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude {zu genießen, {die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}, welcher keine daraus} resultierende Freude nach sich zieht?

Besonders auffällig finde ich die geschweiften Klammern {} die auch teilweise ineinander verschachtelt sind. Bevor ich aber die Klammern einfach entferne möchte ich mir die Datensäte genauer anschauen, vielleicht lässt sich doch eine Methodik dahinter erkennen.

Meine erste Idee war mit die Texte in HTML aus zu geben und via. str_replace die { und } um farbige DIV. (<div style="background-color:#b0c4de">)zu erweitern.

Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <div style="background-color:#b0c4de">
{ körperlicher Betätigung, außer um Vorteile daraus zu ziehen?}</div> Aber wer hat irgend ein Recht, einen Menschen zu 
tadeln, der die Entscheidung trifft, eine Freude <div style="background-color:#b0c4de">{zu genießen, <div style="background-color:#b0c4de">{die keine unangenehmen
 Folgen hat, oder einen, der Schmerz vermeidet}</div>, welcher keine daraus}</div> resultierende Freude nach sich zieht?

Hier ist schnell erkennbar, das die verschachtelten geschweiften Klammern dadurch nicht besser zu sehen sind. Es müssten also mehrere Farben möglich sein um die Verschachtelungen farblich ordentlich darstellen zu können.

Hat hier jemand vielleicht eine Idee.

Ps: beim Durchschauen bin auch max. 10 Datenebenen gekommen die Verschiedenfarbig dargestellt werden sollten.

Ich hoffe das war jetzt nicht zu kompliziert geschrieben.

[Tabellenkalk]

Hallo,

ich habe Datensätze aus einer Uralt-Anwendung.

Kannst du die benennen?

Hat hier jemand vielleicht eine Idee.

Oft kann man Verschachtelungen durch Einrückungen ganz gut visualisieren.

Ps: beim Durchschauen bin auch max. 10 Datenebenen gekommen die Verschiedenfarbig dargestellt werden sollten.

Dann würde ich nicht unbedingt verschiedene Farben, sondern eine Farbe mit ansteigender Schattierung vorschlagen.

Gruß
Kalk

[Gunnar Bittersmann]

@@Marcell

Meine erste Idee war mit die Texte in HTML aus zu geben und via. str_replace die { und } um farbige DIV. (<div style="background-color:#b0c4de">)zu erweitern.

Inline-Styles sind nie™ eine gute Idee.

div ist auch keine. Du hast gewiss schon unzählige div im HTML-Code, müsstest denen hier eine beschreibende Klasse mitgeben. Besser ist es, gleich das passende HTML-Element zu verwenden: mark bietet sich hier an.

Hier ist schnell erkennbar, das die verschachtelten geschweiften Klammern dadurch nicht besser zu sehen sind. Es müssten also mehrere Farben möglich sein um die Verschachtelungen farblich ordentlich darstellen zu können.

Hat hier jemand vielleicht eine Idee.

Keinen opaken Hintergrund, sondern einen transparenten:

mark { background: hsla(214, 41%, 78%, 0.4) }

Wenn du die Bereiche als Blöcke formatierst, dann mit Einrückung:

mark { display: block; padding-left: 0.5em }

LLAP 🖖

[Auge]

Hallo

Du kannst mit Kindselektoren arbeiten. Ich baue deinen Quelltext für mein Beispiel mal um, weil ich denke, dass der Text an sich in einen Absatz gehört und die zu markierenden Teile Teil des Fließtextes sind.

<p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <span>{körperlicher Betätigung, außer um Vorteile daraus zu ziehen?}</span> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude <span>{zu genießen, <span>{die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}</span>, welcher keine daraus}</span> resultierende Freude nach sich zieht?</p>

p span {
background: #b0c4de;
}
p span>span {
background: #90a4be;
}

Der innere markierte Block wird mit dunklerer Hintergrundfarbe ausgegeben als der äußere Block.

Tschö, Auge

[Gunnar Bittersmann]

@@Auge

Du kannst mit Kindselektoren arbeiten.

Dazu müsste aber die Anzahl der Verschachtelungsebenen vorher bekannt sein, was wohl kaum gegeben ist.

Ich baue deinen Quelltext für mein Beispiel mal um, weil ich denke, dass der Text an sich in einen Absatz gehört und die zu markierenden Teile Teil des Fließtextes sind.

Das ja. Aber wie gesagt: mark, nicht span.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Du kannst mit Kindselektoren arbeiten.

Dazu müsste aber die Anzahl der Verschachtelungsebenen vorher bekannt sein, was wohl kaum gegeben ist.

„Ps: beim Durchschauen bin auf max. 10 Datenebenen gekommen die Verschiedenfarbig dargestellt werden sollten.“ (OP)

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Hallo Gunnar Bittersmann,

Du kannst mit Kindselektoren arbeiten.

Dazu müsste aber die Anzahl der Verschachtelungsebenen vorher bekannt sein, was wohl kaum gegeben ist.

„Ps: beim Durchschauen bin auf max. 10 Datenebenen gekommen die Verschiedenfarbig dargestellt werden sollten.“ (OP)

Hab ich gelesen. Das lässt reichlich Raum für Spekulationen. Das kann auch heißen: „Mehr als 10 Ebenen habe ich auf die Schnelle nicht gefunden; ausschließen kann ich es aber auch nicht.“

Vor allem zukünftig nicht. Was heute max. 10 sind, können morgen schon 12 sein.

Außerdem macht es doch etwas mehr Arbeit,

mark { background: … }
mark > mark { background: … }
⋮
mark > mark > mark > mark > mark > mark > mark > mark > mark > mark { background: … }

anzugeben als einmalig

mark { background: … }

mit teiltransparentem Hintergrund.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Außerdem macht es doch etwas mehr Arbeit,

mark { background: … }
mark > mark { background: … }
⋮
mark > mark > mark > mark > mark > mark > mark > mark > mark > mark { background: … }

anzugeben als einmalig

mark { background: … }

mit teiltransparentem Hintergrund.

Die Intension, dass sich die teiltransparenten Hintergründe übereinander legen und so quasi von selbst immer dunkler werden, hättest du ja auch betonen können ;-) Bei der Wahl der Farbe muss man aber noch beachten, dass die Schrift lesbar bleibt.

Bis demnächst
Matthias

[Gunnar Bittersmann]

@@Matthias Apsel

Die Intension, dass sich die teiltransparenten Hintergründe übereinander legen und so quasi von selbst immer dunkler werden, hättest du ja auch betonen können ;-)

Ich dachte, das sei selbsterklärend.

Ergänzung: die paddind-lefts addieren sich auch. ;-)

Bei der Wahl der Farbe muss man aber noch beachten, dass die Schrift lesbar bleibt.

Das stimmt. Also noch sowas wie

mark > mark > mark > mark > mark > mark { color: white }

LLAP 🖖

[Auge]

Hallo

mit teiltransparentem Hintergrund.

Die Intension, dass sich die teiltransparenten Hintergründe übereinander legen und so quasi von selbst immer dunkler werden, hättest du ja auch betonen können ;-)

Ahem :-)

Bei der Wahl der Farbe muss man aber noch beachten, dass die Schrift lesbar bleibt.

Bei einer Verschachtelungstiefe von (maximal) zehn kommen mir Zweifel, ob das noch handelbar ist. Entweder die überlagernden Farben unterscheiden sich nur schwach, damit auch die zehnte Ebene durch die Überlagerungen nicht zu dunkel wird oder die Farben unterscheiden sich so, dass ein buntes Wirrwarr herauskommt. Das gälte erst recht, wenn die Schriftfarben passend zu den Hintergründen wechseln.

Das so ansprechend zu gestalten, dass nicht die Hälfte der Betrachter Augenkrebs™ bekommt, dürfte nicht einfach mal so zu erledigen sein.

Tschö, Auge

[MrMurphy1]

Hallo

also zum Beispiel so:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Hervorhebungen 02</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   /*Grundeinstellungen*/
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0.5rem;
         margin: 0;
      }
   }
   /*Spezielle Einstellungen*/
   @media all {
      mark {
         background: hsla(214, 41%, 78%, 0.4);
         display: block;
         padding-left: 0.5em;
      }
   }
   </style>
</head>
<body>
   <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <mark>{ körperlicher Betätigung, außer um Vorteile daraus zu ziehen?}</mark> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude <mark>{zu genießen, <mark>{die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}</mark>, welcher keine daraus}</mark> resultierende Freude nach sich zieht?</p>
   <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <mark>{ <mark>{körperlicher <mark>{Betätigung, <mark>{außer um}</mark> Vorteile}</mark> daraus}</mark> zu ziehen?}</mark> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude <mark>{zu genießen, <mark>{die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}</mark>, welcher keine daraus}</mark> resultierende Freude nach sich zieht?</p>
</body>
</html>

Gruss

MrMurphy

[Gunnar Bittersmann]

@@Gunnar Bittersmann

Außerdem macht es doch etwas mehr Arbeit,

mark { background: … }
mark > mark { background: … }
⋮
mark > mark > mark > mark > mark > mark > mark > mark > mark > mark { background: … }

anzugeben

Sich die Arbeit abnehmen zu lassen macht die Arbeit auch nicht gerade weniger.

LLAP 🖖

[Matthias Apsel]

Hallo Gunnar Bittersmann,

Sich die Arbeit abnehmen zu lassen macht die Arbeit auch nicht gerade weniger.

Wenn man opake Hintergründe nimmt, brauchen es ja nicht 10 verschiedene Farben zu sein, für die Visualisierung reichen ja auch 2 - 4 verschiedene, sich wiederholende Farben. Und wenn man das HTML anfassen muss, kann man auch jedem zweiten Kindelement eine Klasse geben.

Oder mit SASS und unter Verzicht der Klasse http://sassmeister.com/gist/9c8c8857a57dc4dc7cbd

Bis demnächst
Matthias

[MrMurphy1]

Hallo,

ich habe mal ein praktisches Beispiel erstellt. Die Ebenen können natürlich beliebig erweitert werden und dass die Farben noch angepasst werden können sollte klar sein.

Falls die einzelnen Ebenen jeweils zusätzlich in einer Zeile stehen sollen, einfach im CSS beim ersten mark das "display: block;" aktivieren.

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>Hervorhebungen 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   /*Grundeinstellungen*/
   @media all {
      /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
      header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
         display: block;
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0.5rem;
         margin: 0;
      }
   }
   /*Spezielle Einstellungen*/
   @media all {
      mark {
         background-color: orange;
         /*display: block;*/
      }
      mark mark {
         background-color: green;
      }
      mark mark mark {
         color: white;
         background-color: blue;
      }
      mark mark mark mark {
         color: white;
         background-color: red;
      }
   }
   </style>
</head>
<body>
   <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <mark>{ körperlicher Betätigung, außer um Vorteile daraus zu ziehen?}</mark> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude <mark>{zu genießen, <mark>{die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}</mark>, welcher keine daraus}</mark> resultierende Freude nach sich zieht?</p>
   <p>Um ein triviales Beispiel zu nehmen, wer von uns unterzieht sich je anstrengender <mark>{ <mark>{körperlicher <mark>{Betätigung, <mark>{außer um}</mark> Vorteile}</mark> daraus}</mark> zu ziehen?}</mark> Aber wer hat irgend ein Recht, einen Menschen zu tadeln, der die Entscheidung trifft, eine Freude <mark>{zu genießen, <mark>{die keine unangenehmen Folgen hat, oder einen, der Schmerz vermeidet}</mark>, welcher keine daraus}</mark> resultierende Freude nach sich zieht?</p>
</body>
</html>

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

@media all {

Wozu soll das eigentlich in deinen Beispielen immer gut sein?

  /* Neue HTML5-Elemente für ältere Browser als Block-Elemente übergeben */
  header, nav, main, aside, footer, section, article, figure, figcaption, audio, video {
     display: block;
  }

Welche älteren Browser, die noch im Umlauf sind, sollten diese Angabe nötig haben?

Alte IE zählen nicht. Die brauchen sowieso dem Shiv, der display: block mit übernimmt.

LLAP 🖖

[MrMurphy1]

Hallo,

auf den IE8 / IE9 und IE10 lege ich auch keinen Wert. Aber der IE11 soll auch nicht mehr berücksichigt werden?

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8">
   <title>IE 11 main-Element</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
   /*Grundeinstellungen*/
   @media all {
      }
      * {
         box-sizing: border-box;
      }
      html {
         font-size: 120%;
      }
      body {
         padding: 0.5rem;
         margin: 0;
      }
      main {
         background-color: yellow;
         padding: 0.5rem;
         border: 2px solid orange;
         margin: 0.5rem;
      }
      main:nth-child(5) {
         display: block;
      }
   }
   </style>
</head>
<body>
   <h1>main mit IE</h1>
   <p>In der Praxis dürfen natürlich keine zwei main-Elemente auf einer Seite vorkommen.</p>
   <p>Die Seite mal im IE11 betrachten.</p>
   <main>
      <h2>main - nicht als Blockelement deklariert</h2>
   </main>
   <main>
      <h2>main - als Blockelement deklariert</h2>
   </main>
</body>
</html>

Auf meinen Rechnern bekommt der IE11 das main-Element ohne zusätzliche block-Anweisung nicht gebacken.

Ähnliches gilt auch für das unterste Beispiel von Selfhtml

http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundstruktur

das so im IE11 nicht funktioniert und für das ohne weiteren Hinweis im "ansehen..." (also im praktischen Beispiel) noch ein "display: block;" für das main-Element eingeschmuggelt wurde.

Darüber, ob und wie der IE11 mit den anderen neuen Elementen zurecht kommt mache ich mir keinen Kopf. Solange der IE11 noch relevant ist bleibt in meinen Beispielen die Block-Anweisung für die neuen Elemente drin. Auch unabhängig davon, ob sie auf der Seite verwendet werden oder nicht.

Gruss

MrMurphy

[Gunnar Bittersmann]

@@MrMurphy1

Auf meinen Rechnern bekommt der IE11 das main-Element ohne zusätzliche block-Anweisung nicht gebacken.

Ja, main kann durchaus display: block vertragen. Aber header, nav, aside, footer, section, article, figure, figcaption, audio, video?

Zumal das bei audio, video auch gar nicht der Standardstil ist, sondern beides ersetzte Inline-Elemente sind.

LLAP 🖖

[MrMurphy1]

Hallo

da hat sich die nachträgliche Überarbeitung meines Beitrag mit deiner Antwort überschnitten:

Ja, main kann durchaus display: block vertragen. Aber header, nav, aside, footer, section, article, figure, figcaption, audio, video?

Das ist mir vollkommen egal. Der Eintrag hilft Probleme zu vermeiden und schadet nicht. Du kannst ihn ja gerne weglassen.

Gruss

MrMurphy

[Matthias Apsel]

Hallo MrMurphy1,

Auf meinen Rechnern bekommt der IE11 das main-Element ohne zusätzliche block-Anweisung nicht gebacken.

Ähnliches gilt auch für das unterste Beispiel von Selfhtml

http://wiki.selfhtml.org/wiki/HTML/Tutorials/HTML5-Grundstruktur

das so im IE11 nicht funktioniert und für das ohne weiteren Hinweis im "ansehen..." (also im praktischen Beispiel) noch ein "display: block;" für das main-Element eingeschmuggelt wurde.

Das wurde nicht ‚eingeschmuggelt‘, sondern das haben alle Beispiele, denn alle Beispiele enthalten ein main-Element. Deshalb fiel vielleicht nicht auf, dass diese Angabe notwendig ist.

Danke für den Hinweis.

Bis demnächst
Matthias

[MrMurphy1]

Hallo,

das "eingeschmuggelt" wollte ich eigentlich wie hier in Anführungszeichen setzen. Entschuldigung.

Ich weiß halt noch selbst wie ich vor 20 Jahren mit HTML (damals noch ohne CSS, dafür noch mitten im Browserkrieg) begonnen habe und an Beispielen verzweifelte, in denen der angezeigte Quelltext nicht mit den verlinkten Beispielen übereinstimmte.

Gruss

MrMurphy

[JürgenB]

Hallo,

      mark {
      mark mark {
      mark mark mark {
      mark mark mark mark {

räusper … sind wir nicht inzwischen beim Euro?

Gruß Jürgen