HTML Box - Schrift zu klein!

cbeham · 11. Dezember 2024 um 09:01

Liebes IPS-Team. Es wäre an er Zeit endlich eine Einstellmöglichkeit für die Kacheln zu schaffen.
Überschrift und Inhalt.

Hat Jemand eine Idee wie ich das (HTML Box) größer machen könnte?

lg

hfichtinger · 11. Dezember 2024 um 09:03

Ich mache das teilweise mit eigenen Styles. Einfärben, Fett… Ganz normal über HTML. Geht natürlich nur, wenn du die Kontrolle über den Inhalt hast.

cbeham · 11. Dezember 2024 um 09:05

Wie macht man das korrekt bei HTML mit der Schriftgröße?

hfichtinger · 11. Dezember 2024 um 09:06

Ich such mir das auch immer raus.
Zweiter Eintrag

Wechsle bei der Seite auf „Originalsprache“ Sonst wird, zumindest bei mir, auf Deutsch übersetzt.

Oder auch hier: HTML Styles

pitti · 11. Dezember 2024 um 09:29

Schätze mal das ist ein Browserfenster auf einem Windows Rechner?!

Zeig doch mal das HTML dazu, dann kann man Tipps geben!

Durch die Einführung des Meta-Tags ist eigentlich vieles besser geworden, speziell im iOS Bereich!

Mit den Schriften gibt es einiges - meiner Meinung nach - zu beachten, z.B.

Tabellen übernehmen nicht die Schriftgrößen vom übergeordneten Element
Anhgaben von Einheiten wie „em“ machen immer noch Probleme - mMn besser „px“ verwenden

Ich Style alles selber und fahre damit bis jetzt sehr gut!

Gruß HEiko

cbeham · 11. Dezember 2024 um 09:55

Das ist viel Code. Es geht um das Kalenderauslesen vom GoogleCalendar.
Ich bin gerade dran da etwas mit HTML zu basteln

Gefallen tut mir das ganze schon besser, aber ich hätte noch gerne einen „Tabulator“ nach der Uhrzeit, damit das schön untereinander ist (z.B. bei Übermorgen)

Hier der ganze Code:

<?php

//***********************************************************************************************************************
// Einstellungen

$KalenderId = 26174;
$UrlaubId = 41798;

// für Webfront
$TerminId_Heute = 49468;
$TerminId_Morgen = 48381;
$TerminId_Uebermorgen = 27701;

//für Alexa
$TerminId_HeuteA = 51696;
$TerminId_MorgenA = 16021;
$TerminId_UebermorgenA = 35400;


// ***********************************************************************************************************************
// Hilfsvariablen

// für Webfront
$text1 = "";
$text2 = "";
$text3 = "";

// für Alexa ohne HTML Code
$text1a = "";
$text2a = "";
$text3a = "";

//************************************************************************************************************************
// Code

ICCR_UpdateCalendar($KalenderId); 
$calendar = ICCR_GetCachedCalendar($KalenderId);
$calendar_array = json_decode($calendar, true);

/* 
// test
        
$anzahl = count($calendar_array);

array_walk_recursive($calendar_array, function($val, $key) use (&$keys) 
{
    $keys[] = $key;
});

print_r($keys);
exit();

*/

// testen
//  var_dump($calendar_array).PHP_EOL.PHP_EOL;

$heute = mktime(0, 0, 0, date("m")  , date("d") + 0, date("Y"));
$heute_flag = true;

$morgen = mktime(0, 0, 0, date("m")  , date("d") + 1, date("Y"));
$morgen_flag = true;

$uebermorgen = mktime(0, 0, 0, date("m")  , date("d") + 2, date("Y"));
$uebermorgen_flag = true;

$ende = $uebermorgen + 86400; // 24h


// **************************************************************************************************************************

