[Typo3] accessible font size?

[Chris Paige]

Here's my approach.  Due to some challenges getting the Tmenu to change 
dynamically, the code didn't turn out as elegant (sexy) as I had hoped. 
Really, it seems pretty bloated as Typoscript goes...  Also I was not able 
get Typo to create an additionalParams dynamically using GP:fontsize from 
the URL.  So using doNotLinkIt and reconstructing the link is a work around. 
Needs to be adapted for your RealURL settings or lack thereof.

But it works for me for now and I'm proud of it!!!


[globalVar = GP:fontsize > 0 ]

## Vertical Menu to 4 Levels

page.10.marks.MENU_GOES_HERE = HMENU

# First level menu-object, textual

page.10.marks.MENU_GOES_HERE.1 = TMENU

page.10.marks.MENU_GOES_HERE.1 {

# Normal state properties

NO.allWrap = <div class="menu1-level1-no"> | </div>

NO.stdWrap.htmlSpecialChars = 1

NO.expAll = 0

NO.doNotLinkIt = 1

NO.before.data = field:uid

NO.before.wrap = <A href="|/

NO.stdWrap.data = GPvar : fontsize

NO.stdWrap.wrap = ?&fontsize=|">

NO.after.data = field:title

NO.after.wrap = |</A>

# Enable active state and set properties:

ACT = 1

ACT.stdWrap.htmlSpecialChars = 1

ACT.allWrap = <div class="menu1-level1-act"> | </div>

ACT.doNotLinkIt = 0

# Enable current state and set properties:

CUR = 1

CUR.stdWrap.htmlSpecialChars = 1

CUR.allWrap = <div class="menu1-level1-act"> | </div>

CUR.doNotLinkIt = 1

## Spacer Menuu Item (no link)

SPC = 1

SPC.doNotShowLink = 0

SPC.doNotLinkIt = 1

SPC.allWrap = <div class="spacer"> | </div>

}

[else]

## Vertical Menu to 4 Levels

page.10.marks.MENU_GOES_HERE = HMENU

# First level menu-object, textual

page.10.marks.MENU_GOES_HERE.1 = TMENU

page.10.marks.MENU_GOES_HERE.1 {

# Normal state properties

NO.allWrap = <div class="menu1-level1-no"> | </div>

NO.stdWrap.htmlSpecialChars = 1

NO.expAll = 0

NO.doNotLinkIt = 1

NO.before.data = field:uid

NO.before.wrap = <A href="|/

NO.stdWrap.data = &nbsp;

NO.stdWrap.wrap = |">

NO.after.data = field:title

NO.after.wrap = |</A>

# Enable active state and set properties:

ACT = 1

ACT.stdWrap.htmlSpecialChars = 1

ACT.allWrap = <div class="menu1-level1-act"> | </div>

ACT.doNotLinkIt = 0

# Enable current state and set properties:

CUR = 1

CUR.stdWrap.htmlSpecialChars = 1

CUR.allWrap = <div class="menu1-level1-act"> | </div>

CUR.doNotLinkIt = 1

## Spacer Menuu Item (no link)

SPC = 1

SPC.doNotShowLink = 0

SPC.doNotLinkIt = 1

SPC.allWrap = <div class="spacer"> | </div>

}

[end]

temp.url = TEXT

page.headerData.10=TEXT

[globalVar = GP:fontsize = 2060]

temp.url.value = <center><a href="{field:uid}/?&fontsize=2080">Font 
+</a><br/><a href="{field:uid}/">Reset</a></center>

page.headerData.10.value =<style type="text/css" >body 
{font-size:.6em}</style>

[end]

[globalVar = GP:fontsize = 2080]

temp.url.value = <center><a href="{field:uid}/?&fontsize=2100">Font 
+</a>&nbsp;<a href="{field:uid}/?&fontsize=2060">Font -</a><br/><a 
href="{field:uid}/">Reset</a></center>

page.headerData.10.value =<style type="text/css">body 
{font-size:.8em}</style>

[end]

[globalVar = GP:fontsize < 2]

temp.url.value = <center><a href="{field:uid}/?&fontsize=2120">Font 
+</a>&nbsp;<a href="{field:uid}/?&fontsize=2080">Font -</a><br/><a 
href="{field:uid}/">Reset</a></center>

page.headerData.10.value =<style type="text/css">body 
{font-size:1em}</style>

[end]

[globalVar = GP:fontsize = 2100]

temp.url.value = <center><a href="{field:uid}/?&fontsize=2120">Font 
+</a>&nbsp;<a href="{field:uid}/?&fontsize=2080">Font -</a><br/><a 
href="{field:uid}/">Reset</a></center>

page.headerData.10.value =<style type="text/css">body 
{font-size:1em}</style>

[end]

[globalVar = GP:fontsize = 2120]

temp.url.value = <center><a href="{field:uid}/?&fontsize=2140">Font 
+</a>&nbsp;<a href="{field:uid}/?&fontsize=2100">Font -</a><br/><a 
href="{field:uid}/">Reset</a></center>

page.headerData.10.value =<style type="text/css">body 
{font-size:1.2em}</style>

[end]

[globalVar = GP:fontsize = 2140]

temp.url.value = <center><a href="{field:uid}/?&fontsize=2160">Font 
+</a>&nbsp;<a href="{field:uid}/?&fontsize=2120">Font -</a><br/><a 
href="{field:uid}/">Reset</a></center>

page.headerData.10.value =<style type="text/css">body 
{font-size:1.4em}</style>

[end]

[globalVar = GP:fontsize = 2160]

temp.url.value = <center><a 
href="{field:uid}/?&fontsize=2140">Font -</a><br/><a 
href="{field:uid}/">Reset</a></center>

page.headerData.10.value =<style type="text/css">body 
{font-size:1.6em}</style>

[end]

temp.url.insertData = 1

page.10.marks.FONTSIZER_GOES_HERE < temp.url





> Another approach that just popped into my mind (without thinking it
> through, though): Let the "change font size"-Icons pass some parameter as
> GET-value. Check for that parameter in TypoScript, if it is set, invoke a
> little PHP-script (user-function) that stores the actual fontsize-value
> in the users session data.

I'm still making my way around extensions and all the rest of writing my own 
php for Typo3.  I'm just starting to get good at hacking other people's 
code.  So this would be beyond me at this point.  But I would love to see 
what you come up with.  With php, you should be able to construct the 
additionalParams and menu with the more elegant code I had imagined.

I put the controlling font-size setting on the body tag, not on a *.  That 
seems sufficient as long as the rest of the page is set in ems.

I think that it will be important to have a button (either form or graphic 
link) for the Font +, Font -, and Reset links in the long term.  I think the 
button should be absolute coded to 12 or 14 pt so it shows up clearly even 
when someone's browser is accidentally defaulting to a small font.  It would 
stink to have this feature, but for the link to be too small for someone to 
read to activate it!!!

Still needs some more code to add the fontsize parameter to automatically 
generated typolinks within content elements.  I'll share that if I can get 
it to work.