SALT-NLP/Design2Code
This dataset consists of 484 webpages from the C4 validation set, serving the purpose of testing multimodal LLMs on converting visual designs into code implementations. Each example is a pair of source HTML and screenshot ({id}.html and {id}.png). See the dataset in the huggingface format here. Note that all images in these webpages are replaced by a placeholder image (rick.jpg) Please refer to our project page and our paper for more information. Example Usage For example, you… See the full description on the dataset page: https://huggingface.co/datasets/SALT-NLP/Design2Code.
221.8k
1<!DOCTYPE html>2<html>3 <head>4 <style>5 /** Color customization **/6:root {7 --text: #F1F1F1;8 --background: #012030;9 --accent: #45C4B0;10}11 12/** Reset some basic elements */13body, h1, h2, h3, h4, h5, h6, p, blockquote, pre, hr, dl, dd, ol, ul, figure {14 margin: 0;15 padding: 0; 16}17 18/** Basic styling */19body {20 font-family: 'Rubik', sans-serif;21 font-size: 28px;22 line-height: 150%;23 font-weight: normal;24 color: var(--text);25 background-color: var(--background);26 margin: 120px auto;27 padding: 0 32px;28}29 30/** Images */31img {32 width: 100%;33 height: auto;34 vertical-align: middle;35}36 37.e-content img {38 margin: 14px 0 44px 0;39 border-radius: 4px;40}41 42/** Figures */43figure > img {44 display: block;45}46 47figcaption {48 font-size: 17.5px;49}50 51/** Lists */52ul, ol {53 margin-left: 40px;54}55 56li > ul, li > ol {57 margin-bottom: 0;58}59 60ul li:last-of-type {61 margin-bottom: 26px;62}63 64/** Headings */65h1 {66 margin-bottom: 30px;67}68 69h1, h1 a, h1 a:visited {70 font-size: 58px;71 line-height: 120%;72 color: var(--text);73 text-decoration: none;74 letter-spacing: -.5px;75}76 77.h-entry h1 a {78 color: var(--text);79 text-decoration: none;80}81 82.h-entry h1 a:hover {83 text-decoration: underline;84}85 86h2, h4, h5, h6, p, blockquote, pre, ul, ol, dl, figure, .highlight {87 margin-bottom: 26px;88}89 90h1, h2, h3, h4, h5, h6 {91 font-weight: bold;92}93 94h3 {95 font-size: 18px;96 font-weight: bold;97 text-transform: uppercase;98 letter-spacing: 2px;99 color: var(--accent);100 margin: 0 0 28px 0;101 display: inline-block;102}103 104.seperator {105 color: var(--accent);106 margin: 0 4px 0 -8px;107}108 109/** Links */110.e-content p a, .e-content p a:visited {111 color: var(--text);112 text-decoration: underline;113}114 115.e-content p a:hover, .h-entry a:hover {116 color: var(--accent);117}118 119a, p a {120 transition: all .2s ease;121 color: var(--text);122}123 124a:hover, p a:hover {125 color: var(--accent);126}127 128h3 a {129 color: var(--accent);130 text-decoration: none;131}132 133h3 a:hover {134 text-decoration: underline;135}136 137/** Blockquotes */138blockquote {139 font-size: 28px;140 padding-left: 36px;141 color: var(--text);142 margin: 32px 0 24px 0;143 border-left: 10px solid var(--accent);144}145 146blockquote > :last-child {147 margin-bottom: 0;148}149 150/** Code formatting */151pre, code {152 font-size: 24px;153 border-radius: 4px;154 background: #00000050;155 color: var(--text);156}157 158code {159 padding: 4px 8px;160}161 162pre {163 padding: 24px 32px;164 overflow-x: scroll; 165 margin: 36px 0;166}167 168pre > code {169 border: 0;170 padding-right: 0;171 padding-left: 0;172}173 174/** Wrapper */175.wrapper { 176 max-width: 900px;177 margin: 0 auto;178 padding: 0 32px;179}180 181@media screen and (max-width: 800px) { 182 .wrapper {183 max-width: -webkit-calc(800px - (30px));184 max-width: calc(800px - (30px));185 padding-right: 15px;186 padding-left: 15px; 187 }188}189 190/** Clearfix */191.wrapper:after, .footer-col-wrapper:after {192 content: "";193 display: table;194 clear: both; 195}196 197/** Site header */198.site-header { 199}200 201img.site-image {202 border-radius: 100px;203 width: 100px;204 margin-bottom: 40px;205}206 207.site-title {208 font-size: 56px;209 letter-spacing: -.25px;210 margin: 0;211 color: var(--text);212 text-decoration: none;213}214 215.site-title, .site-title:visited {216 color: var(--text);217}218 219.navigation {220 line-height: 100%;221}222 223.navigation a.page-link, .date, a.date, footer p, footer p a {224 font-family: 'Roboto Mono', monospace;225 text-decoration: none;226 font-size: 18px;227 text-transform: uppercase;228 font-weight: bold;229 letter-spacing: 1px;230 color: var(--text);231 opacity: .4;232 margin-right: 14px;233}234 235.navigation .page-link {236 line-height: 100%;237}238 239.navigation a.page-link:hover, a.date:hover {240 color: var(--accent);241 text-decoration: underline;242 opacity: 1;243}244 245.post p.date {246 margin-bottom: 0;247}248 249.navigation .page-link:visited, a.date:visited, footer p a:visited {250 color: var(--text);251 opacity: .4;252}253 254footer p {255 margin: 0;256}257 258/** Site footer */259.site-footer {260 padding: 0;261}262 263.footer-heading {264 font-size: 18px;265 margin-bottom: 15px;266}267 268.contact-list, .social-media-list {269 list-style: none;270 margin-left: 0;271}272 273.site-footer .copy {274 font-size: 28px;275}276 277.site-footer .footer-title {278 margin-left: 0;279}280 281/** Page content */282.page-content {283 padding: 110px 0 120px 0;284}285 286.page-content ul {287 margin-bottom: 0;288}289 290.post-list {291 margin-left: 0;292 list-style: none;293}294 295.post-list > li {296 margin-bottom: 120px;297}298 299li.h-entry:last-of-type {300 margin-bottom: 0px;301}302 303.post-link {304 display: block;305 font-size: 24px;306}307 308/** Pagination **/309#post-nav {310 padding-top: 120px;311}312 313#post-nav .prev {314 padding-right: 18px;315}316 317#post-nav .prev a, #post-nav .next a {318 color: #012030;319 text-decoration: none;320 background: var(--accent);321 padding: 12px 24px;322 border-radius: 8px;323}324 325#post-nav .prev a:hover, #post-nav .next a:hover {326 background: var(--text);327}328 329video {330 max-width: 100%;331}332 333iframe {334 margin: 20px 0;335 width: 100%;336 max-width: 100%;337 min-height: 510px;338 overflow: hidden;339}340 341/** Archive **/342.archive_categories {343 border-bottom: 0 !important;344}345 346.archive_categories p {347 display: inline;348 margin-right: 14px;349}350 351.archive_categories p a {352 color: var(--text);353 opacity: .4;354}355 356.archive_categories p a:hover {357 color: var(--accent);358 opacity: 1;359 text-decoration: underline;360}361 362/** Conversations **/363 364.microblog_conversation {365 margin: 60px 0 0 0;366}367 368.microblog_conversation .microblog_post {369 margin-bottom: 32px;370 padding: 42px;371 background: #00000050;372 border-radius: 8px;373}374 375.microblog_conversation .microblog_post:last-of-type {376 margin-bottom: 0px;377}378 379.microblog_user {380 font-size: 18px;381 font-weight: bold;382 text-transform: uppercase;383 letter-spacing: 1.2px;384 color: var(--accent);385 margin: 0 0 24px 0;386 display: flex;387 align-items: center;388}389 390.microblog_avatar {391 display: none;392}393 394.microblog_text p, .microblog_text p a {395 font-size: 28px;396 line-height: 150%;397 color: var(--text);398 margin-bottom: 24px;399}400 401.microblog_text p a:hover {402 color: var(--accent);403 text-decoration: underline;404}405 406.microblog_time a {407 color: var(--text);408 opacity: .4;409 font-size: 18px;410 font-weight: bold;411 text-transform: uppercase;412 letter-spacing: 1px;413 text-decoration: none;414 font-family: 'Roboto Mono', monospace;415}416 417.microblog_time a:hover {418 color: var(--text);419 opacity: 1;420 text-decoration: underline;421}422 423/** Mobile **/424@media screen and (max-width: 800px) {425 426 body {427 font-size: 20px;428 margin: 60px auto;429 padding: 0 12px;430 }431 432 img.site-image {433 width: 80px;434 margin-bottom: 30px;435 }436 437 .page-content {438 padding: 60px 0;439 }440 441 h1, h1 a, h1 a:visited {442 font-size: 42px;443 }444 445 h3, .navigation .page-link, .date, a.date, footer p, footer p a, .microblog_user, .microblog_time a {446 font-size: 14px;447 }448 449 .site-footer .copy, blockquote, .microblog_text p, .microblog_text p a, code {450 font-size: 20px;451 }452 453 #post-nav {454 padding-top: 60px;455 display: flex;456 }457 458 .post-list > li {459 margin-bottom: 60px;460 }461 462}463 464 465 466/* Centre the pagination links */467.extra-pagination { text-align: center; }468 469/* pad out the older and newer pagination links */470span.newer { padding-right:2rem; border-left: solid #ffffff 4px; }471span.older { padding-left:2rem; border-right: solid #ffffff 4px; }472 473/* code shall get monospace-fonts */474code {475 font-family: monospace;476}477 478 479 480@font-face {481 font-family: 'Roboto Mono';482 font-style: italic;483 font-weight: 400;484 font-display: swap;485 src: url(https://fonts.gstatic.com/s/robotomono/v23/L0xoDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrlnAOW9.ttf) format('truetype');486}487@font-face {488 font-family: 'Roboto Mono';489 font-style: italic;490 font-weight: 700;491 font-display: swap;492 src: url(https://fonts.gstatic.com/s/robotomono/v23/L0xoDF4xlVMF-BfR8bXMIjhOsXG-q2oeuFoqFrmAB-W9.ttf) format('truetype');493}494@font-face {495 font-family: 'Roboto Mono';496 font-style: normal;497 font-weight: 400;498 font-display: swap;499 src: url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_3vqPQw.ttf) format('truetype');500}501@font-face {502 font-family: 'Roboto Mono';503 font-style: normal;504 font-weight: 700;505 font-display: swap;506 src: url(https://fonts.gstatic.com/s/robotomono/v23/L0xuDF4xlVMF-BfR8bXMIhJHg45mwgGEFl0_Of2PQw.ttf) format('truetype');507}508@font-face {509 font-family: 'Rubik';510 font-style: italic;511 font-weight: 400;512 font-display: swap;513 src: url(https://fonts.gstatic.com/s/rubik/v28/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8tdE0Uw.ttf) format('truetype');514}515@font-face {516 font-family: 'Rubik';517 font-style: italic;518 font-weight: 700;519 font-display: swap;520 src: url(https://fonts.gstatic.com/s/rubik/v28/iJWbBXyIfDnIV7nEt3KSJbVDV49rz8u6FEUw.ttf) format('truetype');521}522@font-face {523 font-family: 'Rubik';524 font-style: normal;525 font-weight: 400;526 font-display: swap;527 src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-B4i1UA.ttf) format('truetype');528}529@font-face {530 font-family: 'Rubik';531 font-style: normal;532 font-weight: 700;533 font-display: swap;534 src: url(https://fonts.gstatic.com/s/rubik/v28/iJWZBXyIfDnIV5PNhY1KTN7Z-Yh-4I-1UA.ttf) format('truetype');535}536 537 538 539.bigfoot-footnote__button {540 position: relative;541 z-index: 5;542 top: -0.1em;543 -webkit-box-sizing: border-box;544 box-sizing: border-box;545 -moz-box-sizing: border-box;546 display: inline-block;547 padding: 0.35em;548 margin: 0 0.1em 0 0.2em;549 border: none;550 border-radius: 0.3em;551 cursor: pointer;552 background-color: rgba(110, 110, 110, 0.2);553 -webkit-backface-visibility: hidden;554 -ms-backface-visibility: hidden;555 backface-visibility: hidden;556 font-size: 1rem;557 line-height: 0;558 vertical-align: middle;559 text-decoration: none;560 -webkit-font-smoothing: antialiased;561 -webkit-transition-property: background-color;562 transition-property: background-color;563 -webkit-transition-duration: 0.25s;564 transition-duration: 0.25s;565}566 567.bigfoot-footnote__button:hover,568.bigfoot-footnote__button:focus {569 outline: none;570 background-color: rgba(110, 110, 110, 0.5);571}572 573.bigfoot-footnote__button:active {574 background-color: rgba(110, 110, 110, 0.5);575}576 577.bigfoot-footnote__button.is-active {578 background-color: #6e6e6e;579 -webkit-transition-delay: 0.1s;580 transition-delay: 0.1s;581}582 583.bigfoot-footnote__button:after {584 content: '';585 display: table;586 clear: both;587}588 589.bigfoot-footnote__button__circle {590 display: inline-block;591 width: 0.25em;592 height: 0.25em;593 margin-right: 0.25em;594 float: left;595}596 597.bigfoot-footnote__button__circle:last-child {598 margin-right: 0;599}600 601.bigfoot-footnote__container {602 display: inline-block;603 position: relative;604 text-indent: 0;605}606 607@media not print {608 .footnote-print-only {609 display: none !important;610 }611}612 613@media print {614 .bigfoot-footnote,615 .bigfoot-footnote__button {616 display: none !important;617 }618}619 620.bigfoot-footnote {621 position: absolute;622 z-index: 10;623 top: 0;624 left: 0;625 display: inline-block;626 -webkit-box-sizing: border-box;627 -moz-box-sizing: border-box;628 box-sizing: border-box;629 max-width: 90%;630 margin: 1.96924em 0;631 background: #fafafa;632 opacity: 0;633 border-radius: 0.5em;634 border: 1px solid #c3c3c3;635 -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);636 box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);637 line-height: 0;638 -webkit-transition-property: opacity, -webkit-transform;639 transition-property: opacity, transform;640 -webkit-transition-duration: 0.25s;641 transition-duration: 0.25s;642 -webkit-transition-timing-function: ease;643 transition-timing-function: ease;644 -webkit-transform: scale(0.1) translateZ(0);645 -ms-transform: scale(0.1) translateZ(0);646 transform: scale(0.1) translateZ(0);647 -webkit-transform-origin: 50% 0;648 -ms-transform-origin: 50% 0;649 transform-origin: 50% 0;650}651 652.bigfoot-footnote.is-positioned-top {653 top: auto;654 bottom: 0;655}656 657.bigfoot-footnote.is-active {658 -webkit-transform: scale(1) translateZ(0);659 -ms-transform: scale(1) translateZ(0);660 transform: scale(1) translateZ(0);661 opacity: 0.97;662}663 664.bigfoot-footnote.is-bottom-fixed {665 position: fixed;666 bottom: 0;667 top: auto;668 left: 0;669 right: auto;670 -webkit-transform: translateY(100%);671 -ms-transform: translateY(100%);672 transform: translateY(100%);673 width: 100%;674 margin: 0;675 border-radius: 0;676 opacity: 1;677 border-width: 1px 0 0;678 -webkit-transition: -webkit-transform 0.3s ease;679 transition: transform 0.3s ease;680}681 682.bigfoot-footnote.is-bottom-fixed.is-active {683 -webkit-transform: translateY(0);684 -ms-transform: translateY(0);685 transform: translateY(0);686}687 688.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__wrapper {689 margin: 0 0 0 50%;690 -webkit-transform: translateX(-50%);691 -ms-transform: translateX(-50%);692 transform: translateX(-50%);693 max-width: 100%;694}695 696.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__wrapper,697.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__content {698 border-radius: 0;699}700 701.bigfoot-footnote.is-bottom-fixed .bigfoot-footnote__tooltip {702 display: none;703}704 705.bigfoot-footnote.is-scrollable:after {706 content: '';707 position: absolute;708 bottom: 0.3375em;709 left: 0.3375em;710 z-index: 14;711 display: block;712 height: 0.78125em;713 width: 0.625em;714 background-image: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTJweCIgaGVpZ2h0PSIxNXB4IiB2aWV3Qm94PSIwIDAgMTIgMTUiIHZlcnNpb249IjEuMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pbllNaW4iPgogICAgPGcgc3Ryb2tlPSJub25lIiBzdHJva2Utd2lkdGg9IjEiIGZpbGw9Im5vbmUiIGZpbGwtcnVsZT0iZXZlbm9kZCI+CiAgICAgICAgPGcgaWQ9IkFycm93IiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxLjAwMDAwMCwgMS4wMDAwMDApIiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZS1saW5lY2FwPSJzcXVhcmUiPgogICAgICAgICAgICA8cGF0aCBkPSJNNSwwIEw1LDExLjUiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik0wLjUsNy41IEw1LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDxwYXRoIGQ9Ik00LjUsNy41IEw5LjAyNzY5Mjc5LDEyLjAyNzY5MjgiIGlkPSJMaW5lLTIiIHRyYW5zZm9ybT0idHJhbnNsYXRlKDcuMDAwMDAwLCAxMC4wMDAwMDApIHNjYWxlKC0xLCAxKSB0cmFuc2xhdGUoLTcuMDAwMDAwLCAtMTAuMDAwMDAwKSAiPjwvcGF0aD4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPgo=");715 -webkit-background-size: cover;716 background-size: cover;717 opacity: 0.1;718 transition-properties: opacity;719 -webkit-transition-duration: 0.25s;720 transition-duration: 0.25s;721 -webkit-transition-timing-function: ease;722 transition-timing-function: ease;723}724 725.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:before,726.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:after {727 content: '';728 position: absolute;729 width: 100%;730 z-index: 12;731 left: 0;732}733 734.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:before {735 top: -1px;736 height: 1.1em;737 border-radius: 0.5em 0.5em 0 0;738 background-image: -webkit-gradient(linear, left top, left bottom, from(#fafafa), to(rgba(250, 250, 250, 0)));739 background-image: -webkit-linear-gradient(top, #fafafa 50%, rgba(250, 250, 250, 0) 100%);740 background-image: linear-gradient(to bottom, #fafafa 50%, rgba(250, 250, 250, 0) 100%);741}742 743.bigfoot-footnote.is-scrollable .bigfoot-footnote__wrapper:after {744 bottom: -1px;745 height: 1.2em;746 border-radius: 0 0 0.5em 0.5em;747 background-image: -webkit-gradient(linear, left bottom, left top, from(#fafafa), to(rgba(250, 250, 250, 0)));748 background-image: -webkit-linear-gradient(bottom, #fafafa 50%, rgba(250, 250, 250, 0) 100%);749 background-image: linear-gradient(to top, #fafafa 50%, rgba(250, 250, 250, 0) 100%);750}751 752.bigfoot-footnote.is-scrollable ::-webkit-scrollbar {753 display: none;754}755 756.bigfoot-footnote.is-fully-scrolled:after,757.bigfoot-footnote.is-fully-scrolled:before {758 opacity: 0;759 -webkit-transition-delay: 0;760 transition-delay: 0;761}762 763.bigfoot-footnote__wrapper {764 position: relative;765 z-index: 14;766 width: 22em;767 display: inline-block;768 -webkit-box-sizing: inherit;769 -moz-box-sizing: inherit;770 box-sizing: inherit;771 overflow: hidden;772 margin: 0;773 background-color: #fafafa;774 border-radius: 0.5em;775 line-height: 0;776}777 778.bigfoot-footnote__content {779 position: relative;780 z-index: 8;781 display: inline-block;782 max-height: 15em;783 padding: 1.1em 1.3em 1.2em;784 -webkit-box-sizing: inherit;785 -moz-box-sizing: inherit;786 box-sizing: inherit;787 overflow: auto;788 -webkit-overflow-scrolling: touch;789 background: #fafafa;790 border-radius: 0.5em;791 -webkit-font-smoothing: subpixel-antialiased;792 line-height: normal;793}794 795.bigfoot-footnote__content img {796 max-width: 100%;797}798 799.bigfoot-footnote__content *:last-child {800 margin-bottom: 0 !important;801}802 803.bigfoot-footnote__content *:first-child {804 margin-top: 0 !important;805}806 807.bigfoot-footnote__tooltip {808 position: absolute;809 z-index: 12;810 -webkit-box-sizing: border-box;811 -moz-box-sizing: border-box;812 box-sizing: border-box;813 margin-left: -0.65em;814 width: 1.3em;815 height: 1.3em;816 -webkit-transform: rotate(45deg);817 -ms-transform: rotate(45deg);818 transform: rotate(45deg);819 background: #fafafa;820 border: 1px solid #c3c3c3;821 -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);822 box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.3);823 border-top-left-radius: 0;824}825 826.is-positioned-bottom .bigfoot-footnote__tooltip {827 top: -0.65em;828}829 830.is-positioned-top .bigfoot-footnote__tooltip {831 bottom: -0.65em;832}833 834/*# sourceMappingURL=bigfoot-default.css.map */835 </style>836 <meta charset="utf-8">837 <meta content="IE=edge" http-equiv="X-UA-Compatible">838 <meta content="width=device-width initial-scale=1" name="viewport">839 <title>840 Niels K.841 </title>842 <meta content="First the fix:843Set the following in $HOME/.config/imsettings/xinputrc844 export GTK_IM_MODULE=ibus export XMODIFIERS=@im=ibus export QT_IM_MODULE=ibus If the folder $HOME/.config/imsettings doesn’t exist, create it first.845And now a bit of background.846I switched for a short time to Ubuntu. My reasoning was that I can give better family support but I switched back to Fedora. Ubuntu was so far the worst Linux experience, at least with my existing configurations. But after switching back to Fedora 23 Japanese input didn’t work." name="description">847 <meta content="Japanese input in Fedora23" property="og:title">848 <meta content="First the fix:849Set the following in $HOME/.config/imsettings/xinputrc850 export GTK_IM_MODULE=ibus export XMODIFIERS=@im=ibus export QT_IM_MODULE=ibus If the folder $HOME/.config/imsettings doesn’t exist, create it first.851And now a bit of background.852I switched for a short time to Ubuntu. My reasoning was that I can give better family support but I switched back to Fedora. Ubuntu was so far the worst Linux experience, at least with my existing configurations. But after switching back to Fedora 23 Japanese input didn’t work." property="og:description">853 <meta content="article" property="og:type">854 <meta content="" property="og:url">855 <meta content="2016-02-28T10:16:09+02:00" property="article:published_time">856 <meta content="2016-02-28T10:16:09+02:00" property="article:modified_time">857 <meta content="2016" property="article:section">858 </head>859 <body>860 <header class="site-header">861 <div class="wrapper">862 <a>863 <img class="site-image" src="rick.jpg">864 </a>865 <h1 class="site-title">866 <a>867 Niels K.868 </a>869 </h1>870 <div class="navigation">871 <a class="page-link">872 About873 </a>874 <a class="page-link">875 Archive876 </a>877 <a class="page-link">878 Datenschutz879 </a>880 <a class="page-link">881 Search882 </a>883 <a class="page-link">884 RSS885 </a>886 </div>887 </div>888 </header>889 <div class="page-content">890 <div class="wrapper">891 <div class="post h-entry">892 <header class="post-header">893 <h3>894 <a>895 japanisch896 </a>897 </h3>898 <span class="seperator">899 ,900 </span>901 <h3>902 <a>903 Computer904 </a>905 </h3>906 <span class="seperator">907 ,908 </span>909 <h3>910 <a>911 Rechnerkram912 </a>913 </h3>914 <span class="seperator">915 ,916 </span>917 <h3>918 <a>919 linux920 </a>921 </h3>922 <h1 class="p-name">923 Japanese input in Fedora23924 </h1>925 </header>926 <article class="post-content e-content">927 <p>928 First the fix:929 </p>930 <p>931 </p>932 <p>933 Set the following in $HOME/.config/imsettings/xinputrc934 </p>935 <pre>export GTK_IM_MODULE=ibus936export XMODIFIERS=@im=ibus937export QT_IM_MODULE=ibus938</pre>939 <p>940 If the folder $HOME/.config/imsettings doesn’t exist, create it first.941 </p>942 <p>943 And now a bit of background.944 </p>945 <p>946 I switched for a short time to Ubuntu. My reasoning was that I can give better family support but I switched back to Fedora.947 </p>948 <p>949 There is a script /etc/X11/xinit/xinitrc.d/50-xinput.sh. This script tries to do some magic and works pretty late in the process of starting your GUI when using the default GDM.950 </p>951 <p>952 The folder creation part is the place where I guess the script failed for me.953 </p>954 <p>955 And if that file doesn’t get sourced by the script for whatever reason, the script looks up which LANG-variable you have set and compares it to a hardcoded list. And then sets up environment variables depending on your LANG-variable.956 </p>957 <p>958 If you have set en_US.utf8 like me that means that they get set up in a minimal way which leads to not being able to use an IME. And of course the script doesn’t bother logging anything.959 </p>960 <p>961 Dear Fedora Project, this is too much magic and can fail. Especially since there are multiple places in $HOME where you can potentially set up the three environment variables, not all recommended but possible.962 </p>963 </article>964 <p class="u-url date">965 Sunday February 28, 2016966 </p>967 </div>968 </div>969 </div>970 <footer class="site-footer">971 <div class="wrapper">972 <p>973 <span class="copy">974 ©975 </span>976 <span>977 2023,978 </span>979 <span class="footer-title">980 Niels K.981 </span>982 </p>983 </div>984 </footer>985 </body>986</html>987