Dynamische Schriftersetzung auf Webseiten mit Cufon

basti — Fri, 15 May 2009 17:32:15 +0000

Heute habe ich das Javascript Tool Cufón getestet und muss sagen, es ist einfach, klein und perfekt. Habe bisher noch keine Probleme im InternetExplorer 6, 7, FireFox2, 3 oder im Safari sehen können. Demo
Ihr könnt Euch mal eine .html Datei erstellen und einen Test mit der dynamische Schriftersetzung von Cufón vorbereiten.

Das gute an dem ganzen System, der H1 oder H2 Tag wird nicht gelöscht und es wird kein “Bild” erstellt! Der Text bleibt im Tag! Das Negative an dem JavaScript PlugIn, es werden pro Wort ein span erstellt!

Hier mal ein Beispielcode: ( mehr braucht Ihr nicht )

"http://www.w3.org/TR/html4/strict.dtd">
This text will be shown in Frutiger LT Std.

Achtung: Da die Schrift für da Web freigegeben wird, müsst Ihr die Lizensen bei “Kauf-Schriften” lesen!
Wiki: wiki.github.com

Bookmark meinen Blog:

Safari/Firefox Fix für schlechtes Textrendering

basti — Wed, 15 Apr 2009 21:36:31 +0000

Einige schlaue Leute haben zwei mögliche Bugfixes gefunden, die das Problem im Safari oder Firefox der Textrendering ( Schrift ) zuverlässig beseitigen. Auf Jonnotie werden beide Ansätze vorgestellt.

Hier gibt es eine ausführliche Anleitung: highresolution.info
Im zweiten Artikel wird noch beschrieben wie der neue Safari 4 damit klar kommt: jonnotie.nl

Bookmark meinen Blog:

Buchempfehlung

basti — Tue, 22 Apr 2008 15:51:33 +0000

In dieser Rubrik finden Sie die Vorstellung und Beschreibung von Typo3, CSS, XHTML und anderen Büchern, welche ich auch selbst gelesen und benutzt habe.
Empfehlenswert sind sie alle. Jedes Buch setzt andere Schwerpunkte, komplett gleiche Beispiele werden Sie ebenfalls nicht finden.
Diese Bücher sind perfekt für Anfänger und fortgeschrittene Webmaster!

Bookmark meinen Blog:

TYPO3 – Rich Text Editor ( RTE ) Konfiguration

basti — Mon, 17 Mar 2008 10:21:09 +0000

Da ich viel mit Typo3 arbeite, habe ich mir gedacht, zeig ich euch einmal meine Rich Text Editor ( RTE ) Einstellungen:

Fangen wir mit der “Setup” an:

plugin.tx_cssstyledcontent._CSS_DEFAULT_STYLE>

###Content table class disable###
lib.parseFunc_RTE.externalBlocks.table.stdWrap.
HTMLparser.tags.table.fixAttrib.class>

###p in table disable###
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default >
lib.parseFunc_RTE.externalBlocks.table.HTMLtableCells.default.
stdWrap.parseFunc =< lib.parseFunc

“TS-Config” Eingaben:

#
#RTE Classe des Interface (Ausrichtung)
#
RTE.classes {

align-left {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyleft
value = text-align: left;
}

align-center {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifycenter
value = text-align: center;
}

align-right {
name = LLL:EXT:rtehtmlarea/htmlarea/locallang_tooltips.xml:justifyright
value = text-align: right;
}

}

#Trage hier ein wo das Bild vor dem Link Entfernt bzw. nicht angezeigt werden soll

RTE.classesAnchor {

internalLink {
class = internal-link
type = page
image >
}

externalLink {
class = external-link
type = url
image >
}

externalLinkInNewWindow {
class = external-link-new-window
type = url
image >
}

internalLinkInNewWindow {
class = internal-link-new-window
type = page
image >
}

download {
class = download
type = file
image >
}

mail {
class = mail
type = mail
image >
}

}

## RTE Konfiguration

