CRG
From TYPO3Wiki
| Teams Committees | This project/information is related to the Content Rendering - Team |
Contents |
What needs to be done to improve TYPO3's XHTML compliancy/accessibility?
Some issues are left are:
- IMGTEXT - There should be a simple checkbox with the TEXT, TEXT with IMG element for the clearer. examples of using the clearer
- filelinks (Implement Juraj's fixes)...
- The FORM element - Patrick Broens is working on an new FORM element that should be logical, semantical, accessible etc. At the moment he is working on a new form wizard based on scriptaculous. First impression of draggable elements into fieldsets are awesome.
- clear.gif. It seems there are still references to clear.gif in the source of TYPO3. They need to be removed
- Provide TYPO3 with new static templates. It seems to be a good idea to have these for beginners to have a quick start.
Multimedia
- multimedia (Implement Juraj's fixes)...
- http://www.apple.com/quicktime/tutorials/embed.html
Members
One of the goals is to have an XHTML valid output. Ofcourse we would prefer this to be strict 1.1. The members of this list have different expertise and trackrecord and the group must be able to cooperate in getting this job done. First let's see what we have in da house.
Ben van 't Ende (Leader)
I have been working with stylesheets since IE6. So that's since 1998. I have worked together with some extension authors like Zach and Rupi to get their Content Rendering Right. I started this group because the importance of a semantically correct rendering of the content TYPO3 spits out is of ever increasing importance. More and more clients, especially governmental agencies, are asking for this. Some issues are hard to solve as they are embedded in the TYPO3 CORE. Since the release of TYPO3 3.8.0 some significant improvements have been made.
Patrick Broens (Honorary Member)
Maintainer of RTEhtmlarea. Working on the FORM object. Working on new FORM wizard.
Ingo Renner
- implemented XML news Feeds for tt_news
- contributed first tableless template for tt_news
- contributed integration of configuration for the <head> tag
- author of EXT:timtab, EXT:irfaq, EXT:irmultisite, EXT:addressgroups and others
- added the fix for the css_styled_content sitemap as unordered list below
- maintainer of EXT:kickstarter
Sebastian Kurfuerst
- CRG bugfixer
- Accessible Table element
JoH
Joey Hasenau. TYPOscript wizard. JoH recently did his ICEpack, which features great content rendering posibilities.
Ernesto Baschny
- finished CSS IMGTEXT.
- bug tracker moderator.
- core developer, acting as a bridge between the CRG and the core team.
Uschi Renziehausen
- Sponsored Stanislas for many many changes in the RTE
- Writes German/English manual for RTE
Snippets
below you can find some relevant code snippets
RTE
Example TSconfig setup for RTE htmlarea:
RTE.classes {
Nadpis1.name = Nadpis 1
Nadpis2.name = Nadpis 2
Nadpis3.name = Nadpis 3
top_left_image.name = Obrazok vlavo
top_right_image.name = Obrazok vpravo
listGreen.name = Zoznam farebny
listGray.name = Zoznam sivy
noBorder.name = Tabulka bez okrajov
topBorder.name = Tab. s okrajom hore a dole
}
RTE.default {
# Complete list of all buttons "hideButtons" ###
# hideButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, bold, italic, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, orderedlist, unorderedlist, outdent, indent, textcolor, bgcolor, textindicator, emoticon, insertcharacter, line, link, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
# showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, formatblock, bold, italic, underline, strikethrough, subscript, superscript, left, center, right, justifyfull, orderedlist, unorderedlist, outdent, indent, textindicator, insertcharacter, line, link, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
showButtons = blockstylelabel, blockstyle, textstylelabel, textstyle, fontstyle, fontsize, formatblock, bold, italic, underline, strikethrough, subscript, superscript, lefttoright, righttoleft, left, center, right, justifyfull, orderedlist, unorderedlist, outdent, indent, textcolor, bgcolor, textindicator, emoticon, insertcharacter, line, link, image, table, user, acronym, findreplace, spellcheck, chMode, inserttag, removeformat, copy, cut, paste, undo, redo, showhelp, about, toggleborders, tableproperties, rowproperties, rowinsertabove, rowinsertunder, rowdelete, rowsplit, columninsertbefore, columninsertafter, columndelete, columnsplit, cellproperties, cellinsertbefore, cellinsertafter, celldelete, cellsplit, cellmerge
hideButtons = fontstyle, fontsize, subscript, superscript, user, acronym, textcolor, bgcolor, textindicator, emoticon, inserttag, removeformat, showhelp, about, line
hidePStyleItems = ADDRESS, H4, H5, H6, PRE
classesParagraph = Nadpis1, Nadpis2, Nadpis3, blackBold, listGreen, listGray
classesCharacter = Nadpis1, Nadpis2, Nadpis3, blackBold
classesAnchor >
classesAnchor = bigBold
classesImage >
classesImage = top_left_image, top_right_image
classesTable >
classesTable = noBorder, topBorder
}
RTE.default.contentCSS = fileadmin/agemsoft/css/rte.css
RTE.default.showTagFreeClasses = 1
RTE.default.enableWordClean = 1
RTE.default.useCSS = 0
RTE.config.tt_content.bodytext.proc.allowedClasses = Nadpis1, Nadpis2, Nadpis3, blackBold, noBorder, topBorder, listGreen, listGray, bigBold
RTE.default.proc.entryHTMLparser_db.tags {
p.fixAttrib.align.unset >
p.allowedAttribs = class,style,align
}
RTE.default {
proc.entryHTMLparser_db.removeTags := removeFromList(strike)
proc.entryHTMLparser_db.removeTags := removeFromList(u)
removeTags = center, font, o:p, sdfield
}
RTE.classesAnchor {
externalLink.image >
externalLink.titleText >
externalLink.altText >
externalLinkInNewWindow.image >
externalLinkInNewWindow.titleText >
externalLinkInNewWindow.altText >
download.image >
download.titleText >
download.altText >
mail.image >
mail.titleText >
mail.altText >
}
Rumours have been going on the default editor RTEhtmlarea will be replaced. Is that true?
Accessible mailform
tt_content.mailform.20 {
accessibility = 1
REQ = 1
layout = ###LABEL### ###FIELD###
COMMENT.layout = ###LABEL###
RADIO.layout = ###LABEL### <fieldset class="radio">###FIELD###</fieldset>
LABEL.layout = ###LABEL### ###FIELD###
labelWrap.wrap = |
commentWrap.wrap = |
radioWrap.wrap = <label>|</label>
REQ.labelWrap.wrap = |
stdWrap.wrap = <fieldset class="csc-mailform"> | </fieldset>
params.radio = class="tue-radio"
params.check = class="tue-check"
params.submit = class="tue-submit"
}
looks quite ugly though ;) in order to css-format the label field so that assigning a width works use the following CSS code:
label {
display: block;
float: left;
width: 120px;
font-size: 10pt;
}
note that it first needs to be converted to a BLOCK element in order to assign a width value. float:left; will make it appear next to the input element. Same goes if you want to assign the width to the SPAN Tag.
TMENU List Menu (also for nested)
snippet.accessible_list_TMENU {
10 = HMENU
10.1 = TMENU
10.1.wrap = <ul class="menu-level1">|</ul>
10.1{
NO {
wrapItemAndSub = <li>|</li>
}
}
10.2 = TMENU
10.2.wrap = <ul class="menu-level2">|</ul>
10.2 {
NO{
wrapItemAndSub = <li>|</li>
}
}
10.3 = TMENU
10.3.wrap = <ul class="menu-level3">|</ul>
10.3 {
NO{
wrapItemAndSub = <li>|</li>
}
}
10.4 = TMENU
...copy from 10.3 if you need more levels
}
GMENU List Menu (also for nested)
temp.accessible_list_GMENU = HMENU
temp.accessible_list_GMENU {
entryLevel = 0
target = _self
1 = GMENU
1 {
wrap = <ul class="menu-level-01" id="nested_gmenu"> | </ul>
noBlur = 1
accessKey = 1
expAll = 1
NO {
wrap = <li class="menu-item-no"> | </li>
ATagTitle.field = subtitle // title
stdWrap.htmlSpecialChars=1
backColor = #E1E1E1
transparentBackground = 1
XY = [10.w]+10, 22
10 = TEXT
10.text.field = title
10.fontSize = 16
10.fontColor = #253F73
10.offset = 0, 16
10.align = left
}
RO < .NO
RO = 1
RO.10.fontColor = #CC6600
ACT < .NO
ACT = 1
ACT {
wrap = <li class="menu-item-act"> | </li>
10.fontColor = #CC0000
}
ACTRO < .NO
ACTRO = 1
ACTRO.10.fontColor = #CC6600
IFSUB < .NO
IFSUB = 1
IFSUB.wrap = <li class="menu-item-no"> | <ul class="menu-level-02">
IFSUBRO < .NO
IFSUBRO = 1
IFSUBRO.10.fontColor = #CC6600
ACTIFSUB < .NO
ACTIFSUB = 1
ACTIFSUB {
wrap = <li class="menu-item-act"> | <ul class="menu-level-02">
10.fontColor = #CC0000
}
ACTIFSUBRO < .NO
ACTIFSUBRO = 1
ACTIFSUBRO.10.fontColor = #CC6600
}
2 = GMENU
2 < .1
2 {
wrap = | </ul></li>
IFSUB.wrap = <li class="menu-item-no"> | <ul class="menu-level-03">
ACTIFSUB.wrap = <li class="menu-item-act"> | <ul class="menu-level-03">
}
3 = GMENU
3 < .2
3 {
IFSUB.wrap = <li class="menu-item-no"> | <ul class="menu-level-04">
ACTIFSUB.wrap = <li class="menu-item-act"> | <ul class="menu-level-04">
}
4 = GMENU
4 < .2
4 {
IFSUB >
IFSUBRO >
ACTIFSUB >
ACTIFSUBRO >
}
}
Now you just need to apply your styles and it looks fine ;)
Sitemap as an unordered list
This fixes the default css_styled_content sitemap to deliver an unordered and nested list in 3.8.x
# ----- Sitemap (accessible) ----- #
# fixes default tt_content / css_styled_content TS to output unordered lists in TYPO3 3.8.x
tt_content.menu.20.2 {
wrap = <div class="csc-menu csc-menu-2">|</div>
# level 1
1 {
wrap = <ul class="csc-sitemap csc-sitemap-level1">|</ul>
noBlur = 1
NO.allWrap >
NO.wrapItemAndSub = <li>|</li>
}
# level 2
2 {
wrap = <ul class="csc-sitemap csc-sitemap-level2">|</ul>
noBlur = 1
NO.allWrap >
NO.wrapItemAndSub = <li>|</li>
}
# level 3
3 {
wrap = <ul class="csc-sitemap csc-sitemap-level3">|</ul>
noBlur = 1
NO.allWrap >
NO.wrapItemAndSub = <li>|</li>
}
# level 4
4 {
wrap = <ul class="csc-sitemap csc-sitemap-level4">|</ul>
noBlur = 1
NO.allWrap >
NO.wrapItemAndSub = <li>|</li>
}
}
GTMENU - a GMENU as TMENU
GMENUS use images for the menuitems, which is not state of the art when it comes to accessibility. How about using the graphical features of a GMENU but render it as a TMENU with CSS background images? For that purpose, we have written a userfunction that you can use together with the above GMENU.
XHTML valid Flash
<object width="160" height="112"
data="movie.swf"
type="application/x-shockwave-flash">
<param name="movie" value="movie.swf">
</object>
More: Flash Satay: Embedding Flash While Supporting Standards
