Localize icons (not only their labels)

[chetan-rflx]

Is this a bug report or feature request? (choose one)

🐞 Bug report

💻 Version of CKEditor

Ckeditor5

📋 Steps to reproduce

1. Set the ckeditor locale as German for users login with German locale
   2 The bold, italics icons are not shown in German. We are seeing the icons for English locale

✅ Expected result

The editor should show german icons for Bold(B), Italics (I) as they are shown in microsoft office when locale is changed to German. Does Ckeditor support this? If not, when can this will be available?

📃 Other details that might be useful

[Reinmar]

Localizing icons is not supported yet. You would need to create your own icons and build CKEditor 5 with them (see https://ckeditor.com/docs/ckeditor5/latest/builds/guides/faq.html#how-to-customize-the-ckeditor-5-icons)

[chetan-rflx]

Our product support around 15+ locales and users can logged in with any of these locales. If we create our own icons specific to locale, is it possible to change the icons as per logged in users locale?

[ma2ciek]

Hi @chetan-rflx.

Version of CKEditor
Ckeditor4

Do you use CKEditor 5 or CKEditor 4? Because this repository is for CKEditor 5 issues only. If you want to create a CKEditor 4 issue than open it here.

[chetan-rflx]

Sorry my mistake. We are using ckeditor5. The issue is for ckeditor5.

[Reinmar]

Our product support around 15+ locales and users can logged in with any of these locales. If we create our own icons specific to locale, is it possible to change the icons as per logged in users locale?

Good question. Changing them in the runtime would require a different approach. @oleq @jodator do you have an idea how that could be achieved?

[jodator]

So the simplest way would be to add own toolbar items for localized versions.

import ClassicEditor from '@ckeditor/ckeditor5-editor-classic/src/classiceditor';
import Bold from '@ckeditor/ckeditor5-basic-styles/src/bold';
import Enter from '@ckeditor/ckeditor5-enter/src/enter';
import Heading from '@ckeditor/ckeditor5-heading/src/heading';
import Paragraph from '@ckeditor/ckeditor5-paragraph/src/paragraph';
import Typing from '@ckeditor/ckeditor5-typing/src/typing';
import Undo from '@ckeditor/ckeditor5-undo/src/undo';

import myIcon from '@ckeditor/ckeditor5-ui/theme/icons/dropdown-arrow.svg';

ClassicEditor
	.create( document.querySelector( '#editor' ), {
		plugins: [ Enter, Typing, Paragraph, Heading, Bold, Undo, localizedBoldPlugin ],
		// Use "localizedBold" instead of "bold".
		toolbar: [ 'heading', '|', 'localizedBold', '|', 'undo', 'redo' ]
	} )
	.then( editor => {
		window.editor = editor;
	} )
	.catch( err => {
		console.error( err.stack );
	} );

function localizedBoldPlugin( editor ) {
	// Define "localizedBold" UI component factory method.
	editor.ui.componentFactory.add( 'localizedBold', locale => {
		// Create original bold button.
		const boldButton = editor.ui.componentFactory.create( 'bold' );

		// Modify its properties - change icon.
		boldButton.icon = getIcon( 'bold', locale.language );

		return boldButton;
	} );
}

function getIcon( type, language ) {
	console.log( `Getting icon "${ type }" for language "${ language }."` );

	return myIcon;
}

As for more general approach I don't recall any API for that.

[chetan-rflx]

@jodator @Reinmar Thanks for your response. Let us try this out.

[oleq]

A more generic solution might be a little bit tricky. Let's take a look at what icon loading looks like for a simple feature now https://github.com/ckeditor/ckeditor5-basic-styles/blob/master/src/bold/boldui.js#L13.

To load localized icons, we'd need to either:

Use separate icons

...and load all of them like this

import boldIconDe from '../../theme/icons/bold-de.svg';
import boldIconFoo from '../../theme/icons/bold-foo.svg';
import boldIconBar from '../../theme/icons/bold-bar.svg';

and then use the right one

const icons = {
    de: boldIconDe,
    foo: boldIconFoo,
    bar: boldIconBar
};

// ...

view.set( {
	label: t( 'Bold' ),
	icon: icons[ editor.locale.language ],
	keystroke: 'CTRL+B',
	tooltip: true
} );

Aggregate them in a single file

...as layers and switch the layers (layer switching as a feature of the IconView:

import boldIcon from '../../theme/icons/bold.svg';

view.set( {
	label: t( 'Bold' ),
	icon: boldIcon,
        iconLayer: editor.locale.language,
	keystroke: 'CTRL+B',
	tooltip: true
} );

then the switching alogorithm would be very similar to this PoC on CodePen.

---

Both approaches will load all the icons for all locales, no matter what the build looks like and what subset of languages is supported in the build. And this is a bad news for us, because we'd produce bloated builds.

To do something smarter, we'd need webpack to filter out or narrow the imports. Not sure what is really possible, though.

To make it work with the first approach we'd need something like an array (object) of imported resources

import boldIcon from '../../theme/icons/bold-*.svg';

// ...

view.set( {
	label: t( 'Bold' ),
	icon: boldIcon[ editor.locale.language ],
	keystroke: 'CTRL+B',
	tooltip: true
} );

To use the second approach, we'd need to force webpack to use some tool to group the icons so

import boldIconDe from '../../theme/icons/bold-de.svg';
import boldIconFoo from '../../theme/icons/bold-foo.svg';
import boldIconBar from '../../theme/icons/bold-bar.svg';

is squashed and becomes a single icon with 3 groups we can then toggle in the IconView (like here).

import boldIcon from '../../theme/icons/bold-*.svg'; // -> a single icons with 3 SVG groups

TBH, I think the later does not sound so scarry because it's just a manipulation of XML, after all. Since all our icons are standardised, it boils down to stripping the <svg>...</svg> content and wrapping it in <g>.

Anyway, in both cases, webpack decides which icons to load (expand bold-*.svg) knowing the language of the build.

WDYT?

[Reinmar]

This sounds really interesting. We could indeed make webpack group such SVGs and make the IconView code able to read the right group.

Although, I'm not sure how people would then be able to provide more than one icon? Because if they'd use this approach then they can replace one icon with another icon, but not add more.

So, I'd rather say that it's enough if we make IconView compatible with grouped SVGs. And people should simply create an SVG containing a group of icons if they want to localize a specific icon.

I've got another issue with this solution, though – if you want to use an alternative version of an icon in 3 languages you need to have it tripled inside that SVG. A better format would be needed where one icon version may be used in more than one locale. Perhaps this is enough:

<g class="lang-foo,bar,bom">

[oleq]

<g class="lang-foo,bar,bom">

This could be just as well <g data-language="foo,bar,baz">. IconView will be able to figure that out easily.

Still, I see 2 problems with this approach:

• if, for instance, our bold.svg icon supports 3 languages (3 groups), whether those languages are included in the build or not, the icon will carry their groups (excess of data),
• editing such icons could be tricky; all programs will allow you to create groups but before the icon is saved
  • all groups would need to be visible (all layers (groups) on top of each other), which will look like a mess
  • once saved, the SVG will probably need manual XML editing to include the data-language attribute. Each time. This is what a sample SVG with 2 groups (one named "foo" and another named "bar,baz" in the program) exported by Sketch looks like

<?xml version="1.0" encoding="UTF-8"?>
<svg width="237px" height="237px" viewBox="0 0 237 237" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
    <!-- Generator: Sketch 52.6 (67491) - http://www.bohemiancoding.com/sketch -->
    <title>icon</title>
    <desc>Created with Sketch.</desc>
    <g id="icon" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
        <g id="bar,baz" transform="translate(8.000000, 8.000000)" fill="#FF0000">
            <rect id="Rectangle" x="0" y="0" width="150" height="150"></rect>
        </g>
        <g id="foo" transform="translate(83.000000, 93.000000)" fill="#00FFA2">
            <circle id="Oval" cx="66" cy="66" r="66"></circle>
        </g>
    </g>
</svg>

We have ids and maybe we could replace them with data- attribute but that would require some scripting on the webpack-side.

[CKEditorBot]

There has been no activity on this issue for the past year. We've marked it as stale and will close it in 30 days. We understand it may be relevant, so if you're interested in the solution, leave a comment or reaction under this issue.

[CKEditorBot]

We've closed your issue due to inactivity over the last year. We understand that the issue may still be relevant. If so, feel free to open a new one (and link this issue to it).