RTE.default {

# RTE BG-color
mainStyle_bgcolor = #ffffff
mainStyleOverride_add.BODY = { background-color:#ffffff; background-image:none; }

# Zuweisung der CSS-Datei
contentCSS = /fileadmin/templates/namevondercssdatei.css
useCSS = 1

# Dafür sorgen, dass die Style-Angaben der RTE.default.contentCSS oberste Priorität haben
ignoreMainStyleOverride = 0

# Markup options
enableWordClean = 1
removeTrailingBR = 1
removeComments = 1
removeTags =
removeTagsAndContents =

# zeigt alle CSS-Klassen die in .css vorhanden sind
showTagFreeClasses = 1

# Tabellen Optionen in der RTE Toolbar
hideTableOperationsInToolbar = 0
keepToggleBordersInToolbar = 1

# Tabellen Editierungs-Optionen (cellspacing/ cellpadding / border)
disableSpacingFieldsetInTableOperations = 0
disableAlignmentFieldsetInTableOperations=0
disableColorFieldsetInTableOperations=0
disableLayoutFieldsetInTableOperations=0
disableBordersFieldsetInTableOperations=0

# Do not allow insertion of the following tags
hideTags =

# Buttons die gezeigt/versteckt werden im RTE
showButtons = textstyle, textstylelabel, blockstyle, blockstylelabel, bold, italic, underline, left, center, right, orderedlist, unorderedlist, insertcharacter, line, link, image, removeformat, table, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge, findreplace, insertcharacter, undo, redo, showhelp, about, chMode, inserttag
hideButtons = fontstyle, formatblock, fontsize, strikethrough,lefttoright, righttoleft, textcolor, bgcolor, textindicator, emoticon, user, spellcheck, outdent, indent, justifyfull, subscript, superscript, acronym, copy, cut, paste

# Hält die RTE Icons gegroupt zusammen
keepButtonGroupTogether = 1

# blendet Statusbar in htmlarea aus
showStatusBar = 0

# Add styles Left, center and right alignment of text in paragraphs and cells.
inlineStyle.text-alignment (
p.align-left, h1.align-left, h2.align-left, h3.align-left, h4.align-left, h5.align-left, h6.align-left, td.align-left { text-align: left; }
p.align-center, h1.align-center, h2.align-center, h3.align-center, h4.align-center, h5.align-center, h6.align-center, td.align-center { text-align: center; }
p.align-right, h1.align-right, h2.align-right, h3.align-right, h4.align-right, h5.align-right, h6.align-right, td.align-right { text-align: right; }
)

# Tags die erlaubt werden bzw. verboten werden ( allow / deny )
proc.entryHTMLparser_db.allowTags < RTE.default.proc.allowTags

proc {
# tags die erlaubt sind
allowTags = table, tbody, tr, th, td, h1, h2, h3, h4, h5, h6, div, p, br, span, ul, ol, li, re, blockquote, strong, em, b, i, u, sub, sup, strike, a, img, nobr, hr, tt, q, cite, abbr, acronym, center

# tags die verboten sind
denyTags = font

# br wird nicht zu p konvertiert
dontConvBRtoParagraph = 1

# tags sind erlaubt außerhalt von p, div
allowTagsOutside = img,hr,span

# erlaubte attribute in p, div tags
keepPDIVattribs = align,class,style,id,span

# Trage hier ein welche tags in zb. span erlaubt sind ( müssen übereinstimmen mit deiner .css )
allowedClasses (
external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail,
align-left, align-center, align-right, text_red, text_grun
)

# html parser einstellungen
HTMLparser_rte {

# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags

# tags die untersagt sind
removeTags = font

# entfernt html-kommentare
removeComments = 1

# tags die nicht übereinstimmen werden nicht entfernt (protect / 1 / 0)
keepNonMatchedTags = 0
}

# Content to database
entryHTMLparser_db = 1
entryHTMLparser_db {

# tags die erlaubt/verboten sind
allowTags < RTE.default.proc.allowTags
denyTags < RTE.default.proc.denyTags

# CLEAN TAGS
noAttrib = b, i, u, strike, sub, sup, strong, em, quote, blockquote, cite, tt, br, center
rmTagIfNoAttrib = font

# htmlSpecialChars = 1

## align attribute werden erlaubt

tags {
p.fixAttrib.align.unset >
p.allowedAttribs = class,style,align
div.fixAttrib.align.unset >
hr.allowedAttribs = class
span.fixAttrib.style.unset>

## b und i tags werden ersetzt (em / strong)
b.remap = strong
i.remap = em

## img tags werden erlaubt
img>

## span tags werden erlaubt
span >
}
}

}

# Classes: Ausrichtung
classesParagraph (
align-left, align-center, align-right
)

# Classes: Eigene Stile
classesCharacter = text_red
allowedClasses (text_red)

# Classes: Eigene Stile
classesCharacter = text_grun
allowedClasses (text_grun)

classesImage= rte_image

# Classes für Links (These classes should also be in the list of allowedClasses)
classesAnchor = external-link, external-link-new-window, internal-link, internal-link-new-window, download, mail
classesAnchor.default {
page = internal-link
url = external-link-new-window
file = download
mail = mail
}

}

# Use same processing as on entry to database to clean content pasted into the editor
RTE.default.enableWordClean.HTMLparser < RTE.default.proc.entryHTMLparser_db

# FE RTE configuration (htmlArea RTE only)
RTE.default.FE < RTE.default
RTE.default.FE.userElements >
RTE.default.FE.userLinks>

# Breite des RTE in Fullscreen-Ansicht
TCEFORM.tt_content.bodytext.RTEfullScreenWidth= 80%

Bei fragen oder Problemen könnt Ihr gerne die Kommentarfunktion benutzen!

Bookmark meinen Blog:

min-height für Internet-Explorer 6

basti — Fri, 14 Mar 2008 15:56:54 +0000

Leider kann der Internet Explorer 6 kein CSS 2.0 – minimale Höhe “min-height”, doch mit diesem CSS-Hack funktioniert es (CSS level 2.1 Valide):

CSS CODE:
selector { min-height:500px; height:auto !important; height:500px; }

Bookmark meinen Blog:

ingeniumdesign blog » HTML

Dynamische Schriftersetzung auf Webseiten mit Cufon

`This text will be shown in Frutiger LT Std.`

Safari/Firefox Fix für schlechtes Textrendering

Buchempfehlung

TYPO3 – Rich Text Editor ( RTE ) Konfiguration

min-height für Internet-Explorer 6