Providing hyphenator feature in themes

Target of this tutorial is, to provide a behaviour checkbox on each content element, which allows you to activate a hyphenated text.

Integrate the following Page-TypoScript file, for defining the behaviour checkbox.

File: theme_bootstrap_child/Configuration/PageTS/Library/themes.content.behaviour.hyphenator.pagets

  1. #
  2. # Provides the hyphenator for TYPO3 websites
  3. #
  4. # Required files:
  5. # - page.includeJS.hyphenator.setupts
  6. # - themes.content.behaviour.hyphenator.pagets
  7. #
  8. # Define backend configuration for hyphenate checkbox
  9. #
  10. themes.content.behaviour.default {
  11. hyphenate = Hyphenate text
  12. }

Additionally you need a small TypoScript file, which imports the required JavaScript files from a CDN. The same file runs the hyphenator, sets some required language attributes to the HTML-Tag and ships the mapping for the behaviour.

File: theme_bootstrap_child/Configuration/TypoScript/Library/page.includeJS.hyphenator.setupts

  1. #
  2. # Provides the hyphenator for TYPO3 websites
  3. #
  4. # Required files:
  5. # - page.includeJS.hyphenator.setupts
  6. # - themes.content.behaviour.hyphenator.pagets
  7. #
  8. #
  9. # Include the required libraries
  10. #
  11. page {
  12. includeJSLibs {
  13. hyphenator = //cdn.jsdelivr.net/hyphenator/4.3.0/hyphenator.min.js
  14. hyphenator {
  15. external = 1
  16. disableCompression = 0
  17. excludeFromConcatenation = 0
  18. }
  19.  
  20. }
  21. includeJS {
  22. hyphenatorPattern = //cdn.jsdelivr.net/hyphenator/4.3.0/patterns/{$themes.languages.current.isoCodeShort}.js
  23. hyphenatorPattern {
  24. external = 1
  25. disableCompression = 0
  26. excludeFromConcatenation = 0
  27. }
  28. }
  29. }
  30. #
  31. # Run the hyphenator
  32. #
  33. page.headerData.1461600078 = TEXT
  34. page.headerData.1461600078.value (
  35. <script type="text/javascript">
  36. Hyphenator.config({
  37. displaytogglebox : false,
  38. minwordlength : 4
  39. });
  40. Hyphenator.run();
  41. </script>
  42. )
  43. #
  44. #
  45. # Set HTML tag language attributes
  46. # ATTENTION: This may overwrite your own defined attributes!
  47. #
  48. config.htmlTag_setParams = class="no-js" xmlns="http://www.w3.org/1999/xhtml" xml:lang="{$themes.languages.current.isoCodeShort}" lang="{$themes.languages.current.isoCodeShort}"
  49. #
  50. #
  51. # Define the behaviour mapping
  52. #
  53. lib.content.cssMap.behaviour {
  54. hyphenate = hyphenate
  55. }
  56.