foreach ($calendar_array as $entry) 
{
    if ($entry["Status"] == 'CANCELLED') continue;

    if ($entry["allDay"] == false)
    {
        $stunde = date('H', $entry["From"]);
        $minute = date('i', $entry["From"]);
        $zeit = $stunde.":".$minute." Uhr ";        
    }
    else
    {
        $entry["From"] = mktime(0, 0, 0, date("m", $entry["From"])  , date("d", $entry["From"]), date("Y", $entry["From"]));
        $entry["To"] = mktime(0, 0, 0, date("m", $entry["To"])  , date("d", $entry["To"]), date("Y", $entry["To"]));
    }

// **************************************************************************************************************************
// **************************************************************************************************************************
// Heute
// **************************************************************************************************************************

    if (($entry["From"] >= $heute) && ($entry["To"] <= $morgen))
    {   
        // **************************************************************************************************************************
        // mit Endtermin

        // echo "1";

        if (($entry["allDay"]) && (date('H', time()) < 1800))
        {   
            // GANZTAGESTERMINE

            if ($heute_flag)
            {   
                // wenn erster eintrag

                // Alexa
                $text1a .= "Heute: ";  
                $text1a .= $entry["Name"]." ".PHP_EOL;        
                
                $text1 .= "<font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;  
                
                //   $heute_flag = false; 
                
            }
                
                // **************************************************************************************************************************
                // Geburtstag?

                if (str_contains($entry["Name"], "Geburtstag"))
                {
                    $text1 .= "<b><font color=orange>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
                }
                else
                {
                    $text1 .= "<font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
                } 

        }        
        elseif ($entry["allDay"] == false) // GANZEN TAG ANZEIGEN oder else if (($entry["allDay"] == false) && (time() < $entry["From"] + 36000)) für TERMINE - 10 STUNDEN ab AKTUELLER UHRZEIT
        {
            if ($heute_flag)
            {  // wenn erster Eintrag

                // Alexa
                $text1a .= "Heute: ";
                $text1a .= $entry["Name"]." ".PHP_EOL;      

                $text1a .= "um ".$zeit;
         
                $text1a .= $entry["Name"]." ".PHP_EOL;

                // $heute_flag = false  
            }

                // Meldung
                $text1 .= "<font color=gray><b>".$zeit." </b></font><b><font color=orange>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;

        }

        // ********************************************************************************************************************
        // Heute auf den Eintrag "Frei" überprüfen
        /*
        if (str_contains($entry["Name"], 'Frei'))
        {
            SetValue($UrlaubId, true);
            echo "Frei!".$entry["Name"];
        }
        */
        // ********************************************************************************************************************
        
    }
    elseif (($entry["From"] <= $heute) && ($entry["To"] >= $morgen))
    {
        // echo "2";
        // länger dauernde Einträge

        if ($heute_flag)
        {   // wenn erster eintrag

            $text1a .= "Heute: "; 

            $text1a .= $entry["Name"]." ".PHP_EOL;

           
            $heute_flag = false;
        }

            $text1 .= "<font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;  
            
    }
    elseif ($entry["From"] > $ende)
    {   
        // GANZTAG?
        // echo "3";

        // $text1 .= "<font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;  
        break;
    }
}

// **************************************************************************************************************************
// *************************************************************************************************************************
// Morgen
// *************************************************************************************************************************

