Text als Grafiken darstellen

InvisibleQuantum · 20 August 2015

Ist es irgendwie machbar, dass man mit CSS einen Text, um genauer zu sein Zahlen als Grafiken darstellen lässt?
Hier mal ein Beispiel, was ich meine:
Nehmen wir an, ich möchte auf meiner Seite die Zahl "52361249" anzeigen lassen. Da dies aber langweilig aussieht, würd ich das gern so aussehn lassen:

Meine Frage jetzt:
Wo soll ich anfangen... könnt ihr mir helfen? ^^

LG

Alex55 · 20 August 2015

CSS, HTML, PHP lernen.

InvisibleQuantum · 20 August 2015

Ich versuchs ja zu lernen, indem ich genau sowas versuche ^^. Ich brauche nur einen Anfang

Caanyp · 20 August 2015

Hi,

Möchtest du nur die Zahl anzeigen lassen oder das es immer weiter zählt ?
Wenns nur die Zahl ist füg doch einfach die Grafik ein :)
Anosnsten würde ich es mal mit Javascript versuchen.

InvisibleQuantum · 20 August 2015

Die Zahl lass ich aus einer JSON anzeigen... also die ändert sich manchmal.

bdt600 · 20 August 2015

Ich würde die Zahlen 0 bis 9 als Grafik ablegen und dann per PHP die Images hintereinander ausgeben lassen. Ohne PHP-Kenntnisse wird das aber nix.

MrMurphy · 20 August 2015

Hallo,

Text und Zahlen als Bilder darzustellen ist schlechter Stil und gilt als unhöflich (Übrigens genau wie dein fettes Logo unter jedem deiner Beiträge, welches das Lesen erschwert).

Entsprechend gibt es dafür auch keine HTML / CSS Lösung.

Am sinnvollsten erscheint mir eine Schriftart zu suchen, die die Zahlen ähnlich darstellt, wie zum Beispiel

http://www.myfonts.com/fonts/jnlevine/flipboard/

Du müsstest natürlich eine Schriftart finden, die du allen Besuchern zur Verfügung stellen kannst.

Ansonsten könntest du eine Monospace-Schriftart entsprechend mit CSS gestalten. Bei Monospace-Schriftarten haben alle Buchstaben / Zahlen die gleiche Breite. Viel Aufwändiger als Zahlen automatisiert in Grafiken umzuwandeln sollte das nicht sein.

Gruss

MrMurphy

B3nnoX · 20 August 2015

Hab gerade keine Zeit dir etwas Code zu liefern.
Aber mal etwas Theorie, vielleicht schaffst du es damit ja auch.

Also erstmal musst du mit einer schleife jede Ziffer deiner Zahl ausgeben lassen. Dann müsstest du ein Array von 0 - 9 haben. Und in diesem Array hast du für jede Zahl diese Grafik. Du wirst ja für jede Zahl denke ich eine Grafik haben.

Dann musst du mit einer schleife deine Zahl durchgehen und dann jede Ziffer mit dem Eintrag aus dem Array ersetzen

Code:

var counter = channels.items[0].statistics.subscriberCount;
           Array(
             1 => Bild 1,
             2 => Bild 2,
             3 => Bild 3,
             ....
           );
           
           for(i=0; i < counter.length; i++) {
             bilder = array[counter[i]];   
           }

Nicht kopieren, es ist nur pseudocode. Also es wäre eine Möglichkeit. Vielleicht bringt dich das ja schon weiter. Ansonsten musst du bis heute Abend warten, da kann ich dir es etwas genauer erklären

InvisibleQuantum · 20 August 2015

@MrMurphy Dein Tipp ist super. Ich wusste gar nicht, dass es solche Schriftarten gibt ^^. Danke.

Ich dachte bisher immer, dass das Logo niemanden stört aber danke für den Hinweis..

Die Zahlen möglichte ich nur als Grafiken darstellen, da es auf dieser einen Seite NUR um die Zahlen geht ;)

