I am wondering if it is possible to make the font/text inside of an input field overlap the input field itself. I'd like to know if this is possible without doing something like creating two input fields with one overlapping the other and one having a hidden field box.
For instance, say you have a font that looks like handwriting and you want the descenders of lowercase letters (the bottom parts of "p" "y" "g" for instance) to hang below the field box rather than get cut off by it - similar to how handwriting extends below the baseline when writing on lined paper.
I've done extensive searching with little luck, so even if someone knows of a better search term than "text overlapping input-box" and similar such strings, that in iteself would be a tremendous help.
The thing is, I don't know of a CSS selector that just focuses on the text inside the input-box or I would try to increase the z-index of the text so that it would be on a layer above the box.
Have you tried setting a background image on the input element? Your background image could be the line.
i.e.
input {
background: url(path/to/image.png) repeat-x;
}
EDIT:
I've had a quick play with this and have got something up and running here: http://jsfiddle.net/qUc9Y/
I've wrapped the input in another element (fieldset.input-wrapper) and moved your CSS transitions to this new element. I've pushed the input down relatively 10px so it overhangs the shadow created by the container. I've set the background of the input to transparent so the box shadows on the .input-wrapper are visible through it.
Finally, I've added some quick jQuery so that when the input is hovered, the css transitions are applied to the new .input-wrapper container (i.e. the input's parent). You should be able to do the same for focus/blur.
I hope this helps.
EDIT 2:
The focus state should now work too, see http://jsfiddle.net/yZ3uw/14/ .
Related
Is there any way to set white space visible for a given scope?
I'm working on modifying a color scheme to suite my liking and would like to be able to show spaces within a given scope. I haven't seen anything suggesting it's possible within the color-scheme documentation on Sublime's website.
For my specific case, and I imagine there's other useful cases, I'm working with Markdown and want to highlight a double-space line-break. I'm able to set the background, but this doesn't look quite right. I'm hoping to be able to make whitespace visible for this small scope and change the foreground color to make it stick out.
The short answer to your question is no; or rather, Yes, but only in the way that you've already discovered.
Color schemes can only apply foreground/background colors to scopes as well as bold/italic font weights. So assuming that there is a specific scope detected by the syntax you're using that is used for the things you're trying to highlight, the only thing the color scheme can do is alter the background color to make them visible.
The only thing that can render white space natively is the draw_white_space setting, which at the moment only allows you to turn it off everywhere, turn it on everywhere, or turn it on only for selected text. In this case that doesn't really help.
There are possibilities for something like this in the plugin realm though (these examples can be tested by opening the Sublime console with View > Show Console or Ctrl+` and entering the code in there; they also assume that you're using the default Markdown syntax):
view.add_regions("whitespace", view.find_by_selector("punctuation.definition.hard-line-break.markdown"), "comment", flags=sublime.DRAW_NO_FILL)
This will cause all of the hard line breaks to be outlined as if they were find results; the color is selected by the scope (which is comment here); that would make them visible without making the whole character position have a background color.
view.add_regions("whitespace", view.find_by_selector("punctuation.definition.hard-line-break.markdown"), "comment", "dot", flags=sublime.HIDDEN)
This will add a dot (colored as a comment) in the gutter for lines that end with this scope; you can also combine this with the previous example to outline them and also call attention in the gutter.
style = '<style>.w { color: darkgray; }</style>'
content = '<body id="whitespace">' + style + '<span class="w">ยทยท</span></body>'
phantom_set = sublime.PhantomSet(view, "whitespace")
phantoms = [sublime.Phantom(r, content, sublime.LAYOUT_INLINE) for r in view.find_by_selector("punctuation.definition.hard-line-break.markdown")]
phantom_set.update(phantoms)
This uses Sublime's ability to apply inline HTML phantoms into the document in order to inject a small inline sequence of two unicode center dots immediately between the actual whitespace and the text that comes before it. Here the content can be what you like if you can generate the appropriate HTML; we're just applying a color to the text in this example.
A potential downside here is that the characters you see in the inline HTML aren't considered to be part of the document flow; the cursor will skip over them in one chunk, and they're followed by the actual whitespace.
The result of this example looks like this:
Going the plugin route, you'd need an event handler like on_load() to apply these when a file is loaded and on_modified() to re-update them after modifications are made to the buffer. There may or may not be a package that already exists that has implemented this.
I would like to generate some diagram style graphics using SVG and use text in the diagrams. My problem is, how to know the size of the text in advance to be able to adjust the rest of the layout accordingly. To make this explicit: I'm not talking about SVG in a browser. I would like to work with fixed units and generate PDF for printing for example. So if I use a 12pt font, it should also be printed as 12pt font.
To have a more concrete example: Lets assume I have the three strings "bla", "blablub" and "blubblablub". I would like to print them in a given 12pt font, determine the string size and enclosing boxes and draw the biggest sized box around all of them. The idea is to have equally sized boxed around all, based on the longest text.
Could somebody give me a hint how to do that or why it is not possible? Searching for this topic, I only get some JavaScript tricks in the browser, which usually involves rendering the text and then re-rendering everything again.
I'm drawing activity diagram by Enterprise Architect 12. The diagram type is Activity under UML Behavioral. I found the positions of the labels of connectors are close to the target element as shown in the picture. It's very confusing.
How to change the default label positions to make them close to the source element as shown in picture?
Or is there any easy way to change the label of connector from Target Top Label to Source Top Label?
Better you use Guards for the label which you find in the Constraints tab. These appear in the middle label position and enclosed in square brackets. This is actually what you want to show.
For your amusement here's my original answer
There is no way to change the label position the way you want it out-of-the-box. You will need to write a script to do that.
There are two ways to accomplish such a script. The most comfortable is to use an add-in that responds to EA_OnPostNewConnector. You would then need to check whether the connector is one from a Decision to an Action and move the label accordingly.
The second one is to have a simple script (you might edit in EA's scripting window) that you run for an open diagram to scan for all Decisions in a diagram and alter the label position accordingly.
Altering the label
Once you got a connector from a Decision to an Action at hand you will need to change the label position like this:
get the according connector from DiagramLinks since it has the label position
get the element IDs from Connector.ClientID and .SupplierID and retrieve the elements with Respository.GetElementByID(<id>)
assign both elements to either decision or action by looking into the Element.Type
get the according DiagramObjects from the diagram which match the both elements (so you can get their position on the diagram)
now it's time for a little trigonometry: the position (DiagramElement.Left, .Right, .Top and .Bottom contain the appropriate coordinates) of the two elements makes out a vector at which end you calculate (I will leave you some fun) the label position where you think it should go
finally you take this coordinate and put it into the label position (see below).
The label position is stored in DiagramObject.Geometry. This is a semicolon separated string where one tag is LRT=<colon-list>;. <colon-list> itself is a colon-separated list where two are something like OX=-1:OY=-71: and represent the label position. This is a position relative to the "normal" position where the label is placed initially by EA.
So all in all: lot's of fun awaiting you :-/
Has anyone figured out a way to dynamically mutate text on the screen without triggering a render?
A large part of my screen utilizes setNativeProps for moving parts, meaning that the animations become lagged despite using shouldComponentUpdate. I would like to use the Text tag instead of the TextInput tag workaround suggested in this post for stylistic reasons.
Best case scenario is a workaround that involves setNaiveProps as it would follow the pattern of the rest of the screen; however, I currently plan to render all the numbers 0-9 on the screen an move them into place at the moment, so any help would be greatly appreciated!
As it turns out, you can actually format TextInputs the same exact way as Text elements (from what I have tested). For placing text horizontally, you have to set the width (something I had trouble with before). For those still interested in the original question however, you can nest TextInputs inside of a Text Element (one per text element because there is no justification and it automatically places them in a row). Styling applied to the Text Element will apply to the TextInput.
The idea is like the inverse of Ishihara test (http://www.colour-blindness.com/colour-blindness-tests/ishihara-colour-test-plates/).
I want to create with GIMP an image that showing something and then if I add a color layer, for exemple green glasses, then I see something new appearing.
I've searching far in Google and so but didn't found anything. Do you know how would I make this?
The Ishihara tests use the principle of combining things color blind persons cannot differentiate.
Coloured glass filters will only remove other colours from what you see. They don't add something. Therefor it is not possible to create a digital image that contains no information unless seen through a colour filter.
The only thing you can do is overlap your "hidden" information with high contrast colour noise.
Like here:
Using the glasses / filter only improves the visibility. The information is not added. It was always there.