[1] 通过 article-style.css 调整发音库 Sound-En

deeke

171010：使用外链图床，更换图例。增加内容：“修改 dsl 词典的发音按钮”。
! o9 [$ P: J) P3 p- ?8 Y+ R% p, E------------------------------------------
0 E1 }4 b9 P# u* l. F$ T9 ]8 d7 ?3 B
! [  ^) Q0 E" N. s; p, q7 T------------------------------------------
感谢 Hugh 制作、分享的 英语发音库 ，这些年来一直在用。
我的软件环境是：Win8.1 + GoldenDict_Qt5_x64_portable 。

# c2 P1 t9 D3 a/ f1. 在网上找两个图片表示英音、美音。
改名为 snd_uk.png  、 snd_us.png ，放到 Sound-En.mdx 同一文件夹中。
我的屏幕小，所以用 64x64 的尺寸。


2. 在 GD 里找到 Sound-En 的词典编号。
鼠标右键“审查元素”，或直接按 F12 。每台电脑的词典编号并不相同。
: s: m% Q6 ?! P) ?! I7 f: k

1. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1

复制代码

3. 修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ” 。
1 k4 O7 l. g2 ]* t7 t$ `/ U' e调整各种 前后左右、高矮胖瘦。

1. /* Sound-En | Start */
   ( D9 v6 `; J0 p6 g: ^# Z
2. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 { font-size: .875rem; }
   + r1 P  J+ z! t& A- H$ f
3. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 b { margin-right: .5125rem; }
   : T+ y: g( P: N  T
4. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 i { color: gray; }
   6 ]9 c$ R  P1 a$ x8 }. w) ^' P" B$ E
5. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src$="Sound.png"] { display: none; }
   
6. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a>img[src*="snd_u"] {
   9 g' E; d/ Z9 @3 e* g
7.   position: relative;
   ! Y& p- c7 z9 q0 @
8.   right: .275rem;
   
9.   bottom: .045rem;
   
10.   width: 1rem;
    
11.   height: 1rem;
    9 q$ n1 K8 H5 e- I$ O0 O$ l
12. }
    
13. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a { text-decoration: none; outline: none; }
    - Y) X' s6 V* O5 I3 e
14. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a::after {
    : _: S9 v2 Z( b% Y% t6 F2 I3 ?9 J
15.   font-family: "Segoe UI Symbol";
    3 r5 s6 p# c. I. Q  S
16.   font-size: 1rem;
    
17.   position: relative;
    , s, e( O6 O7 m
18.   top: .065rem;
    & e) k" X1 h4 C5 w) _/ B5 u
19.   right: .2rem;
    : A. @+ P* ^. z
20.   content: "\1F50A";
    
21.   vertical-align: baseline;
    
22. }
    
23. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:link { color: black; }
    ) z& Y1 I4 d3 P1 |" B
24. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:visited { color: black; }
    
25. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:hover { color: purple; }
    
26. #gdarticlefrom-17608e25a8ab84dc7fab6e9476fc85d1 a:active { color: purple; }
    % s2 S8 C2 ]3 t) M2 F+ @
27. /* Sound-En | End */

复制代码

3 Q5 t3 p7 s9 ?; |2 ~1 `------------------------------------------
修改 dsl 词典的发音按钮

+ k" h8 z! m0 q+ ]  ^1 r! j) U修改 GD 的配置文件：“ c:\...\GoldenDict\portable\article-style.css ”。
) p" Y( P# C+ l! w

1. .dsl_s_wav>a>img { display: none; }
     E: O$ M" e+ r6 ~; f
2. .dsl_s_wav>a { text-decoration: none; outline: none; }
   
3. .dsl_s_wav>a::after {
   9 t, u# @& }; h9 O3 I$ o
4.   font-family: "Segoe UI Symbol";
   
5.   font-size: 1rem;
   0 D( h& S" R, k6 W
6.   line-height: 0;
   ' U  w2 V  w7 ~1 ?
7.   position: relative;
   6 l7 J/ D9 I: j% J9 S: C
8.   top: .065rem;
   , V' `  @* {% K+ T! K) Y
9.   content: "\1F50A";
   
10.   vertical-align: baseline;
    7 g0 d4 A8 G2 Z" {
11. }
    & P# J+ D3 q! e3 R- W
12. .dsl_s_wav>a:link { color: black; }
    
13. .dsl_s_wav>a:visited { color: black; }
    
14. .dsl_s_wav>a:hover { color: purple; }
    
15. .dsl_s_wav>a:active { color: purple; }

复制代码

------------------------------------------

  ~2 g- X/ C( w搞定收工，别忘了评分呦~~~

skydan05

谢谢deeke分享！

l-hz

安卓11开始好像识别不了了