foreach ($calendar_array as $entry) 
{

    if ($entry["Status"] == 'CANCELLED') continue;

    if ($entry["allDay"] == false)
    {
        $stunde = date('H', $entry["From"]);
        $minute = date('i', $entry["From"]);
        $zeit = $stunde.":".$minute." Uhr ";     
    }
    else
    {
        $entry["From"] = mktime(0, 0, 0, date("m", $entry["From"])  , date("d", $entry["From"]), date("Y", $entry["From"]));
        $entry["To"] = mktime(0, 0, 0, date("m", $entry["To"])  , date("d", $entry["To"]), date("Y", $entry["To"]));
    }



    if (($entry["From"] >= $morgen) && ($entry["To"] <= $uebermorgen))
       { 
           // test
           // print_r($entry);

            if ($entry["allDay"])
            {
                    if ($morgen_flag)
                    {
                        $text2a .= "Morgen ".PHP_EOL;

                        $morgen_flag = false;
                    }   
                        $text2a .= $entry["Name"]." ".PHP_EOL;
                        

                // *******************************************
                // Geburtstag?

                if (str_contains($entry["Name"], "Geburtstag"))
                {
                    $text2 .= "<font color=gray><b>00:00 Uhr </b></font><b><b><font color=orange>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
                }
                else
                {
                    $text2 .= "<font color=gray><b>00:00 Uhr </b></font><b><font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL; 
                }
                
            }

        
            elseif (($entry["allDay"] == false) && (time() < $entry["To"]))
            {
                if ($morgen_flag)
                {
                    $text2a .= "Morgen ".PHP_EOL;

                    $morgen_flag = false;
                }   

                    $text2a .= "um ".$zeit;
                    $text2a .= $entry["Name"]." ".PHP_EOL;
                                      
                    $text2 .= "<b><font color=gray><b>".$zeit." </b></font><font color=orange>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
                    
            }
    }
    // länger dauernde einträge - GANZTAG?

    elseif (($entry["From"] <= $morgen) && ($entry["To"] >= $uebermorgen))
        {
            if ($morgen_flag)
            {
                $text2a .= "Morgen ".PHP_EOL;
                $text2a .= $entry["Name"]." ".PHP_EOL;               

                $morgen_flag = false;
            }

            $text2 .= "<font color=gray><b>00:00 Uhr </b></font><b><font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
        }
    

    if ($entry["From"] > $ende)
    {
        break;
    }
  
}

// **************************************************************************************************************************
// ********************************************************************************************************************************
// Übermorgen
// ********************************************************************************************************************************

foreach ($calendar_array as $entry) 
{
    if ($entry["Status"] == 'CANCELLED') continue;
    if ($entry["allDay"] == false)
    {
        $stunde = date('H', $entry["From"]);
        $minute = date('i', $entry["From"]);
        $zeit = $stunde.":".$minute." Uhr ";      
    }
    else
    {
        $entry["From"] = mktime(0, 0, 0, date("m", $entry["From"])  , date("d", $entry["From"]), date("Y", $entry["From"]));
        $entry["To"] = mktime(0, 0, 0, date("m", $entry["To"])  , date("d", $entry["To"]), date("Y", $entry["To"]));
    }

    if (($entry["From"] >= $uebermorgen) && ($entry["To"] <= $ende))
    {   
        // test
        // print_r($entry);

        if ($entry["allDay"])
        {
            if ($uebermorgen_flag)
            {
                $text3a .= "Übermorgen".PHP_EOL;
                $uebermorgen_flag = false;
            }

                $text3a .= $entry["Name"]." ".PHP_EOL;

                // *******************************************
                // Geburtstag?

                if (str_contains($entry["Name"], "Geburtstag"))
                {
                    $text3 .= "<font color=gray><b>Ohne Uhrzeit  </b><b></font><b><font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
                }
                else
                {
                    $text3 .= "<font color=gray><b>Ohne Uhrzeit  </b><b></font><font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
                }
                

        }
        elseif (($entry["allDay"] == false) && (time() < $entry["To"]))
        {   
            /*
            if ($uebermorgen_flag)
            {                            
                $text3a .= "Übermorgen".PHP_EOL;
                $uebermorgen_flag = false;

                $text3a .= "um ".$zeit;
                $text3a .= $entry["Name"]." ".PHP_EOL;

                $text3 .= "<b>".$zeit." </b><font color=orange>".$entry["Name"]."</b></font> ".$entry["Location"];
                $text3 .= "<br>";
            }
            */

        // letzte Änderung vorher oben

            if ($uebermorgen_flag)
            {                            
                $text3a .= "Übermorgen".PHP_EOL;
                $uebermorgen_flag = false;
            }
                $text3a .= "um ".$zeit;
                $text3a .= $entry["Name"]." ".PHP_EOL;

                $text3 .= "<b><font color=gray><b>".$zeit." </b></font><font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;
    
        }
    }
    elseif (($entry["From"] <= $uebermorgen) && ($entry["To"] >= $ende))
    {
        if ($uebermorgen_flag)
        {
            $text3a .= "Übermorgen".PHP_EOL;
                

            $uebermorgen_flag = false;
        }
            $text3a .= $entry["Name"]." ".PHP_EOL;            
            $text3 .= "<font color=gray><b>Ohne Uhrzeit </b></font><b><font color=orange><b>".$entry["Name"]."</b></font> ".$entry["Location"]."<br>".PHP_EOL;             

    }
    if ($entry["From"] > $ende)
    {
        break;
    }
}


