dewomser/spiegelschrift.html

## spiegelschrift.html
<!DOCTYPE html>
<html lang="de">
<head>
    <meta charset="UTF-8">
    <link href="https://fonts.googleapis.com" rel="stylesheet">
    <style>
        #myTextarea {
            font-family: 'Dancing Script', cursive;
            font-size: 24px;
            width: 100%;
            height: 200px;

            /* Spiegelt die Textarea an der vertikalen Achse */
            transform: scaleX(-1);

            /* Behält die Schreibrichtung von links nach rechts bei */
            /* Da das Feld gespiegelt ist, erscheint 'left' visuell rechts. */
            /* Wir nutzen 'right', damit es visuell links startet. */
            text-align: right;
            direction: ltr;
        }
    </style>
</head>
<body>

    <textarea id="myTextarea" placeholder="Tippe hier..."></textarea>
    <br>
    <button onclick="downloadText()">Text herunterladen</button>

    <script>


    function downloadText() {
    const textarea = document.getElementById("myTextarea");
    const originalText = textarea.value;

    // Dreht den Text um: "Hallo" wird zu "ollaH"
    // So bleibt die Spiegelschrift in der .txt Datei erhalten
    const mirroredText = originalText.split("").reverse().join("");

    const blob = new Blob([mirroredText], { type: "text/plain;charset=utf-8" });
    const link = document.createElement("a");

    link.href = URL.createObjectURL(blob);
    link.download = "spiegelschrift.txt";
    link.click();

    URL.revokeObjectURL(link.href);
}


    </script>

</body>
</html>


## vorschlag_funktioniert nicht,txt


<style>
    /* Schriftart registrieren */
    @font-face {
        font-family: 'Dabbington';
        src: url('Dabbington.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    #capture-area {
        padding: 20px;
        background: white;
        display: inline-block;
    }

    #myTextarea {
        font-family: 'Dabbington', cursive;
        font-size: 28px;
        width: 600px;
        height: 300px;
        border: 1px solid #ccc;

        /* Spiegelung an der vertikalen Achse */
        transform: scaleX(-1);

        /* Damit der Cursor beim Tippen am "richtigen" Rand startet */
        text-align: right;
        direction: ltr;

        /* Styling für sauberen Export */
        line-height: 1.4;
        overflow: hidden;
    }
</style>


async function downloadPDF() {
    const { jsPDF } = window.jspdf;
    const element = document.getElementById('capture-area');

    // Warten bis alle Schriften (Dabbington) geladen sind
    await document.fonts.ready;

    try {
        const canvas = await html2canvas(element, {
            scale: 2, // Sorgt für scharfen Text im PDF
            useCORS: true, // Wichtig für externe Ressourcen
            logging: false
        });

        const imgData = canvas.toDataURL('image/png');
        const pdf = new jsPDF('p', 'mm', 'a4');

        const imgProps = pdf.getImageProperties(imgData);
        const pdfWidth = pdf.internal.pageSize.getWidth();
        const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

        pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
        pdf.save("spiegelschrift_final.pdf");
    } catch (error) {
        console.error("PDF Export fehlgeschlagen:", error);
        alert("Fehler beim Erstellen des PDFs.");
    }
}
	<!DOCTYPE html>
	<html lang="de">
	<head>
	<meta charset="UTF-8">
	<link href="https://fonts.googleapis.com" rel="stylesheet">
	<style>
	#myTextarea {
	font-family: 'Dancing Script', cursive;
	font-size: 24px;
	width: 100%;
	height: 200px;

	/* Spiegelt die Textarea an der vertikalen Achse */
	transform: scaleX(-1);

	/* Behält die Schreibrichtung von links nach rechts bei */
	/* Da das Feld gespiegelt ist, erscheint 'left' visuell rechts. */
	/* Wir nutzen 'right', damit es visuell links startet. */
	text-align: right;
	direction: ltr;
	}
	</style>
	</head>
	<body>

	<textarea id="myTextarea" placeholder="Tippe hier..."></textarea>
	<br>
	<button onclick="downloadText()">Text herunterladen</button>

	<script>


	function downloadText() {
	const textarea = document.getElementById("myTextarea");
	const originalText = textarea.value;

	// Dreht den Text um: "Hallo" wird zu "ollaH"
	// So bleibt die Spiegelschrift in der .txt Datei erhalten
	const mirroredText = originalText.split("").reverse().join("");

	const blob = new Blob([mirroredText], { type: "text/plain;charset=utf-8" });
	const link = document.createElement("a");

	link.href = URL.createObjectURL(blob);
	link.download = "spiegelschrift.txt";
	link.click();

	URL.revokeObjectURL(link.href);
	}


	</script>

	</body>
	</html>


	<style>
	/* Schriftart registrieren */
	@font-face {
	font-family: 'Dabbington';
	src: url('Dabbington.ttf') format('truetype');
	font-weight: normal;
	font-style: normal;
	}

	#capture-area {
	padding: 20px;
	background: white;
	display: inline-block;
	}

	#myTextarea {
	font-family: 'Dabbington', cursive;
	font-size: 28px;
	width: 600px;
	height: 300px;
	border: 1px solid #ccc;

	/* Spiegelung an der vertikalen Achse */
	transform: scaleX(-1);

	/* Damit der Cursor beim Tippen am "richtigen" Rand startet */
	text-align: right;
	direction: ltr;

	/* Styling für sauberen Export */
	line-height: 1.4;
	overflow: hidden;
	}
	</style>





	async function downloadPDF() {
	const { jsPDF } = window.jspdf;
	const element = document.getElementById('capture-area');

	// Warten bis alle Schriften (Dabbington) geladen sind
	await document.fonts.ready;

	try {
	const canvas = await html2canvas(element, {
	scale: 2, // Sorgt für scharfen Text im PDF
	useCORS: true, // Wichtig für externe Ressourcen
	logging: false
	});

	const imgData = canvas.toDataURL('image/png');
	const pdf = new jsPDF('p', 'mm', 'a4');

	const imgProps = pdf.getImageProperties(imgData);
	const pdfWidth = pdf.internal.pageSize.getWidth();
	const pdfHeight = (imgProps.height * pdfWidth) / imgProps.width;

	pdf.addImage(imgData, 'PNG', 0, 0, pdfWidth, pdfHeight);
	pdf.save("spiegelschrift_final.pdf");
	} catch (error) {
	console.error("PDF Export fehlgeschlagen:", error);
	alert("Fehler beim Erstellen des PDFs.");
	}
	}