How to configure a TYPO3 website for Arabic language

25 September 2012 Comments Off

With TYPO3 we can have multiple languages in the backend and the different editors can use the backend modules and add frontend content in their language of choice. There is no problem in having an international team of editors which can edit and add content in lots of languages. As the TYPO3 community grows also the number of language packs is growing.

One of the available language packs is Arabic, which has a few interesting aspects and that’s why we will discuss it a little bit. One of the challenges in this case is that the texts in Arabic are right to left (RTL) instead of left to right (LTR).

Now let’s see how can we configure TYPO3 to allow this kind of content setup.

Available online tutorials offer as a solution for multilanguage site installation an extension called csh_XX where XX means a shortening for language name. But these methods are deprecated now and there are better solutions for this.

TYPO3 has a really advanced module to configure backend languages for each user using “Extension Manager”.For TYPO3 4.5 versions or older there is a section called “Translation Handling” and starting with TYPO3 4.6 the section is named “Language Pack”.There are more than 50 language packs and the number is growing.

BACKEND

Install and configure TYPO3 with desired language pack can be made using following steps:

1. Go to → “Extension Manager” → “Translation Handling” or “Language Pack”

2. Select your language pack

3. Press “Update from repository”

Each user can set his own backend language using “User settings” module.

Installing Arabic language pack or any language pack doesn’t come with a 100% translation of the text. There are labels of modules which doesn’t have a completely translation or literally translation.

· Workspace

· News Admin – tt_news

· Extension Manager

· Reports

· Scheduler

· Typoscript Help

· About Modules

Also, there are modules which hasn’t been translated completely, modules translated only partial and some of them without translation.

Modules with incomplete translation:

· Template

· News Admin

· User settings

· User Admin

· Extension Manager

· Configuration

· Log

· Indexing

· Reports

· Scheduler

Backend translations are available mostly for editors modules and functionalities.

FRONTEND

In order to create a website in arabic (non-latin) it is required that encoding to be UTF-8, not latin ANSI. We will have non-latin characters.

How to configure UTF-8 in TYPO3

1. System files

In order to configure encoding to be UTF-8 you will have to add following lines of code using localconf.php file or using Install Tool from Typo3.

// For backend charset

$TYPO3_CONF_VARS['BE']['forceCharset'] = ‘utf-8′;

$TYPO3_CONF_VARS['SYS']['setDBinit'] = ‘SET NAMES utf8;’;

$TYPO3_CONF_VARS['SYS']['multiplyDBfieldSize'] = ’3′;

Where:

-forceCharset as utf-8 it brings config.renderCharset and metaCharset set utf-8 by default utf-8.

-multiplyDBfieldSize is used to multiply the dimension of the fields in DB if you want to use an UTF-8 encoding.It is recommended to use „3” for non-latin languages as arabic or chinese.

-SET NAMES utf8 is equivalent to three SQL statements:

SET character_set_client = utf8;

SET character_set_results = utf8;

SET character_set_connection = utf8;

2.Apache

There is a configuration for Apache to specify the charset when browser is displaying a page for example.There are 2 methods to do that:

· .htaccess – safer.

· httpd.conf – faster.

AddDefaultCharset utf-8

3.PHP

In php.ini file you have to add the following line of code in order that all stand-alone script to use utf-8 charset.

default_charset = "utf-8"

4. TypoScript

There are some Typoscript configurations wich has to be done in order to use non-latin languages for pages, by default.

config.language = ar

config.locale_all = ar_AR.utf-8

config.htmlTag_langKey = ar-AR

[browser = msie]

config.htmlTag_setParams = xmlns="http://www.w3.org/1999/xhtml" xmlns:v=urn:schemas- microsoft-com:vml xml:lang="ar"

LIMITATIONS

There are some limitations when dislaying the text in non-lating language on page using TYPO3.

1.Right to left direction

First of all, for each paragraph of text it is necessary to set direction of the text from right to left using attribute dir in HTML (dir=”RTL”) , where RTL means Right To Left.

In TYPO3, build-in RTE (rtehmltarea) offer for editors possibility to set direction of text in a visual way. This option is available only when RTE is configured correctly to display this button. For example in Demo mode this button is displayed. Setting RTE to work in “Demo” mode can be done from “Extension Manager” , at extension configuration section.

Result: Text direction buttons (LTR and RTL)

clip_image003 clip_image004

Also, if you want to modify „dir” attribute for <html> tag you have to make an RTL configuration using Typoscript for root page template.

config.htmlTag_dir = rtl

2.Text alignment

By default, in html, text is aligned from left to right. If there is no configuration about alignment mode, then for a 2 lines text you can see that the second line isn’t properly align so you can read from right to left and that’s why there comes the need of setting rtl attribute.