@B3nnoX Ich werds nachher mal testen. Danke:)

scbawik · 20 August 2015

InvisibleQuantum schrieb:
Die Zahl lass ich aus einer JSON anzeigen... also die ändert sich manchmal.

Mir war gerade langweilig…
http://jsfiddle.net/c1smabvp/

bdt600 · 20 August 2015

Eine Möglichkeit:

PHP:

<?php

   $number = 52361249;
 
   $number = number_format($number, 0, '', ',');
 
   for ($i = 0; $i < strlen($number); $i++)
   {
       if ($number[$i] == ",")
         echo "<img src='images/komma.jpg' alt=''>";
       else
         echo "<img src='images/$number[$i].jpg' alt=''>";
   }
?>

<edit>
Die Lösung scbawik ist natürlich eleganter

</edit>

MrMurphy · 20 August 2015

Hallo,

ich habe mal eine schlichtere Lösung als scbawik erstellt, die dadurch aber auch einfacher anzupassen ist, wenn zum Beispiel die Schriftgröße geändert werden soll. Zudem ist für jedes Zeichen nur ein span-Element erforderlich.

Um Buchstaben und Zahlen zu berücksichtigen habe ich einen Monospace-Font gewählt, da bei dem alle Zeichen die selbe Breite haben.

Außerdem werden alle Buchstaben in Großbuchstaben umgewandelt. Buchstaben wie f, g, j. u.s.w sehen auf den Tafeln nicht so schön aus und waren in der Praxis auch weniger gebräuchlich.

Ich habe es leider nicht hinbekommen den mittleren Querstrich aus einem border-Element zu erstellen. Die Lösung aus Unterstrichen gefällt mir nicht so gut. Vielleicht fällt dazu ja noch jemandem eine Lösung ein.

Code:

<!DOCTYPE html>
<html lang="de">
<head>
   <meta charset="utf-8"><!-- Schließende Slashes sind unter HTML5 nicht erforderlich, aber erlaubt -->
   <title>Zeichen als Klapptafel 01</title>
   <meta name="description" content="HTML5, CSS3">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <!-- Um alte IE HTML5-tauglich zu machen -->
   <!--[if lt IE 9]>
      <script src="http://html5shiv-printshiv.googlecode.com/svn/trunk/html5shiv-printshiv.js"></script>
   <![endif]-->
   <!-- Internes CSS ("type="text/css" ist unter HTML5 nicht erforderlich) -->
   <style>
   @import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
   @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;
      }
      section {
         line-height: 1;
         /*font-family: monospace;*/
         /*font-family: sans-serif;*/
         /*font-family: monospace sans-serif;*/
         font-size: 4rem; /*Größe von Punkt und Komma*/
         display: flex;
         flex-wrap: wrap;
         align-items: flex-end;
      }
      span {
         color: white;
         background-color: black;
         font-family: 'Droid Sans Mono';
         font-size: 5rem;
         font-weight: bold;
         text-transform: uppercase;
         line-height: 1;
         overflow: hidden;
         position: relative;
         padding: 0.2rem 0.8rem;
         border: 1px solid black;
         border-radius: 0.4rem;
         margin: 0.4rem;
      }
      span:before {
         font-size: 1rem;
         content: "___________________";
         color: red; /*kräftige Farbe zum Testen*/
         color: silver;
         position: absolute;
         top: 32%;
         left: -0.5rem;
      }
   }
   /* Vorlage zum Kopieren für Media-Query */
   @media only screen and (max-width: 0px) {
   }
   </style>
