I want to display an account number on a website. To make it easier to read I'd like to put spaces in a couple of places to group the numbers. Easy. However, I'd like it so that when a user selects and copies that number, there won't be any spaces in the text when he pastes. So that it won't mess up online bank account fields that have a limit on number of characters for example.
Any ideas on how to solve this in a good way?
I'm thinking something along the following lines, but wondering if there are better ways.
// CSS
span.acc_no span {display:inline-block; margin: 0 .5em}
// HTML
<span class="acc_no">12345<span>12</span>1234</span>
Thats how I would do it. If you don't want the spaces to show up when you copy the number, then you need to use some sort of padding or margin to give the appearance of a space.
CSS:
.acc_no span {
display:inline-block;
padding-left:0.5em;
}
.acc_no span:first-child {
padding-left:0;
}
HTML
<span class="acc_no"><span>12345</span><span>12</span><span>1234</span></span>
Another option would be using :after pseudo tag.
Here is your Account number: <span class="AccountNumber"><span>12345</span><span>12</span><span>1234</span></span>
.AccountNumber span:before
{
content: " ";
}
http://jsfiddle.net/chrisvenus/DUsUN/
Though that might depend on your browser compatibility requirements...
Edit: Thanks to jasssonpet for pointing out to me that the implementation of copying differs by browsers... FF and chrome do not copy the spaces added this way. IE does. This means this is probably not the best solution but still an interesting one to note so I'm not getting rid of it. :)
Related
I'm trying to color code Hangul(Korean Language characters.) Each 'block' creates a syllable in Korean. Hangul is broken down into Jamo(similar to letters in English.) When you type the jamo/letters in Korean they often combine to create one syllable and the computer often treats that as one block. I want to be able to select a specific character reference among a list of character references that make up the syllables without using span. When I use span the character reference gets separated from the combined block. All I want to do it to know how I can select and color a specific character reference without separating it into a different block.
I have almost succeeded in what I want to do, but it requires using position:absolute; margin and z-index to make elements overlap to create the illusion of 1 block. But it doesn't nicely style the jamo to make it look uniform with the rest of the normal text. Also, I'm thinking there still might be a better way.
Character reference chart http://gernot-katzers-spice-pages.com/var/korean_hangul_unicode.html Below is an example of a list of mixed character references and regularly typed hangul. I can add spaces if I want to add space. When written like this, the hangul forms naturally into it's blocks due to using the chart from the link above. How can I select for example the ㅂ letter(ᆸ)
ᆸ
(last one in the list before 니다) and change it's color and not sperate it into it's own block?
<p>감사 합니다</p>
On display, it will look like this
감사 합니다
The way I can kind of make it work is with this code.
<style>
.element { font-size:16px; position:absolute; }
#element-1 { color:red; z-index:1; }
#element-2 { color:red; margin:0px 0 0 3px; z-index:2; }
#element-3 { color:green; margin:0px 0 0 0px; z-index:3; }
</style>
<body>
<div>
<p><span style="color:red;">네, </span>
<span id="element-1" class="element">ᄀ</span>
<span id="element-2" class="element">ᅡ</span>
<span id="element-3" class="element">ᆷ</span>
<span style="color:green; margin-left: 19px;">사합니다</span>
</p>
</div>
</body>
Which should display
네, 감시합니다
But the 감 doesn't look matched in style because I did span for each letter of 감 which puts each jamo in a relative part of each block and then used techniques to overlap them using z-index, margin and absolute position. The font-style when used as a seperate block is not the same when it combines naturally.
I think the easiest way to do things is if I can figure out how to select character references and change the color in CSS without creating a separate block.
In short, it's impossible with pure html/css.
As you know, Korean(Hangeul) jamos have different shape on diffent syllables. For example, ㄱ of 감 and ㄱ of 곤 has same code(x1100) but diffent shapes(the former is long at left, the latter is wide at top). There are 10 or more shapes for ㄱ(x1100) and the number of shapes are defined by font.
To fullfill your requirement,
You need to draw the jamo on canvas(or svg).
It's not easy but also not practical.
Nonetheless you want to challenge, see https://github.com/hatemogi/hallatype/blob/master/README.md
gg
gl
I am working with an HTML table that is misbehaving when it comes to semi-long lengths of text. The picture below is worth 1000 words. In the first cell shown, the text "Embroidered Lettering Only" becomes stretched out as far as 'between character spacing' goes. It looks like its happening on the next cell as well in the "FLOSS" text.
Is there an attribute that I can use to prevent this behavior? Most of my search results have mostly produced table spacing issues, not text inside of a cell. The only attribute on the table that relates to size is <table width="100%"> I would prefer to conquer this with an inline attribute, but I can work with almost anything.
Note that I have tried letter-spacing= "0" and other values, to no avail. It is modifying the spacing behavior, but a value of 0 does not change this to normal spacing in the screenshot example.
I don't think it matters, but this is HTML that is being converted to a PDF through the BFO engine, within a NetSuite environment
I've come across this issue using Netsuite / BFO, the solution is to use this CSS:
td p {
text-align: left;
}
Source (login required): https://usergroup.netsuite.com/users/forum/platform-areas/customization/bfo/397738-how-do-i-prevent-text-justification-advanced-pdf-freemarker-bfo
Marc B mentioned it in his comment, you probably have text-align: justify; somewhere in your CSS for the table. Try tracking that down and changing it to text-align: left;
For example:
table td {
text-align: justify;
}
Would want to be changed to:
table td {
text-align: left;
}
That being said, it's hard to know for sure without seeing your current markup and CSS, so it would probably be a good idea to add that to your post.
Problem: In one type of embedded styling "overflow:hidden" is working fine, and in another type of embedded styling it does not.
Here is the CSSDesk code (jsfiddle is not working as of this writing).
Background: In my project I have to use HUGE tables to show variables coming from a db - up to 75 variables per page. I tried my best using divs alone, but I wasted 20 hours and ultimately, I went back to tables (For you CSS purists, I apologize).
In some of my td's the data is a bit long, and needs to be "hidden" (it doesn't matter in this particular case because the data is just a "preview"). I've searched the web, and did an experiment in which the only styling element that could use "hidden" is a div (I tried tds and spans in an experiment and they don't work).
In one td, I'd like to put one variable on the left, and another on the right - most of the time, both will fit into the td, but on a very long variable it's OK to chop off part of the right variable. So, I write the CSS and html, and style the divs so that they meet my criteria - those are the upper two tds on the CSSDesk page noted above. Everything works fine.
BUT! Over the last few months I've learned that it's possible to "mix" multiple styles in the "class" part of the element identifier (e.g. <td class="redcolor blueunderline">) and I've found that on many occasions it is VERY convenient to use "little additions" on an element that is the only one on a page, and you'd have to rewrite/add a whole embedded style or change the style sheet (e.g. Name, address, phone number, zip and you only want to "bold" the name - class="identifers" vs class="identifiers bold") - I wonder if you experts ever do something like that?
So I played a bit and got most of it working EXCEPT for the "overflow:hidden".
For the upper left div in the CSSDesk example I use this CSS and html (it works great):
.leftdivclass {
float:left;
background-color:green;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<td><div class="leftdivclass" >Upper Left 123456789</div>
For the upper right div in the CSSDesk example I use this CSS and html (it works great):
.rightdivclass {
float:right;
background-color:red;
color:black;
border:2px solid yellow;
overflow:hidden;
white-space:nowrap;
width:25%;}
<div class="rightdivclass" >Upper Right 123456789</div></td>
For the lower left div in the CSSDesk example I use this CSS and html (everything works but the "hidden" - note the numbers sticking out)
.floatleft {
float:left;}
.bgblue {
background-color:blue;}
.bgred {
background-color:red;}
.lcwhite {
color:white;}
.lcblack {
color:black;}
.border2y {
border:2px solid yellow;}
overflowhidden {
overflow:hidden;}
.wsnowrap {
white-space:nowrap;}
.width25pc {
width:25%;}
<td><div class="floatleft bgblue lcblack border2y overflowhidden wsnowrap width25pc">Lower Left 123456789</div>
But if I use the same html and add "style="overflow:hidden" everything works fine, like in the lower right example of the CSSDesk example.
<div class="floatright bgred lcblack border2y overflowhidden wsnowrap width25pc" style="overflow:hidden;">Lower Right 123456789</div></td>
Questions:
Why would a single embedded css style containing "overflow:hidden" work, yet when it is parsed out to a single addition to a class command it doesn't work? And why would it work if I added "style="overflow:hidden" - inline?
Do you experts ever use little "class snippets" like this?
Again, I thank you in advance.
You can mix and match these classes. If it saves redundancy, great. If it confuses classes and container classes (i.e. the parents they are inside of) then it gets kind of hard to debug your problem.
Most likely it's not working because either its parent or another class is conflicted with the overflow property. Inline styles like style="overflow:hidden;" almost always get prioritized the highest, but remember that overflow has a default property of visible.
If you call 2 classes, one having overflow:hidden; and the other overflow:visible;, then there's a chance that you won't get your desired effect.
Keep in mind, too, that a selector like this
#divid .divclass
will always win over
.divclass
and will be treated with greater priority.
Also, have you tried
overflow:hidden !important;
which tends to take precedence over everything. Hope that helps.
I have a HTML page where I am listing pictures of people and their names. If there name is longer than 20 characters I want it to show up on 2 lines instead of one to avoid a lot of empty horizontal space for the people below them
What is the simplest way to make sure to do this. To be clear, I don't want to break up words in name but rather just break up the words on two lines.
You can try setting the width of the container that holds the name to be smaller or alternatively add some padding. For example:
HTML
<div class="name">This is my name</div>
CSS
.name { width: 50px; /* or whatever value works for you */ }
You would rather need to decide what is the maximum width that the name can take. Then,
.boxed-name { width: ?? px;text-align: ??; }
The main issue with a character counting solution is that it doesn't consider the font family neither the font size. This can lead to serious differences. Also, mmmmmmmmmmmmmmmmmmmm can be longer than iiiiiiiiiiiiiiiiiiii if the current font is not fixed.
I recently had an idea for using the CSS pseudo-class :hover to display a styled tooltip when the mouse is hovered over a link.
The basic code for the link looks like this:
.hasTooltip {
position:relative;
}
.hasTooltip span {
display:none;
}
.hasTooltip:hover span {
display:block;
background-color:black;
border-radius:5px;
color:white;
box-shadow:1px 1px 3px gray;
position:absolute;
padding:5px;
top:1.3em;
left:0px;
max-width:200px; /* I don't want the width to be too large... */
}
This link has a tooltip!<span>This is the tooltip text!</span>
The result is exactly what I want, but with one annoying problem: the span does not expand to accommodate text, and if I don't specify a width, the text is squashed.
I did some searching on Google, found a couple examples of work people had done (this example is creepily similar to what I've gotten), but no one seems to have addressed the span width problem I'm having.
I know this answer is extremely late, but it appears the key to your issue would be to use:
white-space: nowrap;
inside of your span, and get rid of any sort of width definition. Of course the drawback to this will be that the tooltip will only be able to support a single line. If you want a multiline solution you will most likely have to use javascript.
Here is an example of of this method:
http://jsbin.com/oxamez/1/edit
An added bonus is that this works all the way down to IE7. If you do not need to support IE7, I would suggest folding the span, and img styles into a :before, and :after for the .tooltip. Then you can populate the text using the data-* attribute.
I don't think there's a perfect solution to this problem with pure CSS. The first problem is that when you place the span inside the a tag the span only wants to expand as far as the width of the link. If you place the span after the the a it's possible to get close to what you're trying to do but you'll have to set the margin-top: 1.3em and then have to set a negative margin to slide the tooltip left. However, it's going to be a fixed setting so it won't sit exactly at the start of each link.
I whipped up a jQuery solution that sets left dynamically (and a nice little fade effect for good measure).
Demo: http://jsfiddle.net/wdm954/9jaZL/7/
$('.hasTooltip').hover(function() {
var offset = $(this).offset();
$(this).next('span').fadeIn(200).addClass('showTooltip');
$(this).next('span').css('left', offset.left + 'px');
}, function() {
$(this).next('span').fadeOut(200);
});
These tool tips can also be integrated into a word press theme easily. Just copy the CSS into your style. Css file and when creating your posts, just take help of the HTML code and create your own tool tips. Rest is all styling, which can be altered according to your own choice. You may also use images inside the tool tip boxes.
http://www.handycss.com/how/how-to-create-a-pure-css-tooltip/
Even though this question is a bit older already, I would suggest the following compromise:
Just use max-width: 200px; and min-width: 300%; or so,
whereas the min-width could result higher than the max-width.
Just figure it out.
This way you could not have entirely liquid tooltips but the width would stand in kind of a correlation with the width of the containing link element.
In terms of optical pleasantness this approach could be of value.
edit:
Well I must admit it is nonsense what I wrote. When the min-width can be higher than the max-width, there is no sense to it.
So just putting the min-width in percent would achieve what I tried to suggest.
Sorry for that.
I found this and it was working for me. It's a good solution when you have a lot of elements and jquery plugins on the same page and you can't work with
Text <span>Tooltip</span>
View pure CSS solution: JS BIN
Credit to trezy.com