3.RealURL

Using a non-latin language in TYPO3 brings some limitations when you have to work with RealURL. When you have to access some pages with title with non-latin text, it is impossible because URLs can’t contain characters other than latin. There are two ways to avoid such things.

a) enableAllUnicodeLetters

Usually, realURL makes the conversion of non-ASCII characters to their ASCII equivalent, allowing only characters like A-Z,a-z,0-9 and minus in URL segment. That cause problem to non-latin languages and this option allow URLs to encode incompatible characters into URL entities instead ignoring them completely. That method, usually slows down realURL and it is recommended using caching in RealURL to improve performances.

Setting enableAllUnicodeLetters as true can be done from realurl autoconf, info „init” array:

PATH : ~/typo3conf/realurl_autoconf.php

$GLOBALS['TYPO3_CONF_VARS']['EXTCONF']['realurl']=array (
‘_DEFAULT’ =>
array (
‘init’ =>
array (

‘enableAllUnicodeLetters’ => true,

‘doNotRawUrlEncodeParameterNames’ => true,

……

b) Speaking URL path segment

A much easier method is to use an speaking path for RealURL to replace that non-latin title text. The disadvantage is that it needs for each page an individual speaking path and there is no more a conversion of page title to new non-latin language.

Title of the page will be the same in header and in menu(in non-latin language) and only URL will be modified with the speaking path.

4.Powermail

Using powermail extension in Arabic language brings with it some errors when, for example, you want to create a Powermail Form. When you install a new instance of Typo3, database is automatically created on latin charset, not in utf-8 and when you will create a form and add a field in Arabic language, characters won’t be displayed and won’t be saved properly. Each character will be replaced with “?” and when you will hit the save button will return an error like:

These Fields are not properly updated in database: (title) Probaly language mismatch with field Types”

If all fields needs to be saved properly and non-latin text to be displayed properly, it is needed that all powermail tables and database „Character” to be set as utf-8 and „Collatae” as utf8_general_ci.

ALTER DATABASE `databaseName` DEFAULT CHARACTER SET utf8 COLLATE utf8_general_ci;

ALTER TABLE `tableName` CONVERT TO CHARACTER SET utf8 COLLATE utf8_general_ci;

and tables were:

· tx_powermail_domain_model_answers

· tx_powermail_domain_model_fields

· tx_powermail_domain_model_forms

· tx_powermail_domain_model_mails

· tx_powermail_domain_model_pages

CONCLUSION

As a conclusion we can say that it is not so difficult to create a website in a non-latin language (in this case Arabic) using TYPO3.There are some configurations which need to be adjusted in order to have a properly saved text into the database and a properly displayed text into frontend.As we can see, we only have to add some configurations into TYPO3 filesystem and configure Typoscript to have Arabic language for frontend pages.

It is not mandatory that Apache and PHP to be set as utf-8.It is most likely that a developer will not have access to core files from Apache and PHP and it is enough to configure database as utf-8 from Install Tool(or editing config file) and frontend from Typoscript.

Of course, there are some limitations and problems for some extensionsbut these can be fixed as we described for RealURL and Powermail.

The conclusion is: YES, it is not hard to develop a website in Arabic or any other non-latin language that requires right to left writing. There are resources and solutions for the problems that appear in these situations and the TYPO3 Enterprise CMS can be used universally by people from all over the world.

A glimpse on TYPO3camp Mallorca

18 September 2012 § 2

t3c_mallorca_200x60Between 14-16 September 2012 in the beautiful city of Palma de Mallorca took place the first international TYPO3camp. Arxia supported this event by sponsoring it and sending a team of 5 developers to attend at the different sessions which covered a broad range of topics. The 115 participants were from different places of Europe like: Germany, Romania, Poland, Spain, Denmark, The Netherlands.

The event started on Friday – the 14th of September with a Warmup party in Marchica which allowed people to get to know each other.  The next day kickstarted at Hotel Catalonia Majorica with the opening session and after that the planning session took place. For those not familiar with the barcamp format this means that everyone interested in holding a session can propose one and the participants can express their interest or not in that particular session.

schedule

Our team proposed a session called Mobile Apps from TYPO3 which is about an extension that allows the generation of mobile applications from inside TYPO3. There was quite some interest in this session so we went on and presented what we have done so far. The session was held by László Bodor and Zsolt Molnár (in picture below) and its available for download or you can view it on Slideshare.

laci&zsolt

Of course there were lots of other interesting sessions like: Zen coding, TYPO3 6.0, TYPO3 Scheduler, Scrum + Kanban, Make your website fly, TYPO3 & E-commerce.

The day ended with a social event at Diablito with lots of beer and wine and some pizzas for the participants. As you might imagine it this was a long night so the next day on Sunday the camp started a little bit later then announced.

The second day of the camp featured also some quite good sessions like: The past, present and future of CMS, BE Editors, TYPO3.org. This day ended slightly earlier then the previous as some people had airplanes to catch in the evening.

Overall TYPO3camp Mallorca was a very fine event, the organizers made everything possible that everyone feels good, have fun and learn something. Let’s hope that next year there will be an even bigger international TYPO3camp with participants from even more countries.

CASE STUDY : IdentityZ.com – a social network

5 September 2012 Comments Off

In the recent years, the Social Networks revolution changed the way we gather, interact and exchange information, and the online Communities thrive, bringing new value to organizations and products. We all know models of success, and we all use frequently at least several social networks.

Yet, each community is different, each organization has its specific, which derives from the special nature of the needs and opportunities that its members seek to be fulfilled.

Considering the launch of a new Social Network, it is imperative to find innovative ways to bring additional value for its members to be, because the members have to be attracted to the new community, they have to be engaged, encouraged to interact and to stay active permanently. The challenges are conceptual (find new, better ways to fit the needs of the requirements of the members), but also technical (incorporate the newest technical trends, find the most performant technical solutions). Bellow you will find the story of this endeavour, from our perspective, as web agency.

Main requirements

  • 1. Create a web platform which can be scaled when needed
  • 2. Define the architecture of a web application which allows the user to manage a lot of content types: profiles, contacts, albums, images, videos, documents, blog posts, comments, messages on the wall, personal messages, etc.
  • 3. Permanently improve the user experience on the site
  • 4. Simplify the functionality as much as possible to be easier to use

Technical challenges and solutions

  • 1. The application is implemented using Zend Framework
  • 2. Different uploads
    • – to allow the user to upload more video types all the videos were converted to flv in background and displayed them using a flash player
    • - multiple image upload using flash
    • - “on the fly” image upload
  • 3. The privileges management for the content elements and profiles
    We had to figure out a system which allows the user to share the same content element on more profiles and to share his/her profile with other users. When a profile is been shared, all the content elements present in that profile have to be shared as well with the owner of the second profile. The user has the possibility to change the shared profile with another user any time he/she wants by dragging the user from one profile column and dropping to another. The operations regarding the granting/revoking of privileges are handled in the background.
  • 4. Infinite scroll for all the available contents: wall messages, images from albums, albums list, blog posts
  • 5. Profile image upload and crop
    The user can upload the profile image using the so called “on the fly” image upload and then he/she will be able to position the image in the square as he/she wishes and can crop the desire parts of the picture using the pre-defined crop zones by drag & drop.
    Upon save three kinds of images will be cropped:

    • - one for the profile’s header
    • – one for the Home page
    • – one for the image that will be displayed on: comments, wall messages, search results

    We use ImageMagick for all the image operations: resize, crop, rotate.

  • 6. Search
    The main search combines the site’s contacts (public profiles) with a Facebook search (using Facebook Api), having the posibility to invite the Facebook contacts to the IdentityZ website.
  • 7. Drag & drop
    One of the biggest challenge regarding the user interface was the drag & drop functionality. In order to improve the user experience on the site, drag & drop is introduced on different elements: pictures, contacts, files, mails.

    • – the user can drag & drop attachments to the messages sent to other users
    • – the user can choose which identity is showed to another user from his/her contacts, this can be done using drag & drop to change the column where the contact is displayed
    • – the cover of a blog post can be set by drag & dropping the desired image
    • – mails and files and contacts can be moved to another profile by switching profile columns

    See the images for examples.

  • 8. Facebook and Twitter profiles
    These profile types will ask the user to provide the Facebook / Twitter account info and in order to retrieve all the contacts to the IdentityZ profile. After the profile activation the profile’s owner will be able to publish messages on the Facebook wall / Twitter directly from the IdentityZ account.
  • 9. Wall & news
    The wall contains all the messages generated by the system when another user takes and action to that profile: comment on blog post, comment an image, tag a picture, create an album, create a blog post and so on.
    The news collect all the messages generated for the logged in user and his/her contacts.

There are many more interesting features of the system, which are available at identityz.com. And stay tuned, more will come, to enhance even further the experience of the users.

The challenging nature of the user interface and the high level of complexity behind this social network infused us a dose of deadline related panic, but, at the same time, creating the site was a lot of fun and indeed an interesting job.

A social network system is always an opportunity to try new concepts and strive to meet up with the latest trends. An active system of this nature is always evolving and transforming, not just through the contribution of its community, but also with new concepts, new functionality and continuous improvements in the usability and performance of the features. Our aim is to actively continue to deliver the best solutions to the system, and apply the lessons that we have learned in order to bring extra value to our customers, in all the projects that we make.