</head>
<body>
   <section>
      <span>0</span>
      <span>1</span>
      <span>2</span>
      <span>3</span>
      <span>4</span>
      <span>5</span>
      <span>6</span>
      <span>7</span>
      <span>8</span>
      <span>9</span>
   </section>
   <section>
      <span>a</span>
      <span>b</span>
      <span>c</span>
      <span>d</span>
      <span>e</span>
      <span>f</span>
      <span>g</span>
      <span>h</span>
      <span>i</span>
      <span>j</span>
      <span>k</span>
      <span>l</span>
      <span>m</span>
      <span>n</span>
      <span>o</span>
      <span>p</span>
      <span>q</span>
      <span>r</span>
      <span>s</span>
      <span>t</span>
      <span>u</span>
      <span>v</span>
      <span>w</span>
      <span>x</span>
      <span>y</span>
      <span>z</span>
      <span>ä</span>
      <span>ö</span>
      <span>ü</span>
      <span>ß</span>
   </section>
   <section>
      <span>0</span>.
      <span>1</span>
      <span>2</span>
      <span>3</span>.
      <span>4</span>
      <span>5</span>
      <span>6</span>,
      <span>7</span>
      <span>8</span>
      <span>9</span>
   </section>
   <section>
      <span>H</span>
      <span>a</span>
      <span>m</span>
      <span>b</span>
      <span>u</span>
      <span>r</span>
      <span>g</span>
   </section>
   <section>
      <span>A</span>
      <span>b</span>
      <span>f</span>
      <span>l</span>
      <span>u</span>
      <span>g</span>
      <span>:</span>
   </section>
   <section>
      <span>1</span>
      <span>0</span>
      <span>:</span>
      <span>0</span>
      <span>0</span>
      <span> </span><!-- geschütztes Leerzeichen-->
      <span>U</span>
      <span>h</span>
      <span>r</span>
   </section>
</body>
</html>

Gruss

MrMurphy

scbawik · 20 August 2015

MrMurphy schrieb:
Ich habe es leider nicht hinbekommen den mittleren Querstrich aus einem border-Element zu erstellen. Die Lösung aus Unterstrichen gefällt mir nicht so gut. Vielleicht fällt dazu ja noch jemandem eine Lösung ein.

Meinst du so?
http://jsfiddle.net/40cgd0cn/2/

Statt "rem" würde ich hier übrigens eher "em" nehmen. Dann lässt es sich als einzelne Komponente beliebig skalieren.

Achja, im Safari 6 (und wahrscheinlich andere ältere Modelle) funktioniert es noch nicht so gut, liegt aber wahrscheinlich an der Flexbox.
Mit den richtigen Fallbacks würde es sicher funktionieren.

EDIT: Okay, habe gerade geschockt festgestellt dass ich auf der Arbeit ein zwei Versionen altes OS verwende. Dachte es wäre nur eine Version älter...

MrMurphy · 20 August 2015

Hallo,

ja, danke.

Da ich zur Einfachheit und Übersichtlichkeit neige lasse ich noch ein paar mit deiner Lösung unnötige Angaben beim Pseudoelement :before weg:

Code:

      span:before {
         content: "";
         border-bottom: 0.2rem solid #AAA;
         position: absolute;
         top: 50%;
         left: 0;
         right:0;
      }

Das das geschützte Leerzeichen nicht als Klapptext angezeigt wird liegt wohl am JSFiddle.

Nachtrag:

Statt "rem" würde ich hier übrigens eher "em" nehmen. Dann lässt es sich als einzelne Komponente beliebig skalieren.

Ich nutze lieber die Vorteile vom rem anstatt mich durch die in Wirklichkeit nicht vorhandenen Nachteile abschrecken zu lassen.

Gruss

MrMurphy

scbawik · 20 August 2015

MrMurphy schrieb:
Ich nutze lieber die Vorteile vom rem anstatt mich durch die in Wirklichkeit nicht vorhandenen Nachteile abschrecken zu lassen.

Ähm, du kannst der Komponente (<section>) dann ja als Standard-Schriftgröße deine 4rem geben…
Mit em könntest du es auf beliebigen Websites verwenden, welche unterschiedliche Schriftgrößen haben und die Klapptext-Komponente unabhängig davon skalieren. Mit rem hat es immer Auswirkungen auf die ganze Seite.

