[TxMt] Re: All purpose CSS Image Drag Command

Brett Terpstra brett at circlesixdesign.com
Sat Oct 28 16:10:08 UTC 2006


That awk warning translates as something about the escape seqenuce  
treated simply as...  but I don't know what it is and I don't get a  
warning...  I suppose it can't hurt to redirect just in case.  Under  
what circumstances does the warning appear?

I don't tend to use display:none to hide text when replacing  
images... I'd prefer to use text-indent:-9000px for accessibility  
reasons.  It's still got issues if you view the page with CSS but  
images turned off, but it shows up for screen readers that way.  I  
would also need a tab stop on the "span", as I often use h1 tags  
inside of divs when replacing images.

All that being said, your assumption that dragging an image onto an  
empty source.css scope more than likely indicates the creation of an  
image replacement technique is probably correct.  From an  
accessibility standpoint, if you're going to use background images,  
then replacing text is the only way to provide "alt" tags.  But using  
display:none overrides the usefulness of the method, so it would be  
my suggestion that it be substituted with text-indent and that the  
"span" be tab-stopped in addition (that's 10 tab stops! might be  
excessive).

Brett

On Oct 28, 2006, at 3:04 AM, pierre pracht wrote:

> Brett Terpstra wrote:
>> Great idea from porneL, it now inserts a tab-stopped selector,  
>> background:, width: and height: for the dragged image if it's  
>> dropped into a source.css or course.css.embedded.html scope  
>> outside of a meta selector.
>
> And why not build the CSS selector to hide inner text.
>
> In the same time I suppress awk warning :
> awk: AVERTISSEMENT:séquence d'échappement « $ » traitée simplement  
> comme
> «  »
> I redirect StdErr to Null.
> But I don't know if it's the way to do it in TextMate/awk ?
>
> Best, Pierre Pracht
>
> <?xml version="1.0" encoding="UTF-8"?>
> <!DOCTYPE plist PUBLIC "-//Apple Computer//DTD PLIST 1.0//EN"  
> "http://www.apple.com/DTDs/PropertyList-1.0.dtd">
> <plist version="1.0">
> <dict>
> 	<key>bundleUUID</key>
> 	<string>4675F24E-6227-11D9-BFB1-000D93589AF6</string>
> 	<key>command</key>
> 	<string>if echo "$TM_SCOPE" | grep -q meta.property-list.css
>    then
> 	if echo "$TM_SCOPE" | grep -q meta.property-value.css
>        then
> 		if echo "$TM_CURRENT_WORD" | grep -q url\(\)
> 			then echo -n "'$TM_DROPPED_FILE'"
> 		elif echo "$TM_SCOPE" | grep -q string.quoted.single.css
> 			then echo -n "$TM_DROPPED_FILE"
> 		else
> 			echo -n "url('$TM_DROPPED_FILE')"
> 		fi
> 	else
> 		echo -ne "background:\${1: #\${2:DDD}} url('$TM_DROPPED_FILE')\ 
> ${3: \${4:repeat/repeat-x/repeat-y/no-repeat} \${5:scroll/fixed} \ 
> ${6:top/center/bottom/x-%/x-pos} \${7:left/center/right/y-%/y-pos}}; 
> \n\$0"
> 	fi
> else
> 	echo -ne "\${1:#selector} {\n	background: url('$TM_DROPPED_FILE')\$ 
> {3: \${4:no-repeat} \${5:scroll} \${6:top} \${7:left}};\n"
> 	sips -g pixelWidth -g pixelHeight "$TM_DROPPED_FILE"|awk '/ 
> pixelWidth/  { printf("	width: %dpx;\n",  $2) } /pixelHeight/  
> { printf("	height: %dpx;\n}\$0", $2) }' 2>/dev/null
> 	echo -ne "\${8:\n\$1 span {\n	display: \${9:none/hidden};\n\}}"
> fi</string>
> 	<key>draggedFileExtensions</key>
> 	<array>
> 		<string>png</string>
> 		<string>jpeg</string>
> 		<string>jpg</string>
> 		<string>gif</string>
> 	</array>
> 	<key>name</key>
> 	<string>Insert Image URL</string>
> 	<key>output</key>
> 	<string>insertAsSnippet</string>
> 	<key>scope</key>
> 	<string>source.css, source.css.embedded.html</string>
> 	<key>uuid</key>
> 	<string>6ED38063-8791-41BB-9F9F-F9EA378B1526</string>
> </dict>
> </plist>
>
>
> ______________________________________________________________________
> For new threads USE THIS: textmate at lists.macromates.com
> (threading gets destroyed and the universe will collapse if you don't)
> http://lists.macromates.com/mailman/listinfo/textmate




More information about the textmate mailing list