Translations
Info
All page names need to be in English.
en da  de  fr  it  ja  km  nl  ru  zh

CRG

From TYPO3Wiki
(Redirected from Content Rendering)
Jump to: navigation, search
This page belongs to the Content Rendering - Team (category ContentRenderingTeam)

What still needs to be done

Some older issues that 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.

Suggestions by Ernesto

Ernesto recently posted some suggestions on the mailinglist

  1. improve css_styled_content's Text with images so that it only renders "a single image + text" if this is all we have (and not tons of DLs,DIV, SPAN, etcs). And maybe handle other "special" situations like this one better. [pending in core list]
  2. solve the "long standing" 16097: TYPO3 Core - Sccessibility issue: XHTML compatibility of text with image content [Resolved; assigned to Ernesto Baschny] issue, XHTML validity of Text with image with no captions.
  3. Review and solve 17107: TYPO3 Core - maxW for image rows is not the maximum [Resolved; assigned to Ernesto Baschny]
  4. Solve the baseURL vs prefixLocalAnchors bogus combinations (17013: TYPO3 Core - Links to top don't work with config.baseURL set [Rejected; assigned to Ernesto Baschny])
  5. get GTMENU into core in some nice form
  6. nicer features in the TYPO3 TABLE rendering. There was already a discussion / proposal on that one, I think it got "forgotten" (maybe in the -dev list)
  7. complete css_styled_content MANUAL, so that it could be rendered as a official core documentation for folks needing information about frontend rendering with it.
  8. Decide how to render
    elements (in RTE) xhtml valid


Feel free to complete the list with your own thoughts. Then start a new thread if you want to start discussion on one certain topic.

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.

Ben van 't Ende

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 mad, but there is still much left to do.

Ernesto Baschny

  • finished CSS IMGTEXT.
  • bug tracker moderator.
  • core developer, acting as a bridge between the CRG and the core team.

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

Uschi Renziehausen

  • Sponsored Stanislas for many many changes in the RTE
  • Writes German/English manual for RTE

Steffen Kamper

  • Steffen is promised to commit patches


Susanne Moog

  • Susanne already created a patch to divide css_styled_content (that has to be tested thoroughly as it is a big change)






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