Das ist ein absoluter Nachteil.
Ich habe kein Problem mit rem fürs Layouten, aber um etwas abzukapseln/weiterzuverwenden ist es nicht geeignet.

InvisibleQuantum · 20 August 2015

@MrMurphy Bisher ganz gut. Danke für die ganze Hilfe. Jetzt brauch nurnoch bei zwei Kleinigkeiten Hilfe:
Ich werd vorher erstmal erklären was ich überhaupt mach ;):

Ich habe eine Seite erstellt in dessen Mitte die Anzahl der Abonnenten eines YouTube Kanals angezeigt wird... Über die YouTube API. Ich hab mit GIMP ein Hintergrundbild erstellt in dessen Mitte ein Feld ist, in dem später die Abozahl drinne steh soll. Ich werd einfach hier mal alle Codes einbinden:

Hier einmal der Code der eigentlichen Seite:

Code:

<html>
<head>
    <META NAME="oben" CONTENT="no-cache">
    <meta http-equiv="refresh" content="15">

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
    <link href="style.css" type="text/css" rel="stylesheet">
    <script>

    $(function loadAPI() {
   
        function formatNumber (num) {
        return num.toString().replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1.")
    }
   
    var i = "";
    $.getJSON("https://www.googleapis.com/youtube/v3/channels", {
                        key: "AIzaSyBbRR6VW9mq1p8xnFkBHQpMio1hyvBXMBY",
                        forUsername: "SemperVideo",
                        part: "statistics",
                    }, function(data) {
                        if (data.items.length === 0) {
                            $("<p style='color: #F00; position: fixed; left: 44%; top: 49%;'>Kanal derzeit nicht ereichbar!</p>").appendTo("#kanal_");
                            return;
                        }
               
                    $abos = data.items[0].statistics.subscriberCount ;
               
                    $("<span style='position: fixed; left: 48%; top: 49%;'></span>").text(formatNumber($abos)).appendTo("#abos_" + i);
                    });
               
    });
    </script>

</head>
<body style="background-image: url('http://fs1.directupload.net/images/150820/lnadxx2o.jpg'); background-size: cover;">
    <div id="kanal_">
    </div>
    <div id="abos_">
    </div>
</body>
</html>

Da sich die Seite (frame.html) immer automatisch aktualisieren soll, ohne dass der ganze Tab sich neu lädt hab ich sie in die index.html eingbunden damit sich nur der Frame aktualisiert (nciht wundern: vorher war frame.html die index.html):

Code:

<html>
  <head>
    <title>InvisibleQuantum &#9654; Abonnenten</title>
    <link rel="shortcut icon" href="https://www.youtube.com/favicon.ico" type="image/x-icon">
  </head>
  <frameset rows="*">
    <frame frameborder=0 src="frame.html" name="frame" scrolling="auto" noresize>
  </frameset>
</html>

Und hier nochmal die CSS von MrMurphy:

Code:

@import url(http://fonts.googleapis.com/css?family=Droid+Sans+Mono);
@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;
  }
  section {
     line-height: 1;
     /*font-family: monospace;*/
     /*font-family: sans-serif;*/
     /*font-family: monospace sans-serif;*/
     font-size: 4rem; /*Größe von Punkt und Komma*/
     display: flex;
     flex-wrap: wrap;
     align-items: flex-end;
  }
  span {
     color: white;
     background-color: black;
     font-family: 'Droid Sans Mono';
     font-size: 5rem;
     font-weight: bold;
     text-transform: uppercase;
     line-height: 1;
     overflow: hidden;
     position: relative;
     padding: 0.2rem 0.8rem;
     border: 1px solid black;
     border-radius: 0.4rem;
     margin: 0.4rem;
  }
  span:before {
     font-size: 1rem;
     content: "___________________";
     color: red; /*kräftige Farbe zum Testen*/
     color: silver;
     position: absolute;
     top: 32%;
     left: -0.5rem;
  }
}
/* Vorlage zum Kopieren für Media-Query */
@media only screen and (max-width: 0px) {
}

