Karl-Heinz Osmer


BB Farbcode


Der hier vorgeschlagene Farbcode für Text ist eine Erweiterung des BBCode. Beispiele:

+c+rote Schrift+c+ rote Schrift
-c-roter Hintergrund-c- roter Hintergrund
+c+-e-rot auf gelb-e-+c+ rot auf gelb
+wht+-blk-weiß auf schwarz-blk-+wht+ weiß auf schwarz


Hintergrund-Information zum Verständnis

Wikipedia:   „BBCode (von engl. Bulletin Board Code) ist eine an HTML angelehnte, jedoch vereinfachte Auszeichnungssprache, die bevorzugt für die Erstellung von Beiträgen in Webforen (engl. Bulletin Boards) eingesetzt wird. BBCode ist nicht offiziell reglementiert, stellt aber wegen seiner hohen Verbreitung einen Quasi-Standard sowie eine Best Current Practice dar.“


Boomwhacker-GruppeBoomwhacker-Gruppe Foto: Anthony Crider

Für Musikprojekte suchte ich farbige Übereinstimmung von Noten und den zugehörigen Tasten auf Instrumenten. Viele Spielzeug-Xylofone (Glockenspiele), Spielzeug-Klarinetten usw. für Kinder werden mit farbigen Plättchen und farbigen Noten ausgeliefert. Doch jeder Hersteller hat seine eigene Vorstellung von Farben. Ein Zusammenspiel mit Instrumenten verschiedener Hersteller ist nicht möglich.

Ich suchte nach einem Standard und habe ihn in den Boomwhacker-Farben gefunden. Im Musikunterricht werden diese Kunststoffrohre auf einen Gegenstand geschlagen (z.B. die eigene Hand) und geben dabei einen Ton der Tonleiter. Das rote Rohr den Ton C, das orangene den Ton D usw.


Boomwhacker-Farben

Boomwhacker-Farben
Tonleiter in C-Dur mit farbigen Boomwhacker-Symbolen, geschrieben in PriMus 1.1. Bild: Cachsten


Texteingabe

Manche bekannte BBCode sind einfach, so steht **fett** für fett und //kursiv// für kursiv. Bei anderen muss der Schreiber umständlich die TAstenkombinationen [AltGr][8] für eckige Klammer auf und [AltGr][9] für eckige Klammer zu drücken. Vor und hinter dem Text, also viermal.

Dagegen kommen Zeichenfolgen wie +c+ kaum in einem Text vor, und wenn, dann schon gar nicht paarig. Also brauchbare Kandidaten für farbige Textauszeichnung.

Der Kleinbuchstabe steht für für die Farbe des betreffenden Boomwhacker-Rohres. Das + (plus) bezeichnet die Schriftfarbe, das - (minus) die Hintergrund-Farbe. Der deutsche Ton h heißt international b, deshalb gibt es violett doppelt:

Schriftfarben:
+c+rote Schrift+c+ rote Schrift
+d+orange Schrift+d+ orange Schrift
+e+gelbe Schrift+e+ gelbe Schrift
+f+grüne Schrift+f+ grüne Schrift
+g+azur Schrift+g+ azur Schrift
+a+blaue Schrift+a+ blaue Schrift
+h+violette Schrift+h+ violette Schrift
+b+violette Schrift+b+ violette Schrift
+wht+weiße Schrift+wht+ violette Schrift
+blk+schwarze Schrift+blk+ schwarze Schrift

Hintergrundfarben:
-c-roter Hintergrund-c- roter Hintergrund
-d-orangener Hintergrund-d- orangener Hintergrund
-e-gelber Hintergrund-e- gelber Hintergrund
-f-grüner Hintergrund-f- grüner Hintergrund
-g-azurer Hintergrund-g- azurer Hintergrund
-a-blauer Hintergrund-a- blauer Hintergrund
-h-violetter Hintergrund-h- violetter Hintergrund
-b-violetter Hintergrund-b- violetter Hintergrund
-wht-weißer Hintergrund-wht- weißer Hintergrund
-blk-schwarzer Hintergrund-blk- schwarzer Hintergrund

alle Kombinationen zulässig:
+c+-e-rot auf gelb-e-+c+ rot auf gelb
+wht+-blk-weiß auf schwarz-blk-+wht+ weiß auf schwarz


Umsetzung nach HTML

So sieht der PHP-Code aus, wenn Text an den Browser geschickt wird:

include_once("boomwhacker2html.php");
echo boomwhacker2html (
"+wht+-c--- wichtig ---c-+wht+ Beim include den +g+**Pfad**+g+ der Datei voranstellen!"
);

Ausgabe:

-- wichtig -- Beim include den Pfad der Datei voranstellen!


In der Anwendung hat sich gezeigt, dass zwei Stufen sinnvoll sind:

  1. Farben als Klassen in einer CSS-Datei hinterkegen. Damit sind Farb-Korrekturen zentral für ein Projekt möglich. Ich sehe, dass meine Farb-Information für die Töne g und a nicht übereinstimmen mit der obigen Tonleiter aus Wikipedia. Wer hat REcht?
  2. Das Parsen, also die Umsetzung in HTML-Tags erfolgt mit einer PHP-Funktion, die in jedes PHP-Programm eingebunden werden kann. Da gibt es zwei Möglichkeiten:
    1. vor dem Speichern des Textes, wenn das Original nicht nehr benötigt wird,
    2. vor dem Senden des Textes an den Browser, wenn das Original zwecks Änderung erhalten bleibt.

