CODEWITHSUNDEEP
htmlcss
Jim Hefferon
Jim Hefferon

Reputation: 43

Copy text from HTML that is other than the text there

I have some text on a web page referring to LaTeX, the formatter. In the HTML source the text is this. 

<span class="latex">L<sup>a</sup>T<sub>e</sub>X</span>

(Snippet is below including CSS.) When a user copies it, they get "LATEX", all caps. I would like them to get "LaTeX", which is the preferred spelling. Is there a (cross-browser) way to do that?

.tex sub,
.latex sub,
.latex sup {
  text-transform: uppercase;
  line-height: 0;
}
.tex sub,
.latex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
  line-height: 0;
}
.tex,
.latex,
.tex sub,
.latex sub {
  font-size: 1em;
  line-height: 0;
}
.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
  line-height: 0;
}
 <span class="latex">L<sup>a</sup>T<sub>e</sub>X</span>

Upvotes: 0

Views: 304

Answers (4)

Stickers
Stickers

Reputation: 78676

You can make a duplicate of the text with the original case "LaTeX", and wrap it into a span, set the color to transparent or rgba(0,0,0,0), and user-select: all; plus some position tricks, this is for copy & paste. Then set the other span to user-select: none; for display.

.container {
  display: inline-block;
  position: relative;
}

.duplicate {
  position: absolute;
  left: 0;
  top: 0;
  color: transparent;
  letter-spacing: -0.05em;
  -webkit-user-select: all;
  -moz-user-select: all;
  -ms-user-select: all;
  user-select: all;
}

.latex {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.tex sub,
.latex sub,
.latex sup {
  text-transform: uppercase;
  line-height: 0;
}

.tex sub,
.latex sub {
  vertical-align: -0.5ex;
  margin-left: -0.1667em;
  margin-right: -0.125em;
  line-height: 0;
}

.tex,
.latex,
.tex sub,
.latex sub {
  font-size: 1em;
  line-height: 0;
}

.latex sup {
  font-size: 0.85em;
  vertical-align: 0.15em;
  margin-left: -0.36em;
  margin-right: -0.15em;
  line-height: 0;
}
This is the
<div class="container">
  <span class="latex">L<sup>a</sup>T<sub>e</sub>X</span>
  <span class="duplicate">LaTeX</span>
</div>
logo.

Upvotes: 1

SvenTheDane
SvenTheDane

Reputation: 61

To leapfrog off Boris' reply, what I would do is create the following css:

.uppercase {
    text-transform: uppercase;
}

.lowercase {
    text-transform: lowercase;
}

Then for your code, use

<span class="uppercase">L</span><span class="lowercase">a</span><span class="uppercase">T</span><span class="lowercase">e</span><span class="uppercase">X</span>

The capitalization in your code won't matter since CSS is changing the case for you.

Upvotes: 0

Boris K
Boris K

Reputation: 1552

Use CSS text-transform Property

p.uppercase {
    text-transform: uppercase;
}

p.lowercase {
    text-transform: lowercase;
}

Upvotes: 0

James A Mohler
James A Mohler

Reputation: 11120

You need to change the

.tex sub, .latex sub, .latex sup {
  text-transform: uppercase;line-height: 0;
  }

To

.tex sub, .latex sub, .latex sup {
   line-height: 0;
  }

text-tranform is making the text uppercase

Upvotes: 1

Related Questions