Here I show two ways how to achieve this, (that is adding the attributes to the tags, not the tuna-sandwich part).
Case 1 in Drupal 6 wysiwyg with Tinymce, and Case 2 in Drupal 7 with CKEditor. Goal is to select a part of the html, and add a language attribute. Or to the containing tag or to add a span tag...
<tag>Lorem ipsum and so forth</tag>
should become
<tag lang="en">Lorem ipsum and so forth</tag>
CASE 1 Drupal 6
D6 site, with the WYSIWYG module using tinymce
1. Add html attributes button to your RTE
1.1 Go to Administer > Site configuration > wysiwyg profiles
1.2 edit any of the profiles where you want the users to be able to add the language attribute
admin/settings/wysiwyg/profile/1/edit
1.3 Open 'Buttons and plugins'
1.4 Check 'HTML attributes'1.5 Save
Result: How to add a language identifier
In your browser you can now find a new button
a. Select part of a text and click this button
This opens up a popup screen where you can add attributes
b. Behind language add the language identifier for the language usedf.i. en (english), nl (dutch) etc.
See also http://www.w3schools.com/tags/ref_language_codes.asp
c. Click insert
And the language identifier is added to the tag containing the textpart.
NB!
If you add an identifier to a part where a mother tag already contains the same language identifier, the identifier is not added. This seems logical because there is no need for this identifier at all.
Problem: adding lang attribute to inline tags
You cannot add attributes to inline tags like <span>
This is really annoying cause you have lots of cases where the other language words or sentences are inline with the other text. Like when I tell you the Dutch word for annoying is irritant.
Solution: use <em>
NB!
a. First make the text part italic!
b. Then select part of the inside italic text, not all, and add the language identifier.
c. Save
If you select the whole italic part (including the em tags), the system will find the nearest containing tag and add the language identifier to that one.
d. To avoid the other language being shown as italic, you can target this em element with the language selector in the css.
http://www.w3schools.com/cssref/sel_lang.asp
So like when you main language identifier is english
em:lang(nl),em:lang(fr), em:lang(ge)
font-style:normal;
}
NB!
Adding the em:lang(en) in the above css would change all em to normal, because the language selector simply looks for any language identification, may it be in the tag itselve, or in the header of the document like <html lang="en" dir="ltr" xml:lang="en" xmlns="http://www.w3.org/1999/xhtml">
<em lang="zh-Hant">希望對您有所助益<em>
PROBLEM!
There is a major problem in Drupal concerning these attributes. From the accessiblity viewpoint, it should be very simple to add a language attribute to every element. But I have to figure out yet how to add a language attribute to a field like the title. (Or the resulting display of this in a nodereference rendering)There are two language layers here you have to consider: The field language, which simply identifies in which languagepart of the site you want this field to show up, so in case of content translation this is the context language of the container entities, in case of field translation it is the [lang] part of the field.
For instamce, Being Dutch have nodes with partly Dutch and English titles: "Presentatie resultaten onderzoek 'Designed to Last' op 8 oktober 2014".
Trying to convince my governmental organisations to change the titles of their reports to solid Dutch does not work, so I have to deal with this. The result should be
<h1>Presentatie resultaten onderzoek <span lang="en" xml:lang="en">'Designed to Last'</span> op 8 oktober 2014</h1>
I solved it using a jquery on the specific nodes with these kinds of titles, but thats rather an unsatisfying solution.
CASE II : Drupal 7
So, I figured out how to do this in Drupal 7 with CKEditor. There is a CKEditor plugin you can install and download
Of course, because why should life be easy, there are some irritating bugs or features or whatever....
0. Plugin
You can download the plugin from here
https://github.com/fredck/CKEditor-Languages-Plugin
In the example hereunder my module path is
/sites/all/modules/contrib/ckeditor
and I've installed the ckeditor itself in
/sites/all/modules/contrib/ckeditor/ckeditor
1. Now make a folder 'languages' in
/sites/all/modules/contrib/ckeditor/ckeditor/plugins
2. put plugin.js and icon.png in this folder
/sites/all/modules/contrib/ckeditor/ckeditor/plugins/languages
3. open ckeditor.config.js in the root of your module and add these lines
config.extraPlugins = 'languages';
// The languages you want to support (code:name).
config.language_list = [ 'de:German', 'fr:French', 'es:Spanish', 'it:Italian', 'en:English' ];
NB! This is different from the installation instructions on GIThub.
4. Clear your Drupal cache AND clear your browser cache
(the ckeditor does not clear its javascript files on the normal Drupal cache clear)
5. Go to your CKEditor settings and add the languages button to your editor
(In an older version the visual UI did not work, but the manual did. Now this seems ok)
6. Content filters
You'd probably might have to change you content filters to allow for these attributes, but apart from that it should work. I had to add
p h1 h2 h3 h4 em span [*]
under the extra allowed content in the ckeditor setting for my filtered and full html
(/admin/config/content/ckeditor/edit/Filtered)
For more infor on this see http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
7. Rejoice in many languages
And yes, ganz lustig, it works
6. Content filters
You'd probably might have to change you content filters to allow for these attributes, but apart from that it should work. I had to add
p h1 h2 h3 h4 em span [*]
under the extra allowed content in the ckeditor setting for my filtered and full html
(/admin/config/content/ckeditor/edit/Filtered)
For more infor on this see http://docs.ckeditor.com/#!/guide/dev_allowed_content_rules
7. Rejoice in many languages
And yes, ganz lustig, it works
And yes, <span dir="ltr" lang="de" xml:lang="de">ganz lustig</span>, it works
No comments:
Post a Comment