Datei farben_noten.css   Stand 18.02.2020

enhält auch Halbtöne. Die geringen Farbunterschiede können beim Musizieren aber zu Verwechslungen führen.

/* **********************************************
 * osmer.de/css/farben_noten.css
 * Boomwhacker-Farben der Noten 2020-02-18
 * ********************************************** */

/* 13 Boomwhacker-Schriftfarben color */
.c_c    { color: #f2004c; } /* rot */
.c_cis  { color: #ff4c00; }
.c_d    { color: #ff8c00; } /* orange */
.c_dis  { color: #ffcc1a; }
.c_e    { color: #ffff1a; } /* gelb */
.c_f    { color: #ccff33; } /* hellgruen */
.c_fis  { color: #59ff00; }
.c_g    { color: #00ff87; } /* gruen */
.c_gis  { color: #008cff; }
.c_a    { color: #4040ff; } /* blau */
.c_ais  { color: #a666ff; }
.c_b    { color: #ff26ff; } /* violett */
.c_h    { color: #ff26ff; } /* violett */
.c_blk  { color: #000000; }
.c_wht  { color: #ffffff; } /* weiß */

/* 13 Boomwhacker-Hintergrundfarben background */
.bg_c   { background-color: #f2004c; } /* rot */
.bg_cis { background-color: #ff4c00; }
.bg_d   { background-color: #ff8c00; } /* orange */
.bg_dis { background-color: #ffcc1a; }
.bg_e   { background-color: #ffff1a; } /* gelb */
.bg_f   { background-color: #ccff33; } /* hellgruen */
.bg_fis { background-color: #59ff00; }
.bg_g   { background-color: #00ff87; } /* gruen */
.bg_gis { background-color: #008cff; }
.bg_a   { background-color: #4040ff; } /* blau */
.bg_ais { background-color: #a666ff; }
.bg_b   { background-color: #ff26ff; } /* violett */
.bg_h   { background-color: #ff26ff; } /* violett */
.bg_blk { background-color: #000000; }
.bg_wht { background-color: #ffffff; } /* weiß */

Datei boomwhacker2html.php   Stand 19.02.2020

Die drei Abschnitte // Erklaerung der Farben sind entbehrlich, sie werden für die Dokumentation benötigt. Wenn +c+ gezeigt, aber nicht umgesetzt werden soll, schreibt man +cc+

<?PHP
/* ********************************************************
 * 
 * 2020-02-18 http://osmer.de/include/boomwhacker2html.php
 * 
 * setzt Boomwhacker-Farben in html-Code um
 * 
 * ********************************************************* */

function boomwhacker2html() {
  $args = func_get_args();
  $text = $args[0];
  // 2019-12-08  \ am Ende einer Zeile unterdrueckt Zeilenumbruch
  // ein-fache Formatierungen wie <br> umsetzen
  // http:// codieren, da es das kuriv-// stoert
  // 2020-02-01 &nbsp; vermeiden wg. ; bei Datenuebertragung per CSV ==> ;;
  $arr_search   = array( "\\\r\n",  "\\\n\r", "\\\n", "http://", "https://", "[ ]",     "[]" );
  $arr_replace  = array( "",        "",       "",     "http:^^", "https:^^", "&nbsp;",  "&nbsp;" );
  $text = str_replace( $arr_search, $arr_replace, $text );

  /* *****************************************
   * 
   * paarweise Formatierungen
   * 
   * ***************************************** */
  $search = array (
// 4
   "**"    // fett
  ,"//"    // kursiv
  ,"__"    // unterstrichen
  ,"+B+"   // big

// 11 Schriftfarben
  ,"+c+"  
  ,"+d+"  
  ,"+e+"  
  ,"+f+"  
  ,"+g+"  
  ,"+a+"  
  ,"+h+"  
  ,"+b+"
// Schriftfarbe schwarz
  ,"+blk+"  
// Schriftfarbe weiß
  ,"+wht+"
// Schriftfarbe grau
  ,"+gry+"

// 11 Hintergrund-Farben + 3
  ,"-c-"  
  ,"-d-"  
  ,"-e-" 
  ,"-f-"  
  ,"-g-"  
  ,"-a-"  
  ,"-h-"  
  ,"-b-"
// Hintergrundfarbe schwarz
  ,"-blk-"
// Hintergrundfarbe weiß
  ,"-wht-"
// Hintergrundfarbe grau
  ,"-gry-"

// 20 Erklaerungen
  ,"+cc+"
  ,"+dd+"
  ,"+ee+"
  ,"+ff+"
  ,"+gg+"
  ,"+aa+"
  ,"+hh+"
  ,"+bb+"
  ,"+bblk+"
  ,"+wwht+"
  ,"-cc-"
  ,"-dd-"
  ,"-ee-"
  ,"-ff-"
  ,"-gg-"
  ,"-aa-"
  ,"-hh-"
  ,"-bb-"
  ,"-bblk-"
  ,"-wwht-"
  );


  /* ***************************
   * Replace fuer den Start-Tag:
   * *************************** */
  $replace_1 = array (
// 4
   "<b>"    // fett
  ,"<i>"    // kursiv
  ,"<u>"    // unterstrichen
  ,"<big>"  // groesser

// 8 Boomwhacker-Schriftfarben + 3
  , "<span class='c_c'>"
  , "<span class='c_d'>"
  , "<span class='c_e'>"
  , "<span class='c_f'>"
  , "<span class='c_g'>"
  , "<span class='c_a'>"
  , "<span class='c_b'>"    // intern. b = deutsch h
  , "<span class='c_h'>"
// Schriftfarbe schwarz
  , "<span class='c_blk'>"
// Schriftfarbe weiß
  , "<span class='c_wht'>"
// Schriftfarbe grau
  ,"<span class='c_gry'>"

// 8 Boomwhacker Hintergrund-Farben + 3
  , "<span class='bg_c'>"   
  , "<span class='bg_d'>"   
  , "<span class='bg_e'>"   
  , "<span class='bg_f'>"   
  , "<span class='bg_g'>"   
  , "<span class='bg_a'>"   
  , "<span class='bg_h'>"   
  , "<span class='bg_b'>"   
// Hintergrundfarbe schwarz
  , "<span class='bg_blk'>"
// Hintergrundfarbe weiss
  , "<span class='bg_wht'>"
// Hintergrundfarbe grau
  ,"<span class='bg_gry'>"

// Erklaerung der Farben
  ,"+c+"
  ,"+d+"
  ,"+e+"
  ,"+f+"
  ,"+g+"
  ,"+a+"
  ,"+h+"
  ,"+b+"
  ,"+blk+"
  ,"+wht+"
  ,"-c-"
  ,"-d-"
  ,"-e-"
  ,"-f-"
  ,"-g-"
  ,"-a-"
  ,"-h-"
  ,"-b-"
  ,"-blk-"
  ,"-wht-"
  );

  /* ***************************
   * Replace fuer den Ende-Tag:
   * *************************** */
  $replace_2 = array (
   "</b>"   // fett
  ,"</i>"   // kursiv
  ,"</u>"   // unterstrichen
  ,"</big>" // groesser

// 8 Boomwhacker-Schriftfarben + 3
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"

// 8 Boomwhacker Hintergrund-Farben + 3
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"
  ,"</span>"

// Erklaerung der Farben
  ,"+c+"
  ,"+d+"
  ,"+e+"
  ,"+f+"
  ,"+g+"
  ,"+a+"
  ,"+h+"
  ,"+b+"
  ,"+blk+"
  ,"+wht+"
  ,"-c-"
  ,"-d-"
  ,"-e-"
  ,"-f-"
  ,"-g-"
  ,"-a-"
  ,"-h-"
  ,"-b-"
  ,"-blk-"
  ,"-wht-"
  );

//echo "[" . count($search) . "] [" . count($replace_1) . "] [" . count($replace_2) . "]<br>";

  // den gesamten Text nacheinander nach allen Suchbegriffen $search durchsuchen
  for ( $i=0; $i < count($search); $i++ ) {
    // 1., 2., .. n. Suchbegriff
    $arr = explode ( $search[$i], $text );    // Formatierungs-String $search[$i] trennt
    // Formatierungs-String muss paarig sein count also ungerade: [Text **fett** Text **fett**] count=5
    while ( count($arr) > 2 && count($arr) % 2 != 0 ) {
      if        ( $search[$i] == "**" ) $such = "\*\*";     // ** maskieren
//    else  if  ( $search[$i] == "//" ) $such = "//";
      else  if  ( $search[$i] == '//' ) {
        $such = "\/\/";     // // maskieren
      }
//    else  if  ( $search[$i] == "//" ) $such = "\057\057"; // oktal
//    else  if  ( $search[$i] == "//" ) $such = '\x2F\x2F'; // hex
      else {
        $such = str_replace( "-", "\-", $search[$i] );    // - maskieren
        $such = str_replace( "+", "\+", $search[$i] );    // + maskieren
      }
      $text = preg_replace( "/".$such."/", $replace_1[$i], $text, 1 );  // nur einen ersetzen, nacheinander den 1. 3. 5. ...
      $text = preg_replace( "/".$such."/", $replace_2[$i], $text, 1 );  // nur einen ersetzen, den 2. 4. 6. ...
//    $arr  = explode ( $such, $text );                                 // Suchbegriff auf das naechste Vorkommen setzen
      $arr  = explode ( $search[$i], $text );                           // Suchbegriff auf das naechste Vorkommen setzen
    }
  }

  // http:// codieren, da es das kuriv-// stoert
  $arr_search   = array( "http:^^", "https:^^" );
  $arr_replace  = array( "http://", "https://" );
  return str_replace( $arr_search, $arr_replace, $text );
}
?>