[TYPO3-english] CSS Styled content - could it be simplified?

[Ernesto Baschny [cron IT]]

Riccardo De Contardi schrieb am 12.05.2011 14:46:

> IMHO the way CSS styled content renders the CE ³Text with Images² (I mean
> the resulting HTML+CSS) is quite complicated and should be simplified
> 
> - there are a lot of classes

You can configure them "out" by modifying the TypoScript. Most of them
are used by the shipped and auto-generated CSS to be able to position
the elements as they are configured in the backend on the content element.

See TypoScript tree:

tt_content.image.20.rendering

> - there are inline styles (style=²width:etc²) that should be avoided

If you can do it, go ahead. All inline styles are there for a reason,
most is explained here:

http://typo3.org/documentation/document-library/extension-manuals/cron_cssstyledimgtext/0.4.1/view/1/3/#id3994626

Search for "Inline Style".

> - if you set captions for images, the  HTML that arranges images becomes a
> dl/dt/dd structure; as far as I know, there are screen readers, like JAWS
> that speak an "=" between the term and its definition, so:
> <dl><dt><img src="typo3temp/myimage.png" alt="alt of the
> image"></dt><dd>caption of the image</dd></dl>
> 
> Would be spoken as:
> 
> "alt of the image = caption of the image"
> 
> I think this should be confusing for the users (and... if there is no alt?
> ³ = caption of the image²?? ); maybe the plain ul/li structure could be
> sufficient (plus surroinding the caption with a <span>)

In current CSS styled content, the rendering of a list of images is
defined through TypoScript itself and you can modify it to match your
preferences. Check out this tree in your TypoScript:

tt_content.image.20.rendering.dl.fallbackRendering

In words:

1) Just one image without a caption => simple DIV around the image
2) Multiple images and one global caption => one UL with one LI per
image and one DIV with the caption after the UL
3) Multiple images and no caption at all => one UL with one LI per image
4) Multiple images each with it's own caption => one DL with one DT/DD
pair for each image/caption

At the time of this creation, this was the "best practice" for the
semantics we had in these various situations that might happen. With the
introduction of the "fallbackRendering" (in TYPO3 v4.4) it became
possible to configure these edge-cases and the above mentioned default
was introduced (you have to use the right setup.txt starting 4.4 for
this to work).

> I¹ll be glad to know your opinion about this topic. I¹ll be soon start
> making some mock-ups experiments with a ³simplified² HTML+CSS; if someone is
> interested, let me know.

If you have some good results, please don't hesitate to share.

Since all classes / tags / attributes of this object is nowadays done in
TypoScript, it's very easy to modify it to your taste. But keeping in
mind that each modification might break one or more of the features that
is available when configuring each "Text with images" element.

Cheers,
Ernesto