CODEWITHSUNDEEP
javascriptjquerycsshtml
SamF
SamF

Reputation: 255

How to apply CSS to part of some text without breaking the text content itself

I am currently considering how to support a legacy web application in a new language(language here meaning spoken language - not code!).

I will be doing this using some form of javascript internationalisation library however I've stumbled upon an issue.

Currently the application can be driven solely by keyboard shortcuts - these short cuts are indicated to the user by underlining the letter of a function label on the screen which corresponds with a short cut.

For example:

<u>R</u>un
<u>J</u>ump
J<u>o</u>g

The problem is when these strings are replaced with tokens for internationalisation the strings are going to be stored as plain text and I would like to not have to tarnish these strings files with html tags(especially a tag which is discouraged nowadays anyway)

If we decouple logic to decide which letter to underline - which could well change with along with a language change - how could I go about underlining a single character in a string? Is it even possible?

//HTML
<a href="#" id="jump" data-i18n="action.jump"></a>

//Strings file
action.jump=Jump

//Javascript/JQuery
$('<someHowOnlySelectAParticularLetter('J')> #jump').css({text-decoration:overline});

function someHowOnlySelectAParticularLetter(var character){
   //TODO
}

Thanks in advance for any responses - even I haven't explained the issue at hand clearly please say so and I will attempt to clarify any questions!

Upvotes: 1

Views: 262

Answers (4)

Eric J.
Eric J.

Reputation: 150108

It is an admirable goal to separate data from presentation.

I don't think pure CSS will get you all the way there, without also having some supporting HTML markup.

You actually need the hotkey information in two places:

  1. In the UI markup
  2. In the code that processes key presses

I would suggest that you store the information about the hotkey in a format similar to:

// Word       Hotkey    Offset    Function    Language
// Sichern    S         0         Save        DE
// Springe    p         1         Jump        DE

(example above uses German).

Use that data to drive

  1. Rendering of the UI (e.g. when rendering to HTML markup, wrap the character position designated by Offset with a tag of your choice that matches your CSS rules.
  2. Have the code that captures key clicks and executes functionality use the same data.

Upvotes: 0

Gabriel S.
Gabriel S.

Reputation: 1943

If you want to keep using that design, you're gonna run into all sorts of problems.

  • What if the translated word doesn't have the letter shortcut you applied to your other language?
  • If a user gets used to a set of shortcuts and changes the language, are all the shortcuts he is used to going to change?

For example, Ctrl+S is a widely used shortcut for Save, even if some languages don't have a S in their translation of 'Save'. Change that letter to W, which is the common shortcut for Quit, and you're in for an unpleasant user experience.

I suggest you change your markup to

(R) Run
(J) Jump
(O) Jog

That way you only need to translate the word part, and leave the shortcut as it is.

Upvotes: 0

Sergiu Paraschiv
Sergiu Paraschiv

Reputation: 10153

What letter is "active" is language-dependent, so this info has to be stored in each language specific config file (translation table file):

English:
RUN: "Run"
RUN_ACTION: "R"

French:
RUN: "Courir"
RUN_ACTION: "C"

Then use this information (and meta-infromation) to generate your HTML:

function buildAction(label, letter) {
    return label.replace(letter, '<u id="action-' + letter + '">' + letter + '</u>');
}

var html = '<p>menu: ' + buildAction(RUN, RUN_ACTION) + ', ...</p>';
document.write(html);

Then you can $('#action-' + RUN_ACTION).css and $('#action-' + RUN_ACTION).click.

With this you only need to switch between translation table files.

I'd generate the HTML server-side though.

Upvotes: 1

bnjmn.myers
bnjmn.myers

Reputation: 439

It seems that you would have to use a little bit of RegEx (regular expressions) and .split to be able to grab that letter, store it in a variable and then style it with jquery's .css method.

Upvotes: 0

Related Questions