Fontswitcher - Website X5 Helpsite

Logo Schriftzug
Logo WSX5
Scan QR or Download Android App
Direkt zum Seiteninhalt

Fontswitcher

Scripte > Text- & Tabellenobjekte
Schriftgröße individuell einstellbar

Die Schriftgröße ist ein wichtiges Kriterium, um Besuchern den Aufenthalt auf der Webseite möglichst angenehm zu gestalten und die Besucher auf der Seite zu halten.

Habe ich die „richtige“ Schriftgröße gewählt? Es gibt zwar dafür allgemeine Regeln und Grundsätze, aber das Sehvermögen unserer Besucher der Webseite können wir nicht einschätzen. Es gab vor Jahren auf jeder Website die Möglichkeit, die Schriftgröße individuell einzustellen. Seit moderne Browser eine praxistaugliche Zoom-Funktionalität eingebaut haben (Strg & Plus- oder Minustaste), sind die Schriftgrößen-Button nirgends mehr zu sehen. Technisch weniger versierte Benutzer kennen häufig diese Möglichkeit gar nicht.

Es ist eigentlich empfehlenswert auf allen Websites (wieder) diese Funktionalität einzubauen.

ZIP-Datei in ein beliebiges Verzeichnis auf dem PC entpacken und das Verzeichnis "wsX5Obj" auf den Webserver in das Root-Verzeichnis kopieren. HEAD-Code in den HEAD-Bereich <head>...</head> und HTML-Code in den BODY-Bereich <body>...</body> der aufrufenden Datei einfügen. Die -/+ Button TEXT − TEXT + nach Bedarf und/oder Notwendigkeit platzieren.

Eine demo.php ist beigefügt, die zum Test in das Root-Verzeichnis des Webservers kopiert werden kann.

Aufruf: "http://www.domain.tld/demo.php". Die ausführende Datei muss die Dateiendung .php aufweisen.


Hinweis:

In Website X5 können nur HTML Code Objekte verwendet werden oder der Style-Bereich im HEAD-Code muss angepasst werden.

Die eingestellte Schriftgröße bleibt (nur) für diese Demo-Seite gespeichert, bis der Browser geschlossen wird (Session-Cookie).

Download Button
x runter geladen

--- Demo Begin ---


Wasser Demo 1

Willkommen auf der Helpsite für Incomedia's Website X5.

Diese Webseite dient der Hilfe für die Gestaltung eigener Webseiten.
Unter Scripte findet Ihr zahlreiche Ergänzungen, die ständig erweitert werden.
Der Bereich Tutorials soll bebildert helfen, WebsiteX5 zu bedienen sowie eigene Code und auch Fremdcode zu integrieren.
In den Übersichten befinden sich zahlreiche Informationen die das Arbeiten mit dem PC und der Websitegestaltung erleichtern.
Im Bereich Online-Tools können Code für verschiedene Anwendungen generiert werden und der Bereich Imagehost bietet Euch einen kostenlosen leicht zu handhabbaren Bilder- und ZIP-Hoster.

Wasser Demo 2 Wasser Demo 3

Links dienen der Information zu anderen hilfreichen Webseiten, in der Testebene befinden sich ein paar Übungscodes.
Auch über einen Eintrag im Gästebuch freue ich mich, nehme gern Meinungen und Kritiken entgegennehmen die ehrlich und fair bleiben sollten.
Da die Arbeit an diese Webseite sehr zeitaufwendig ist, würde ich mich über eine kleine Anerkennung in Form einer Spende auch sehr freuen.


--- Demo End ---

Code vor dem <HTML> Tag
<?php
session_start();
if (isset($_SESSION['textsize'])) {
$size = $_SESSION['textsize'];
} else {
$size = 1; // Standard-Schriftgröße, falls noch kein Session-Cookie gesetzt
}
?>
Code für den <HEAD> Bereich
<style>
body { font-size: <?php echo $size; ?>em !important; }               /* für allgemeine Webseiten */
#imContent { font-size: <?php echo $size; ?>em !important; }         /* nur Content für Website X5 */
/* #imPage { font-size: <?php echo $size; ?>em !important; } */      /* Alternativ für Website X5 */
#fontswitcher { position: -webkit-sticky; position: sticky; top: 0; text-align: right; z-index: 5; }
#fontswitcher a {
text-decoration: none;
color: #000;
background: #ddd;
display: inline-block;
padding: 3px 5px;
font-family: sans-serif;
font-weight: bold;
border: 2px solid;
}
#fontswitcher a:focus,
#fontswitcher a:hover { text-decoration: underline; filter: invert(1); }
</style>
<?php
   if($size > 2.4) {echo '<style>#bigger { display: none !important;}</style>'; }
   if($size < .9) {echo '<style>#smaller { display: none !important;}</style>'; }
?>
Code für den <BODY> Bereich
<div id="fontswitcher">
  <a id="smaller" href="wsX5Obj/Obj199_0/switch.php?size=0.8">TEXT&nbsp;&minus;</a>
   <a id="bigger" href=wsX5Obj/Obj199_0/switch.php?size=1.25">TEXT&nbsp;&plus;</a>
</div>
Code Datei "switch.php"
<?php
session_start();
if (isset($_GET['size'])) {
if (isset($_SESSION['textsize'])) {
$basesize = $_SESSION['textsize'];
} else {
$basesize = 1;
}
$factor = $_GET['size'];
$textsize = $basesize * $factor;
if ($textsize > 2.5) {$textsize = 2.5;}
if ($textsize < .8) {$textsize = .8;}
$_SESSION['textsize'] = $textsize;
}
header('Location: ' . $_SERVER['HTTP_REFERER']);
?>

» nach oben «
Logo Host Europe
Button Spenden
🏠 © 2009 - 2024
Hosting by
Zurück zum Seiteninhalt