So jetzt zum Problem:
Der Counter sollte eigentlich genau in der Mitte sein, also horizontal und vertikal... Ich hab mich schon fast todgegooglet, aber nichts gefunden, deshalb hab ich alternativ "fixed; left: 48%; top: 49%;" genommen.

Das zweite Problem ist, dass ich die JSON, die ich aufrufe direkt in der Code eingebunden wird, sodass die Schriftart die Zahlen in nur einem Kästchen anzeigt, anstatt in mehreren :(.
Ich hoffe das hier mir weiterhin so super helfen könnt :)

PS: Nicht wundern warum ich SemperVideo's Abozahl eingebunden hab. Das war gerade nur ein Kanal der mir so eingefallen ist, der genug Abos hat um eine Kommazahl hinzubekommen, die nicht zu groß ist

Danke für die Hilfe ;);

MrMurphy · 20 August 2015

Hallo,

damit kenne ich mich nicht aus. Vielleicht kann jemand anders dir helfen.

Gruss

MrMurphy

Tronjer · 20 August 2015

InvisibleQuantum schrieb:
Da sich die Seite (frame.html) immer automatisch aktualisieren soll, ohne dass der ganze Tab sich neu lädt hab ich sie in die index.html eingbunden damit sich nur der Frame aktualisiert (nciht wundern: vorher war frame.html die index.html):

Völlig unnötig. Du sendest einen AJAX Request und kannst dir das Result ohne Seitenreload wiedergeben lassen. Im Gegenteil birgt der Hinweis auf Framesets die Gefahr, dass Leute wie ich sich die Frage gar nicht erst anschauen.

Der Counter sollte eigentlich genau in der Mitte sein, also horizontal und vertikal... Ich hab mich schon fast todgegooglet, aber nichts gefunden, deshalb hab ich alternativ "fixed; left: 48%; top: 49%;" genommen.

Ohne die Seite gesehen zu haben, kann ich dir mit an Sicherheit grenzender Wahrscheinlichkeit sagen, dass sich das ohne position:abolute/fixed, top oder left lösen lässt.

Das zweite Problem ist, dass ich die JSON, die ich aufrufe direkt in der Code eingebunden wird.

Wird er nicht. Du erhältst ein JSON mit keys(s) und value(s) zurück. Beim value wird es sich wahrscheinlich um einen String handeln, den du im success Handler deines AJAX Calls beliebig bearbeiten kannst.

/Hint 1: Vereinfache den Code. Lösche den Frame und rufe den AJAX Call direkt aus der index.html auf. Schmeiss das HTML aus der Response und lasse dir das Ergebnis mit einem console.debug(data) wiedergeben. Dann siehst du direkt, was ankommt.

/Hint 2: MrMurphy schreibt gerne Code Snippets, welche die Leute copy&pasten können. Die Zeit und Lust hat dazu aber nicht jeder. Der normale Weg ist, dass der Fragesteller einen eigenen Ansatz postet, aus dem hervorgeht, dass er sich mit der Materie bereits eingehend beschäftigt hat.

InvisibleQuantum · 20 August 2015

@Tronjer Du hast hier jetzt einfach nur die Fehler eines Anfängers (mir) aufgezählt. Ich habe ja diese Frage gestellt um Hilfe zu bekommen.

zu /Hint 1: Kannst du mir das bitte für Anfänger erklären?

Tronjer · 20 August 2015

Was steht in data und in $abos?

Text als Grafiken darstellen

Neues Mitglied

Mitglied

Neues Mitglied

Neues Mitglied

Neues Mitglied

bdt600

Guest

Senior HTML'ler

Aktives Mitglied

Neues Mitglied

Senior HTML'ler

bdt600

Guest

Senior HTML'ler

Senior HTML'ler

Senior HTML'ler

Senior HTML'ler

Neues Mitglied

Senior HTML'ler

Senior HTML'ler

Neues Mitglied

Senior HTML'ler