Is there a simple css way to display text with every letter replaced with a filled square?
My idea was to find a font-family that has squares for all letters, but I didn't find anything like that existing. Google is no friend as it gives hits of posted issues with boxes that appear when fonts fail in some way.
Letters should be displayed as squares, not replaced with squares. Also, I need to be able to control the square fill color with the usual html/css.
I'm fine to use font-face, but am trying to avoid the learning curve for creating my own font.
Update: here is an example:
div.innerHTML = "some arbitrary text".
Should be displayed like this:
"■■■■ ■■■■■■■■■ ■■■■".
#NoobEditor is right although. Many online font editors available (e.g.: http://fontark.net/farkwp/ ), you can create such font family in few minutes and can embed with your app.
Get a square font, define it in your we page style, asign it to an object, a div must work, put your text there. Voila.
Related
Weather.com is the only example I know of that is doing this, showing a dashed red line under misspelled text instead of squiggles. This is on Chrome in Windows 7
What I'd like to replicate
Any ideas on how this is done? Unfortunately going to inspector clears text from the field.
What most sites show
This turns out to not be a style, but rather an effect of a precisely sized text box/precisely tuned line height. The squiggle is 2px tall, but the bottom 1px was cut off, giving it the appearance of a dashed line, but in fact it is not.
This method can be used to replicate the effect shown IF you are using a font where the letters that extend below the baseline don't go so far down that they touch the spellcheck squiggle.
It seems possible to move the squiggle independently of the text, which could possibly present a way to do emulate this style with any font.
If I find a way to do this, I will update further.
This is a browser feature that can be achieved (at least in Webkit/Blink) on input fields and contentEditable elements with spellcheck="true". Not every browser will implement it the same way. For that, you would have to build the text markers yourself in conjunction with a dictionary service (like Google Docs does, as one example).
https://jsfiddle.net/bn7pfyf3/
(change the "true"s to "false"s and you won't see any highlights on focus)
In Webkit/Blink, this is a DocumentMarker type (which is used for Ctrl+F, highlights, typos in input fields, and more). They are not exposed in the DOM or CSS.
https://github.com/crosswalk-project/blink-crosswalk/blob/master/Source/core/dom/DocumentMarker.h
I'm trying to figure out how to use small caps in text areas in AS3.
Right now I'm doing a work around were i wrote a function that replaces lower case letters with a capital letter in a smaller font size. This works OK, however the real Small Caps glyphs that are included in the font look better.
There is a reference here:
public static const CAPS_AND_SMALL_CAPS:String = "capsAndSmallCaps"
http://help.adobe.com/en_US/FlashPlatform/reference/actionscript/3/flash/text/engine/TypographicCase.html
however, I can't figure out how to apply it to a text area.
If you are using Flex, you can do it through CSS or directly through MXML for the Label class.
.className {
typographicCase: "capsToSmallCaps";
}
or
<s:Label styleName="className" typographicCase="capsToSmallCaps"/>
It doesn't appear you can set typographicCase on a standard TextField, however. Looks like you need to use different components in order to utilize it. See this Adobe document
If you know how to use styles in action script, I would suggest you use font-variant: small-caps for the text areas.
I would like to do a trimming of the text that I need to display in box on a web page.
The known parameters are Font Family, Font Size, the number of characters to display and the actual text and of course the width of bounding box.
I need to calculate where to trim the source text and where to put "..."
I have an idea but it is not too fast.
If there exist some other way to do the trimming maybe in CSS I would like to know it and I can accept it as a solution too.
You cannot calculate this ahead of time. You need to position the actual text in the browser and measure the output. You can do this off-screen using a negative text-indent if needed.
There are plug-ins for jQuery that can set an ellipsis based on a fixed-sized container with overflow.
See: http://archive.plugins.jquery.com/plugin-tags/ellipsis
So long as you don't need to support older browsers, you could use this simple css:
text-overflow:ellipsis;
http://www.w3schools.com/cssref/css3_pr_text-overflow.aspenter link description here
This question is a little specific and I am hoping someone here can shed some light on a potential solution for me.
All of the following points are important:
I am writing some HTML pages that are going to be read on a third party hand-held device.
In order to fit the requirements of this device each word must be in a separate span, this is for an upcoming feature of the device that I am not allowed to go into, but it has to be formatted like this.
This HTML is being converted from SVG, the SVG is created from Adobe Illustrator documents.
The only place I have any control of the creation of the HTML is in the conversion from SVG to HTML.
My problem is this, in SVG text is broken down into "text" nodes and tspan nodes. Look at this simple SVG, note how I am changing the Y coord on the first tspan.
<text><tspan y="50">Hello</tspan><tspan> World</tspan></text>
When this renders in a webkit based browser, like safari, the sentence "Hello World" is displayed with the word "World" right next to the word "Hello".
In my converted HTML example:
<div><span style="position:absolute;top:50px;">Hello</span><span> World</span></div>
"Hello" is displayed with a y offset of 50, however "World" is displayed in the top left corner origin of the page.
This is frustrating as I do not have the coords of where the "World" span should be placed in the SVG (as Illustrator does not need this coord to render it correctly). Also, there may be one or more tspans in the SVG with altered positions which will prevent me from applying the style to the div.
In short, does anyone know if there is an attribute I can set to place the second span directly after the first?
Thanks
You could style the div instead of the span
<div style="position:absolute;top=50px;"><span>Hello</span><span> World</span></div>
That would keep text-chunks together and positioned relative to each other, but you could still have a span for every single word
Have figured this out after trying a bunch of different things.
It is actually very straightforward, however I didn't realise spans could be nested so I am going to let myself off.
<div><span style="position:absolute;top:50px;"><span>Hello</span><span> World</span></span></div>
The trick is to wrap all the words that need to be grouped together in a span. Hopefully this helps anyone who is stuck on a similar issue.
In actionscript 3, my TextField has :
CSS styling
embedded fonts
textAlign : CENTER
autoSize : CENTER
... when italics are used the very right character gets slightly cut off (specially caps).
It basically seems that it fails detecting the right size.
I've had this problem before but just wondered is there a nice workaround (instead of checking textWidth or offsetting text etc.)?
Initialize your textField as you always do, using multiline, autosize, htmlText...
Then do this little trick :
// saving wanted width and height plus 1px to get some space for last char
var savedWidth = myTextField.width + 1;
var savedHeight = myTextField.height + 1;
// removing autoSize, wich is the origin of the problem i think
myTextField.autoSize = "none";
// now manually autoSizing the textField with saved values
myTextField.width = savedWidth;
myTextField.height = savedHeight;
Not that it is much comfort to you, but Flash sometimes has trouble with this seemingly simple task. CSS styling of html TextField was a nice addition but it has caused headaches for text-rendering. In fact I very rarely use CSS for styling text for that reason. I can only imagine that combining bold, italic and normal type faces within the HTML causes Flash to get some of the width calculations wrong which causes autoSize to set the mask a tiny bit short. I hope very much that the new text rendering engine in Flash Player 10 will finally fix these issues (it certainly looks better in theory).
So my solution is never to use HTML with the exception being when I require <a> links in my text ... and there are even some tricky text shifting issues there. In those cases I avoid mixing different font weights and font styles within the same text field. All other cases I use TextFormat directly on TextField.
I suppose if you can't get out of your current architecture (for some reason) you could try adding to the end of your html encoded strings. Or you could manually set the width of the field and not rely on autoSize (as you have mentioned). But if you keep on the CSS/HTML route you may find another new and painful limitation just when you don't want it.
I've had issues with TextField masks behaving differently in the Flash preview, and in the actual browser plugin. Usually, and this is strange to me, it would appear more correctly in the browser. Have you tried running the swf in a browser to see if the problem is actually an annoyance rather than a permanent problem?
I had said this:
My in-ideal approach to solving this is to attach a change event to the TextField which always adds a space after the last character of the field. And then to remember to trim this space off when using the value.
But that didn't take into account that this probably doesn't have a change event and that it's an HTML rendered text field. To add a trailing space in the HTML text field throw in an again, that's not really fixing the problem.