// **************************************************************************************************************************
// ***************************************************************************************************************************************************
// Wenn String leer > keine wichtigen Termine
// ***************************************************************************************************************************************************

if (strlen($text1) < 2) 
{
    $text1 = "<b>00:00 Uhr Keine wichtigen Termine</b><br>";
    $text1a = "Heute gibt es zum Glück keine wichtigen Termine";
}
if (strlen($text2) < 2) 
{
    $text2 = "<b>00:00 Uhr Keine wichtigen Termine</b><br>";
    $text2a = "Morgen gibt es zum Glück keine wichtigen Termine";
}
if (strlen($text3) < 2) 
{
    $text3 = "<b>00:00 Uhr Keine wichtigen Termine</b>";
    $text3a = "Übermorgen gibt es zum Glück keine wichtigen Termine";
}

// **************************************************************************************************************************
// ******************************************************************************************************************************************************
// Konkatination für Übersichtsseite Kachel
// ******************************************************************************************************************************************************

$text_all = "<font size='2'><font color=gray><b>H E U T E</b><br>".$text1."<br><font color=gray><b>M O R G E N</b><br>".$text2."<br><font color=gray><b>Ü B E R M O R G E N</b><br>".$text3;

// Tile Visu
SetValue(10810, $text_all); 

// ******************************************************************************************************************************************************
// Kontrolle der Ausgaben
SetValue($TerminId_Heute, $text1); /* 27911 Instanz einer Stringvariablen die den Text für alle Termine der nächsten 3 Tage enthält z.B. für Alexa */
SetValue($TerminId_Morgen, $text2); /* 27911 Instanz einer Stringvariablen die den Text für alle Termine der nächsten 3 Tage enthält z.B. für Alexa */
SetValue($TerminId_Uebermorgen, $text3); /* 27911 Instanz einer Stringvariablen die den Text für alle Termine der nächsten 3 Tage enthält z.B. für Alexa */

// für Alexa
SetValue($TerminId_HeuteA, $text1a); /* 27911 Instanz einer Stringvariablen die den Text für alle Termine der nächsten 3 Tage enthält z.B. für Alexa */
SetValue($TerminId_MorgenA, $text2a); /* 27911 Instanz einer Stringvariablen die den Text für alle Termine der nächsten 3 Tage enthält z.B. für Alexa */
SetValue($TerminId_UebermorgenA, $text3a); /* 27911 Instanz einer Stringvariablen die den Text für alle Termine der nächsten 3 Tage enthält z.B. für Alexa */


//print PHP_EOL.PHP_EOL.PHP_EOL.$text;
//echo $text1;

hfichtinger · 11. Dezember 2024 um 09:57

Tabulator
https://www.lima-city.de/thread/html-text-mit-tabulator-abstand
Oder du baust dir eine Tabelle mit mit-sichtbarem Rand und fixen (in der Breite) Zellen.

pitti · 11. Dezember 2024 um 10:04

Du kannst doch einfach mal mit den DevTools das generierte HTML rauskopieren!!

cbeham · 11. Dezember 2024 um 10:07

Mit <pre> </span> kommt das raus:

cbeham · 11. Dezember 2024 um 10:07

Mhh. ich probiers mal…

Meinst du das?

pitti · 11. Dezember 2024 um 10:15

Genau, aber bitte mit dem Auswähler direkt auf den Text gehen und dann den Ihalt des iFrames rauskopieren!

cbeham · 11. Dezember 2024 um 10:17

man lernt nie aus

pitti · 11. Dezember 2024 um 10:18

Genau, und dann auf html rechte Maustaste …

Dann hat man das generierte HTML

pitti · 11. Dezember 2024 um 10:33

Lösch das mal lieber - biste nicht im lokalen Netzwerk!!!

Da hast Du nicht den Inhalt des Kalender-iFrames erwischt!