/    Sign up×
Community /Pin to ProfileBookmark

How implement tabs in text that’s selectable?

I want to implement tabs in text that’s selectable. The problem is, if I replace a tab with three non-breaking spaces (for example), then when the user selects the text, they can actually select into the middle of a tab.

What’s the solution?

to post a comment
JavaScript

3 Comments(s)

Copy linkTweet thisAlerts:
@slaughtersOct 21.2009 — How is selecting a tab related to replacing it with 3 non-breaking spaces?

What do you actually mean by "tabs in text"?
Copy linkTweet thisAlerts:
@6tr6trauthorOct 21.2009 — How is selecting a tab related to replacing it with 3 non-breaking spaces?

What do you actually mean by "tabs in text"?[/QUOTE]


I mean when there's text in a div and the user presses down with the mouse and drags it, it creates a selection (which you can see via window.getSelection() ). However, if you simply put a tab into a div (i.e. t), it won't show up, just like the same issues with spaces at the beginning of a line. So most people either use pre tags (which are very limited in terms of layout/formatting) or replace a tab with a number of non-breaking spaces.

the problem with replacing it with non-breaking spaces is that when a user selects text (by dragging the mouse, thus highlighting the text the cursor has gone over), it will select the non-breaking spaces individually. So their selection ends up in the middle of a tab.

NOTE: The short version: I mean the tab KEY, not a tab like in a browser, but the key on the keyboard that says "tab"
Copy linkTweet thisAlerts:
@rnd_meOct 21.2009 — will you miss <tt> ?

[CODE]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>tt as tab</title>
<style type='text/css'>
tt { margin-left: 2em; }
</style>
</head>
<body>

this is <tt /> tabbed in content.

</body>
</html>
[/CODE]

tested FF3.5, IE7
×

Success!

Help @6tr6tr spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.20,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...