1. Herzlich willkommen bei WPDE.org, dem grössten und ältesten deutschsprachigen Community-Forum rund um das Thema WordPress. Du musst angemeldet oder registriert sein, um Beiträge verfassen zu können.
    Information ausblenden

Schriftgröße auto. anpassen, ohne line break

Dieses Thema im Forum "Design" wurde erstellt von bikalexander, 19. Juli 2016.

  1. bikalexander

    bikalexander Member

    Registriert seit:
    24. Juni 2014
    Beiträge:
    11
    Zustimmungen:
    0
    Hallo zusammen,

    wie kann ich so einen Effekt unter Wordpress erreichen?

    http://nicolasjaar.net

    So das die Schriftgröße immer an Fenstergröße auto. angepasst wird.

    Vielen Dank im Voraus!
     
  2. Putzlowitsch

    Putzlowitsch Well-Known Member

    Registriert seit:
    21. Oktober 2006
    Beiträge:
    5.955
    Zustimmungen:
    47
    Das ist mir Flash gemacht.
    Webseiten die nur mit Flash funktionieren, kann man heutzutage vergessen. Diese Flash-Seiten waren vor 10 Jahren mal angesagt, heute sollte man aber darauf verzichten.

    Ob man das mit HTML/CSS/Javascript hinbekommt, kann ich nicht sagen. Ich konnte ja nich mal sehen, wie es aussehen soll. :)

    Gruß
    Ingo
     
  3. bikalexander

    bikalexander Member

    Registriert seit:
    24. Juni 2014
    Beiträge:
    11
    Zustimmungen:
    0
    Einfach die Breite des Fensters verändern, dann sieht mann es.

    Vielen Dank im Voraus!
     
  4. Monika

    Monika Well-Known Member
    Ehrenmitglied

    Registriert seit:
    4. Juni 2005
    Beiträge:
    14.126
    Zustimmungen:
    2
    du hast das "ich kann das nicht mal sehen" falsch verstanden ;)

    denn auch ich "Kann es nicht sehen"; weil ich kein Flash Plugin mehr auf meinem PC habe ;)
    und bei mobilen Geräten kann man das sowieso nicht sehen, weil die alle Flash nicht anzeigen
     
  5. bikalexander

    bikalexander Member

    Registriert seit:
    24. Juni 2014
    Beiträge:
    11
    Zustimmungen:
    0
    aaaa, sorry :)))

    ok, die Zeilen bleiben immer fix, nur die Schriftgröße wird auto. verkleinert oder vergrößert.

    Danke.
     
  6. helix

    helix Well-Known Member

    Registriert seit:
    28. Juli 2011
    Beiträge:
    1.808
    Zustimmungen:
    27
    Ist eigentlich keine WordPress-Frage.
    Es könnte über CSS gehen. Mit einer relativen Schriftgröße, bezogen auf die Breite des Viewports.

    Oder mit JavaScript.

    Oder – duck und weg – binde doch eine Grafik ein, die sich responsive skaliert. Schlechter als Flash ist das auch nicht …

    Gruß
    helix
     
  7. Putzlowitsch

    Putzlowitsch Well-Known Member

    Registriert seit:
    21. Oktober 2006
    Beiträge:
    5.955
    Zustimmungen:
    47
    Die Idee ist gar nicht mal schlecht.
    Den Text z.B. als PNG-Bild einbinden und dann mit CSS width=100% und maxwidth=[Breite des Bildes in Pixel] skalieren.

    Eine stufenlos Anpassung der Font-Size dürfte mit CSS und auch mit Javascript kaum möglich sein.
    Bestenfalls könnte man noch mit einem Canvas arbeiten und dann wie oben das Bild per CSS skalieren. Aber dann kann man auch gleich ein Bild nehmen.

    Gruß
    Ingo
     
  8. SirEctor

    SirEctor Well-Known Member
    Ehrenmitglied

    Registriert seit:
    28. Oktober 2008
    Beiträge:
    12.361
    Zustimmungen:
    427
    Ich würde den Text dann lieber noch als svg einbinden. Hat den Vorteil, dass er durch Suchmaschinen gefunden wird.
    Teste mal das in einem neuen Dokument, nicht in Wordpress:
    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
    Jetzt brauchst du nur noch ein Plugin für Wordpress, welches SVG unterstützt, oder du bastelst dir ein Plugin oder Shortcode.
     
  9. janamaria

    janamaria Well-Known Member

    Registriert seit:
    17. April 2015
    Beiträge:
    49
    Zustimmungen:
    0
    Oder, falls du doch ne reine css lösung willst, dann arbeite mit vw Angaben.

    Kurz getestet, tut genau das was du suchst.

    HTML:
    Entschuldige, aber du musst dich registrieren oder anmelden um den Inhalt sehen zu können!
     
  10. Tubedesigner

    Tubedesigner Well-Known Member

    Registriert seit:
    24. April 2015
    Beiträge:
    2.048
    Zustimmungen:
    2
    Ja, das tut es als einfache HTML-Seite, aber nicht innerhalb von WP (ja, auch nicht entsprechend angepasst).

    Das hier (einfach genau so in einen Beitrag oder eine Seite einfügen, es widersteht auch dem visuellen Editor)

    <div style="text-align: right;"><span style="white-space: nowrap; line-height: 1.5; font-size: calc(2px + 2vw);">
    Wort Wort Wort Wort Wort
    Wort Wort Wort Wort Wort Wort Wort
    Wort Wort Wort Wort WortWort Wort Wort Wort Wort
    Wort Wort Wort Wort Wort Wort Wort Wort Wort Wort Wort
    Wort Wort Wort Wort Wort Wort Wort Wort Wort
    Wort Wort Wort Wort Wort Wort Wort
    Wort Wort Wort Wort Wort
    </span></div>


    funktioniert auch innerhalb von WP, allerdings nur bis zu einer Devicebreite von etwas über FHD, dann wuchert der Text über die Ränder des Contentbereiches überlicher Themes...
     
  11. janamaria

    janamaria Well-Known Member

    Registriert seit:
    17. April 2015
    Beiträge:
    49
    Zustimmungen:
    0
    Warum sollte das entsprechend angepasst nicht gehen?

    Eigenes Seitentemplate, im css das entsprechend ausgezeichnete, umschließende Element und p anpassen und gut ist?
    Sonst auch mit ACF, noch schneller.
    Ich sehe hier nicht den Unterschied zwischen WP und ner HTML Seite.

    Auch halte inline-html nicht für geschickter.
    Aber wie es immer ist – es gibt viele Wege sowas zu lösen.

    Grüße
     
  12. bikalexander

    bikalexander Member

    Registriert seit:
    24. Juni 2014
    Beiträge:
    11
    Zustimmungen:
    0
    Gelöst

    Vielen Dank an alle Beteiligten, ob mit css oder svg, beide Varianten funkt.

    Danke!
     
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden
  1. Diese Seite verwendet Cookies, um Inhalte zu personalisieren, diese deiner Erfahrung anzupassen und dich nach der Registrierung angemeldet zu halten.
    Wenn du dich weiterhin auf dieser Seite aufhältst, akzeptierst du unseren Einsatz von Cookies.
    Information ausblenden